feat: #1123 breadcrumb component

src/baklava.ts

@@ -3,6 +3,11 @@ export { default as BlAccordion } from "./components/accordion-group/accordion/b
 export { default as BlAccordionGroup } from "./components/accordion-group/bl-accordion-group";
 export { default as BlAlert } from "./components/alert/bl-alert";
 export { default as BlBadge } from "./components/badge/bl-badge";
+export {
+  default as BlBreadcrumb,
+  type BreadcrumbItemData,
+} from "./components/breadcrumb/bl-breadcrumb";
+export { default as BlBreadcrumbItem } from "./components/breadcrumb/item/bl-breadcrumb-item";
 export { default as BlButton } from "./components/button/bl-button";
 export { default as BlCalendar } from "./components/calendar/bl-calendar";
 export { default as BlCheckboxGroup } from "./components/checkbox-group/bl-checkbox-group";

src/components/breadcrumb/bl-breadcrumb.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+
+  --bl-popover-border-color: var(--bl-color-neutral-darkest);
+  --bl-breadcrumb-separator-color: var(--bl-color-neutral-light);
+  --bl-breadcrumb-item-color: var(--bl-color-neutral-dark);
+  --bl-link-color: var(--bl-breadcrumb-item-color, var(--bl-color-neutral-dark));
+  --bl-link-hover-color: var(--bl-link-color);
+  --bl-link-active-color: var(--bl-link-color);
+  --bl-popover-max-width: 108px;
+}
+
+.breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bl-size-2xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumb-list li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bl-size-2xs);
+  font: var(--bl-font-title-4-regular);
+}
+
+.separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--bl-breadcrumb-separator-color, var(--bl-color-neutral-light));
+  font-size: var(--bl-font-size-m);
+  user-select: none;
+}
+
+.chevron {
+  width: 1em;
+  height: 1em;
+}
+
+.ellipsis-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  min-height: 14px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--bl-color-neutral-dark);
+  cursor: pointer;
+}
+
+.ellipsis-trigger.active {
+  padding: 6px;
+  width: 22px;
+  height: 14px;
+  border-radius: 9px;
+  background: var(--bl-color-neutral-lightest);
+}
+
+.ellipsis-dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+}
+
+.ellipsis-dot {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: var(--bl-color-neutral-dark);
+}
+
+.ellipsis-trigger:focus-visible {
+  outline: 2px solid var(--bl-color-primary);
+  outline-offset: 2px;
+}
+
+.overflow-popover {
+  display: contents;
+}
+
+.popover-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-size-2xs);
+  min-width: 120px;
+}
+
+.popover-item {
+  white-space: nowrap;
+}
+
+.open .last {
+  --bl-breadcrumb-item-color: var(--bl-color-neutral-darkest);
+  --bl-link-color: var(--bl-color-neutral-darkest);
+  --bl-link-hover-color: var(--bl-color-neutral-darkest);
+  --bl-link-active-color: var(--bl-color-neutral-darkest);
+}
+
+.popover-item bl-breadcrumb-item {
+  display: block;
+}

src/components/breadcrumb/bl-breadcrumb.stories.mdx

@@ -0,0 +1,104 @@
+import { Meta, Canvas, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit";
+
+<Meta
+  title="Components/Breadcrumb"
+  component="bl-breadcrumb"
+  argTypes={{
+    items: {
+      description: "Breadcrumb öğeleri. Her öğe { href: string, label: string }.",
+      control: false,
+      table: {
+        type: { summary: "BreadcrumbItemData[]" },
+      },
+    },
+  }}
+/>
+
+# Breadcrumb
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/1123)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=30127-3068&t=wp9gNTQXEncunzk0-0)</bl-badge>
+
+The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.
+
+## Usage
+
+* It is limited to displaying links to a maximum of 4 pages.
+* If there are more than 4 pages, three dots are used in between.
+* Clicking on the three dots will open a breadcrumb popover and allow you to select the pages in between.
+
+## Default
+
+<Canvas>
+  <Story name="Default">
+    {() => html`
+      <bl-breadcrumb
+        .items=${[
+          { href: "#item-01", label: "Item 01" },
+          { href: "#item-02", label: "Item 02" },
+          { href: "#item-03", label: "Item 03" },
+          { href: "#item-04", label: "Item 04" },
+        ]}
+      ></bl-breadcrumb>
+    `}
+  </Story>
+</Canvas>
+
+## Hover
+
+<Canvas>
+  <Story name="Hover state">
+    {() => html`
+      <bl-breadcrumb
+        .items=${[
+          { href: "#item-01", label: "Item 01" },
+          { href: "#item-02", label: "Item 02" },
+          { href: "#item-03", label: "Item 03" },
+        ]}
+      ></bl-breadcrumb>
+    `}
+  </Story>
+</Canvas>
+
+## Long Variant
+
+If there are more than 4 pages, three dots are used in between. Clicking on the three dots will open a breadcrumb popover and allow you to select the pages in between.
+
+<Canvas>
+  <Story name="Long variant - 5 items">
+    {() => html`
+      <bl-breadcrumb
+        .items=${[
+          { href: "#item-01", label: "Item 01" },
+          { href: "#item-02", label: "Item 02" },
+          { href: "#item-03", label: "Item 03" },
+          { href: "#item-04", label: "Item 04" },
+          { href: "#item-05", label: "Item 05" },
+        ]}
+      ></bl-breadcrumb>
+    `}
+  </Story>
+</Canvas>
+
+## Son öğe bağlantısız (mevcut sayfa)
+
+Son öğede `href` boş string verilirse mevcut sayfa olarak gösterilir (tıklanmaz).
+
+<Canvas>
+  <Story name="Current page (no href on last item)">
+    {() => html`
+      <bl-breadcrumb
+        .items=${[
+          { href: "#home", label: "Home" },
+          { href: "#categories", label: "Categories" },
+          { href: "", label: "Current Page" },
+        ]}
+      ></bl-breadcrumb>
+    `}
+  </Story>
+</Canvas>
+
+## Reference
+
+<ArgsTable of="bl-breadcrumb" />