@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/breadcrumb.js

@@ -0,0 +1,481 @@
+import { css as y, LitElement as d, html as s, nothing as h } from "lit";
+import { property as p, customElement as f } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { repeat as u } from "lit/directives/repeat.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
+const g = y`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  /* Separator variants - set custom properties on host to cross shadow boundaries */
+  :host([separator='slash']) {
+    --bp-breadcrumb-separator-content: '/';
+  }
+
+  :host([separator='chevron']) {
+    --bp-breadcrumb-separator-content: '›';
+    --bp-breadcrumb-separator-size: 1.2em;
+  }
+
+  :host([separator='arrow']) {
+    --bp-breadcrumb-separator-content: '→';
+  }
+
+  :host([separator='dot']) {
+    --bp-breadcrumb-separator-content: '•';
+    --bp-breadcrumb-separator-size: var(--bp-font-size-lg);
+  }
+
+  /* Size variants - set custom properties on host to cross shadow boundaries */
+  :host([size='sm']) {
+    --bp-breadcrumb-font-size: var(--bp-font-size-sm);
+    --bp-breadcrumb-line-height: var(--bp-line-height-tight);
+  }
+
+  :host([size='md']) {
+    --bp-breadcrumb-font-size: var(--bp-font-size-base);
+    --bp-breadcrumb-line-height: var(--bp-line-height-normal);
+  }
+
+  :host([size='lg']) {
+    --bp-breadcrumb-font-size: var(--bp-font-size-lg);
+    --bp-breadcrumb-line-height: var(--bp-line-height-normal);
+  }
+
+  .breadcrumb {
+    font-family: var(--bp-font-family);
+  }
+
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+  }
+
+  .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    font-size: var(--bp-breadcrumb-font-size, var(--bp-font-size-base));
+    line-height: var(--bp-breadcrumb-line-height, var(--bp-line-height-normal));
+  }
+
+  .item__icon {
+    flex-shrink: 0;
+  }
+
+  .item__label {
+    white-space: nowrap;
+  }
+
+  /* Link styles */
+  .link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-xs);
+    color: var(--bp-color-text-muted);
+    text-decoration: none;
+    transition: color var(--bp-transition-fast);
+    outline: none;
+    border-radius: var(--bp-border-radius);
+  }
+
+  .link:hover {
+    color: var(--bp-color-primary);
+    text-decoration: underline;
+  }
+
+  .link:active {
+    transform: translateY(1px);
+  }
+
+  .link:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Text (non-link) styles */
+  .text {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-xs);
+    color: var(--bp-color-text);
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  /* Current item */
+  .item--current .text {
+    color: var(--bp-color-text);
+  }
+
+  /* Separator styles */
+  .separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--bp-color-text-muted);
+    margin: 0 var(--bp-spacing-2xs);
+    user-select: none;
+  }
+
+  /* Hide separator on last item */
+  :host(:last-of-type) .separator {
+    display: none;
+  }
+
+  /* Separator content via ::before - uses custom properties from parent */
+  .separator::before {
+    content: var(--bp-breadcrumb-separator-content, '/');
+    font-size: var(--bp-breadcrumb-separator-size, inherit);
+  }
+
+  .separator__icon {
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .separator__icon--dot {
+    font-size: var(--bp-font-size-lg);
+    line-height: 1;
+  }
+
+  /* Ellipsis button */
+  .ellipsis-button {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: var(--bp-spacing-xs);
+    margin: calc(-1 * var(--bp-spacing-xs));
+    cursor: pointer;
+    color: var(--bp-color-text-muted);
+    border-radius: var(--bp-border-radius);
+    transition: all var(--bp-transition-fast);
+    outline: none;
+  }
+
+  .ellipsis-button:hover {
+    color: var(--bp-color-primary);
+    background: var(--bp-color-surface);
+  }
+
+  .ellipsis-button:active {
+    transform: scale(0.95);
+  }
+
+  .ellipsis-button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .ellipsis-dots {
+    font-size: var(--bp-font-size-base);
+    letter-spacing: var(--bp-spacing-0-5);
+  }
+
+  /* Sizes */
+  .breadcrumb--sm {
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-tight);
+  }
+
+  .breadcrumb--sm .separator__icon {
+    width: var(--bp-spacing-sm);
+    height: var(--bp-spacing-sm);
+  }
+
+  .breadcrumb--md {
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .breadcrumb--md .separator__icon {
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+  }
+
+  .breadcrumb--lg {
+    font-size: var(--bp-font-size-lg);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .breadcrumb--lg .separator__icon {
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+  }
+
+  /* Separator variants */
+  .breadcrumb--slash .separator__icon {
+    font-size: inherit;
+  }
+
+  .breadcrumb--dot .separator__icon {
+    font-size: inherit;
+  }
+
+  /* Item ellipsis */
+  .item--ellipsis {
+    display: inline-flex;
+  }
+
+  /* Collapse on mobile - handled via maxItems property instead of CSS */
+  .breadcrumb--collapse-mobile {
+    /* Reserved for future container query support */
+  }
+`;
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, t, a, o) => {
+  for (var i = o > 1 ? void 0 : o ? x(t, a) : t, r = e.length - 1, m; r >= 0; r--)
+    (m = e[r]) && (i = (o ? m(t, a, i) : m(i)) || i);
+  return o && i && _(t, a, i), i;
+};
+let l = class extends d {
+  constructor() {
+    super(), this.items = [], this.size = "md", this.separator = "slash", this.ariaLabel = "Breadcrumb", this.collapseOnMobile = !1, this.maxItems = 0;
+  }
+  handleItemClick(e, t, a) {
+    this.dispatchEvent(
+      new CustomEvent("bp-breadcrumb-click", {
+        detail: { item: t, index: a },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(e, t, a) {
+    (e.key === "Enter" || e.key === " ") && (t.href || e.preventDefault(), this.dispatchEvent(
+      new CustomEvent("bp-breadcrumb-click", {
+        detail: { item: t, index: a },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  renderSeparator() {
+    const e = {
+      slash: s`<span class="separator__icon">/</span>`,
+      chevron: s`
+        <svg
+          class="separator__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      `,
+      arrow: s`
+        <svg
+          class="separator__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M5 12h14M12 5l7 7-7 7" />
+        </svg>
+      `,
+      dot: s`<span class="separator__icon separator__icon--dot">•</span>`
+    };
+    return s`
+      <span class="separator" part="separator" aria-hidden="true">
+        <slot name="separator">${e[this.separator]}</slot>
+      </span>
+    `;
+  }
+  renderItem(e, t, a) {
+    const o = e.current || a;
+    return s`
+      <li
+        class=${b({
+      item: !0,
+      "item--current": o
+    })}
+        part="item ${o ? "item-current" : ""}"
+      >
+        ${e.href && !o ? s`
+              <a
+                class="link"
+                part="link"
+                href=${e.href}
+                @click=${(r) => this.handleItemClick(r, e, t)}
+                @keydown=${(r) => this.handleKeyDown(r, e, t)}
+              >
+                ${e.icon ? s`<bp-icon
+                      name=${e.icon}
+                      class="item__icon"
+                    ></bp-icon>` : h}
+                <span class="item__label">${e.label}</span>
+              </a>
+            ` : s`
+              <span
+                class="text"
+                part="text"
+                aria-current=${v(o ? "page" : void 0)}
+              >
+                ${e.icon ? s`<bp-icon
+                      name=${e.icon}
+                      class="item__icon"
+                    ></bp-icon>` : h}
+                <span class="item__label">${e.label}</span>
+              </span>
+            `}
+        ${a ? h : this.renderSeparator()}
+      </li>
+    `;
+  }
+  renderEllipsis(e) {
+    return s`
+      <li class="item item--ellipsis" part="item ellipsis">
+        <button
+          class="ellipsis-button"
+          part="ellipsis-button"
+          aria-label="Show ${e} more items"
+          title="Show ${e} more items"
+        >
+          <span class="ellipsis-dots">…</span>
+        </button>
+        ${this.renderSeparator()}
+      </li>
+    `;
+  }
+  getVisibleItems() {
+    if (this.maxItems <= 0 || this.items.length <= this.maxItems)
+      return { items: this.items, hiddenCount: 0, showEllipsis: !1 };
+    const e = this.items[0], t = this.items.slice(-(this.maxItems - 1)), a = this.items.length - this.maxItems;
+    return {
+      items: [e, ...t],
+      hiddenCount: a,
+      showEllipsis: !0
+    };
+  }
+  render() {
+    const e = {
+      breadcrumb: !0,
+      [`breadcrumb--${this.size}`]: !0,
+      [`breadcrumb--separator-${this.separator}`]: !0,
+      "breadcrumb--collapse-mobile": this.collapseOnMobile
+    }, {
+      items: t,
+      hiddenCount: a,
+      showEllipsis: o
+    } = this.getVisibleItems();
+    return this.items.length > 0 ? s`
+        <nav
+          class=${b(e)}
+          part="nav"
+          aria-label=${this.ariaLabel}
+        >
+          <ol class="list" part="list">
+            ${o ? s`
+                  ${this.renderItem(t[0], 0, !1)}
+                  ${this.renderEllipsis(a)}
+                  ${u(
+      t.slice(1),
+      (i, r) => r,
+      (i, r) => this.renderItem(
+        i,
+        this.items.length - t.length + 1 + r,
+        r === t.length - 2
+      )
+    )}
+                ` : u(
+      t,
+      (i, r) => r,
+      (i, r) => this.renderItem(
+        i,
+        r,
+        r === t.length - 1
+      )
+    )}
+          </ol>
+        </nav>
+      ` : s`
+      <nav
+        class=${b(e)}
+        part="nav"
+        aria-label=${this.ariaLabel}
+      >
+        <ol class="list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+  }
+};
+l.styles = [g];
+n([
+  p({ type: Array })
+], l.prototype, "items", 2);
+n([
+  p({ type: String, reflect: !0 })
+], l.prototype, "size", 2);
+n([
+  p({ type: String, reflect: !0 })
+], l.prototype, "separator", 2);
+n([
+  p({ type: String, attribute: "aria-label" })
+], l.prototype, "ariaLabel", 2);
+n([
+  p({ type: Boolean, attribute: "collapse-on-mobile" })
+], l.prototype, "collapseOnMobile", 2);
+n([
+  p({ type: Number, attribute: "max-items" })
+], l.prototype, "maxItems", 2);
+l = n([
+  f("bp-breadcrumb")
+], l);
+let c = class extends d {
+  constructor() {
+    super(), this.href = "", this.current = !1;
+  }
+  render() {
+    const e = {
+      item: !0,
+      "item--current": this.current
+    };
+    return s`
+      <li
+        class=${b(e)}
+        part="item ${this.current ? "item-current" : ""}"
+      >
+        ${this.href && !this.current ? s`
+              <a class="link" part="link" href=${this.href}>
+                <slot></slot>
+              </a>
+            ` : s`
+              <span
+                class="text"
+                part="text"
+                aria-current=${v(this.current ? "page" : void 0)}
+              >
+                <slot></slot>
+              </span>
+            `}
+        <span class="separator" part="separator" aria-hidden="true"></span>
+      </li>
+    `;
+  }
+};
+c.styles = [g];
+n([
+  p({ type: String })
+], c.prototype, "href", 2);
+n([
+  p({ type: Boolean, reflect: !0 })
+], c.prototype, "current", 2);
+c = n([
+  f("bp-breadcrumb-item")
+], c);
+export {
+  l as BpBreadcrumb,
+  c as BpBreadcrumbItem
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../source/components/breadcrumb/breadcrumb.style.ts","../../source/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const breadcrumbStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: block;\r\n  }\r\n\r\n  /* Separator variants - set custom properties on host to cross shadow boundaries */\r\n  :host([separator='slash']) {\r\n    --bp-breadcrumb-separator-content: '/';\r\n  }\r\n\r\n  :host([separator='chevron']) {\r\n    --bp-breadcrumb-separator-content: '›';\r\n    --bp-breadcrumb-separator-size: 1.2em;\r\n  }\r\n\r\n  :host([separator='arrow']) {\r\n    --bp-breadcrumb-separator-content: '→';\r\n  }\r\n\r\n  :host([separator='dot']) {\r\n    --bp-breadcrumb-separator-content: '•';\r\n    --bp-breadcrumb-separator-size: var(--bp-font-size-lg);\r\n  }\r\n\r\n  /* Size variants - set custom properties on host to cross shadow boundaries */\r\n  :host([size='sm']) {\r\n    --bp-breadcrumb-font-size: var(--bp-font-size-sm);\r\n    --bp-breadcrumb-line-height: var(--bp-line-height-tight);\r\n  }\r\n\r\n  :host([size='md']) {\r\n    --bp-breadcrumb-font-size: var(--bp-font-size-base);\r\n    --bp-breadcrumb-line-height: var(--bp-line-height-normal);\r\n  }\r\n\r\n  :host([size='lg']) {\r\n    --bp-breadcrumb-font-size: var(--bp-font-size-lg);\r\n    --bp-breadcrumb-line-height: var(--bp-line-height-normal);\r\n  }\r\n\r\n  .breadcrumb {\r\n    font-family: var(--bp-font-family);\r\n  }\r\n\r\n  .list {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    gap: 0;\r\n  }\r\n\r\n  .item {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 0;\r\n    font-size: var(--bp-breadcrumb-font-size, var(--bp-font-size-base));\r\n    line-height: var(--bp-breadcrumb-line-height, var(--bp-line-height-normal));\r\n  }\r\n\r\n  .item__icon {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .item__label {\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* Link styles */\r\n  .link {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-xs);\r\n    color: var(--bp-color-text-muted);\r\n    text-decoration: none;\r\n    transition: color var(--bp-transition-fast);\r\n    outline: none;\r\n    border-radius: var(--bp-border-radius);\r\n  }\r\n\r\n  .link:hover {\r\n    color: var(--bp-color-primary);\r\n    text-decoration: underline;\r\n  }\r\n\r\n  .link:active {\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  .link:focus-visible {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  /* Text (non-link) styles */\r\n  .text {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-xs);\r\n    color: var(--bp-color-text);\r\n    font-weight: var(--bp-font-weight-medium);\r\n  }\r\n\r\n  /* Current item */\r\n  .item--current .text {\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  /* Separator styles */\r\n  .separator {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    color: var(--bp-color-text-muted);\r\n    margin: 0 var(--bp-spacing-2xs);\r\n    user-select: none;\r\n  }\r\n\r\n  /* Hide separator on last item */\r\n  :host(:last-of-type) .separator {\r\n    display: none;\r\n  }\r\n\r\n  /* Separator content via ::before - uses custom properties from parent */\r\n  .separator::before {\r\n    content: var(--bp-breadcrumb-separator-content, '/');\r\n    font-size: var(--bp-breadcrumb-separator-size, inherit);\r\n  }\r\n\r\n  .separator__icon {\r\n    width: var(--bp-spacing-md);\r\n    height: var(--bp-spacing-md);\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .separator__icon--dot {\r\n    font-size: var(--bp-font-size-lg);\r\n    line-height: 1;\r\n  }\r\n\r\n  /* Ellipsis button */\r\n  .ellipsis-button {\r\n    appearance: none;\r\n    border: none;\r\n    background: transparent;\r\n    padding: var(--bp-spacing-xs);\r\n    margin: calc(-1 * var(--bp-spacing-xs));\r\n    cursor: pointer;\r\n    color: var(--bp-color-text-muted);\r\n    border-radius: var(--bp-border-radius);\r\n    transition: all var(--bp-transition-fast);\r\n    outline: none;\r\n  }\r\n\r\n  .ellipsis-button:hover {\r\n    color: var(--bp-color-primary);\r\n    background: var(--bp-color-surface);\r\n  }\r\n\r\n  .ellipsis-button:active {\r\n    transform: scale(0.95);\r\n  }\r\n\r\n  .ellipsis-button:focus-visible {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  .ellipsis-dots {\r\n    font-size: var(--bp-font-size-base);\r\n    letter-spacing: var(--bp-spacing-0-5);\r\n  }\r\n\r\n  /* Sizes */\r\n  .breadcrumb--sm {\r\n    font-size: var(--bp-font-size-sm);\r\n    line-height: var(--bp-line-height-tight);\r\n  }\r\n\r\n  .breadcrumb--sm .separator__icon {\r\n    width: var(--bp-spacing-sm);\r\n    height: var(--bp-spacing-sm);\r\n  }\r\n\r\n  .breadcrumb--md {\r\n    font-size: var(--bp-font-size-base);\r\n    line-height: var(--bp-line-height-normal);\r\n  }\r\n\r\n  .breadcrumb--md .separator__icon {\r\n    width: var(--bp-spacing-md);\r\n    height: var(--bp-spacing-md);\r\n  }\r\n\r\n  .breadcrumb--lg {\r\n    font-size: var(--bp-font-size-lg);\r\n    line-height: var(--bp-line-height-normal);\r\n  }\r\n\r\n  .breadcrumb--lg .separator__icon {\r\n    width: var(--bp-spacing-lg);\r\n    height: var(--bp-spacing-lg);\r\n  }\r\n\r\n  /* Separator variants */\r\n  .breadcrumb--slash .separator__icon {\r\n    font-size: inherit;\r\n  }\r\n\r\n  .breadcrumb--dot .separator__icon {\r\n    font-size: inherit;\r\n  }\r\n\r\n  /* Item ellipsis */\r\n  .item--ellipsis {\r\n    display: inline-flex;\r\n  }\r\n\r\n  /* Collapse on mobile - handled via maxItems property instead of CSS */\r\n  .breadcrumb--collapse-mobile {\r\n    /* Reserved for future container query support */\r\n  }\r\n`;\r\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { breadcrumbStyles } from './breadcrumb.style.js';\r\nimport type { IconName } from '../icon/icons/registry.generated.js';\r\n\r\nexport type BreadcrumbSize = 'sm' | 'md' | 'lg';\r\nexport type BreadcrumbSeparator = 'slash' | 'chevron' | 'arrow' | 'dot';\r\n\r\n/**\r\n * Breadcrumb item interface for programmatic configuration\r\n */\r\nexport interface BreadcrumbItem {\r\n  /** Display label for the breadcrumb item */\r\n  label: string;\r\n  /** URL for the breadcrumb link (omit for current page) */\r\n  href?: string;\r\n  /** Icon name to display before the label */\r\n  icon?: IconName;\r\n  /** Whether this is the current/active page */\r\n  current?: boolean;\r\n}\r\n\r\n/**\r\n * A breadcrumb navigation component showing the user's location in a hierarchy.\r\n *\r\n * @element bp-breadcrumb\r\n *\r\n * @property {BreadcrumbItem[]} items - Array of breadcrumb items\r\n * @property {BreadcrumbSize} size - The size of the breadcrumb\r\n * @property {BreadcrumbSeparator} separator - The separator style between items\r\n * @property {string} ariaLabel - Accessible label for the navigation\r\n * @property {boolean} collapseOnMobile - Whether to collapse middle items on small screens\r\n * @property {number} maxItems - Maximum visible items before collapsing (0 = no limit)\r\n *\r\n * @slot - Default slot for custom breadcrumb items\r\n * @slot separator - Custom separator content\r\n *\r\n * @fires bp-breadcrumb-click - Fired when a breadcrumb item is clicked\r\n *\r\n * @csspart nav - The nav element wrapper\r\n * @csspart list - The ordered list element\r\n * @csspart item - Individual breadcrumb item\r\n * @csspart item-current - The current/active breadcrumb item\r\n * @csspart link - Breadcrumb link element\r\n * @csspart separator - Separator between items\r\n * @csspart ellipsis - The ellipsis button when items are collapsed\r\n */\r\n@customElement('bp-breadcrumb')\r\nexport class BpBreadcrumb extends LitElement {\r\n  /**\r\n   * Array of breadcrumb items\r\n   */\r\n  @property({ type: Array }) declare items: BreadcrumbItem[];\r\n\r\n  /**\r\n   * The size of the breadcrumb\r\n   */\r\n  @property({ type: String, reflect: true }) declare size: BreadcrumbSize;\r\n\r\n  /**\r\n   * The separator style between items\r\n   */\r\n  @property({ type: String, reflect: true })\r\n  declare separator: BreadcrumbSeparator;\r\n\r\n  /**\r\n   * Accessible label for the navigation landmark\r\n   */\r\n  @property({ type: String, attribute: 'aria-label' })\r\n  declare ariaLabel: string;\r\n\r\n  /**\r\n   * Whether to collapse middle items on small screens\r\n   */\r\n  @property({ type: Boolean, attribute: 'collapse-on-mobile' })\r\n  declare collapseOnMobile: boolean;\r\n\r\n  /**\r\n   * Maximum visible items before collapsing (0 = no limit)\r\n   */\r\n  @property({ type: Number, attribute: 'max-items' }) declare maxItems: number;\r\n\r\n  static styles = [breadcrumbStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.items = [];\r\n    this.size = 'md';\r\n    this.separator = 'slash';\r\n    this.ariaLabel = 'Breadcrumb';\r\n    this.collapseOnMobile = false;\r\n    this.maxItems = 0;\r\n  }\r\n\r\n  private handleItemClick(\r\n    _event: MouseEvent,\r\n    item: BreadcrumbItem,\r\n    index: number\r\n  ) {\r\n    // Don't prevent default for actual navigation\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-breadcrumb-click', {\r\n        detail: { item, index },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private handleKeyDown(\r\n    event: KeyboardEvent,\r\n    item: BreadcrumbItem,\r\n    index: number\r\n  ) {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      if (!item.href) {\r\n        event.preventDefault();\r\n      }\r\n      this.dispatchEvent(\r\n        new CustomEvent('bp-breadcrumb-click', {\r\n          detail: { item, index },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    }\r\n  }\r\n\r\n  private renderSeparator() {\r\n    const separatorIcons = {\r\n      slash: html`<span class=\"separator__icon\">/</span>`,\r\n      chevron: html`\r\n        <svg\r\n          class=\"separator__icon\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n        >\r\n          <path d=\"M9 18l6-6-6-6\" />\r\n        </svg>\r\n      `,\r\n      arrow: html`\r\n        <svg\r\n          class=\"separator__icon\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n        >\r\n          <path d=\"M5 12h14M12 5l7 7-7 7\" />\r\n        </svg>\r\n      `,\r\n      dot: html`<span class=\"separator__icon separator__icon--dot\">•</span>`,\r\n    };\r\n\r\n    return html`\r\n      <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\r\n        <slot name=\"separator\">${separatorIcons[this.separator]}</slot>\r\n      </span>\r\n    `;\r\n  }\r\n\r\n  private renderItem(item: BreadcrumbItem, index: number, isLast: boolean) {\r\n    const isCurrent = item.current || isLast;\r\n    const itemClasses = {\r\n      item: true,\r\n      'item--current': isCurrent,\r\n    };\r\n\r\n    return html`\r\n      <li\r\n        class=${classMap(itemClasses)}\r\n        part=\"item ${isCurrent ? 'item-current' : ''}\"\r\n      >\r\n        ${item.href && !isCurrent\r\n          ? html`\r\n              <a\r\n                class=\"link\"\r\n                part=\"link\"\r\n                href=${item.href}\r\n                @click=${(e: MouseEvent) =>\r\n                  this.handleItemClick(e, item, index)}\r\n                @keydown=${(e: KeyboardEvent) =>\r\n                  this.handleKeyDown(e, item, index)}\r\n              >\r\n                ${item.icon\r\n                  ? html`<bp-icon\r\n                      name=${item.icon}\r\n                      class=\"item__icon\"\r\n                    ></bp-icon>`\r\n                  : nothing}\r\n                <span class=\"item__label\">${item.label}</span>\r\n              </a>\r\n            `\r\n          : html`\r\n              <span\r\n                class=\"text\"\r\n                part=\"text\"\r\n                aria-current=${ifDefined(isCurrent ? 'page' : undefined)}\r\n              >\r\n                ${item.icon\r\n                  ? html`<bp-icon\r\n                      name=${item.icon}\r\n                      class=\"item__icon\"\r\n                    ></bp-icon>`\r\n                  : nothing}\r\n                <span class=\"item__label\">${item.label}</span>\r\n              </span>\r\n            `}\r\n        ${!isLast ? this.renderSeparator() : nothing}\r\n      </li>\r\n    `;\r\n  }\r\n\r\n  private renderEllipsis(hiddenCount: number) {\r\n    return html`\r\n      <li class=\"item item--ellipsis\" part=\"item ellipsis\">\r\n        <button\r\n          class=\"ellipsis-button\"\r\n          part=\"ellipsis-button\"\r\n          aria-label=\"Show ${hiddenCount} more items\"\r\n          title=\"Show ${hiddenCount} more items\"\r\n        >\r\n          <span class=\"ellipsis-dots\">…</span>\r\n        </button>\r\n        ${this.renderSeparator()}\r\n      </li>\r\n    `;\r\n  }\r\n\r\n  private getVisibleItems(): {\r\n    items: BreadcrumbItem[];\r\n    hiddenCount: number;\r\n    showEllipsis: boolean;\r\n  } {\r\n    if (this.maxItems <= 0 || this.items.length <= this.maxItems) {\r\n      return { items: this.items, hiddenCount: 0, showEllipsis: false };\r\n    }\r\n\r\n    // Show first item, ellipsis, and last (maxItems - 1) items\r\n    const firstItem = this.items[0];\r\n    const lastItems = this.items.slice(-(this.maxItems - 1));\r\n    const hiddenCount = this.items.length - this.maxItems;\r\n\r\n    return {\r\n      items: [firstItem, ...lastItems],\r\n      hiddenCount,\r\n      showEllipsis: true,\r\n    };\r\n  }\r\n\r\n  render() {\r\n    const containerClasses = {\r\n      breadcrumb: true,\r\n      [`breadcrumb--${this.size}`]: true,\r\n      [`breadcrumb--separator-${this.separator}`]: true,\r\n      'breadcrumb--collapse-mobile': this.collapseOnMobile,\r\n    };\r\n\r\n    const {\r\n      items: visibleItems,\r\n      hiddenCount,\r\n      showEllipsis,\r\n    } = this.getVisibleItems();\r\n\r\n    // If using programmatic items\r\n    if (this.items.length > 0) {\r\n      return html`\r\n        <nav\r\n          class=${classMap(containerClasses)}\r\n          part=\"nav\"\r\n          aria-label=${this.ariaLabel}\r\n        >\r\n          <ol class=\"list\" part=\"list\">\r\n            ${showEllipsis\r\n              ? html`\r\n                  ${this.renderItem(visibleItems[0], 0, false)}\r\n                  ${this.renderEllipsis(hiddenCount)}\r\n                  ${repeat(\r\n                    visibleItems.slice(1),\r\n                    (_item, index) => index,\r\n                    (item, index) =>\r\n                      this.renderItem(\r\n                        item,\r\n                        this.items.length - visibleItems.length + 1 + index,\r\n                        index === visibleItems.length - 2\r\n                      )\r\n                  )}\r\n                `\r\n              : repeat(\r\n                  visibleItems,\r\n                  (_item, index) => index,\r\n                  (item, index) =>\r\n                    this.renderItem(\r\n                      item,\r\n                      index,\r\n                      index === visibleItems.length - 1\r\n                    )\r\n                )}\r\n          </ol>\r\n        </nav>\r\n      `;\r\n    }\r\n\r\n    // Slotted content fallback\r\n    return html`\r\n      <nav\r\n        class=${classMap(containerClasses)}\r\n        part=\"nav\"\r\n        aria-label=${this.ariaLabel}\r\n      >\r\n        <ol class=\"list\" part=\"list\">\r\n          <slot></slot>\r\n        </ol>\r\n      </nav>\r\n    `;\r\n  }\r\n}\r\n\r\n/**\r\n * A breadcrumb item component for use with bp-breadcrumb.\r\n *\r\n * @element bp-breadcrumb-item\r\n *\r\n * @property {string} href - URL for the breadcrumb link\r\n * @property {boolean} current - Whether this is the current page\r\n *\r\n * @slot - Content of the breadcrumb item\r\n *\r\n * @csspart item - The item container\r\n * @csspart link - The link element (when href is provided)\r\n */\r\n@customElement('bp-breadcrumb-item')\r\nexport class BpBreadcrumbItem extends LitElement {\r\n  /**\r\n   * URL for the breadcrumb link (omit for current page)\r\n   */\r\n  @property({ type: String }) declare href: string;\r\n\r\n  /**\r\n   * Whether this is the current/active page\r\n   */\r\n  @property({ type: Boolean, reflect: true }) declare current: boolean;\r\n\r\n  static styles = [breadcrumbStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.href = '';\r\n    this.current = false;\r\n  }\r\n\r\n  render() {\r\n    const itemClasses = {\r\n      item: true,\r\n      'item--current': this.current,\r\n    };\r\n\r\n    return html`\r\n      <li\r\n        class=${classMap(itemClasses)}\r\n        part=\"item ${this.current ? 'item-current' : ''}\"\r\n      >\r\n        ${this.href && !this.current\r\n          ? html`\r\n              <a class=\"link\" part=\"link\" href=${this.href}>\r\n                <slot></slot>\r\n              </a>\r\n            `\r\n          : html`\r\n              <span\r\n                class=\"text\"\r\n                part=\"text\"\r\n                aria-current=${ifDefined(this.current ? 'page' : undefined)}\r\n              >\r\n                <slot></slot>\r\n              </span>\r\n            `}\r\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>\r\n      </li>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-breadcrumb': BpBreadcrumb;\r\n    'bp-breadcrumb-item': BpBreadcrumbItem;\r\n  }\r\n}\r\n"],"names":["breadcrumbStyles","css","BpBreadcrumb","LitElement","_event","item","index","event","separatorIcons","html","isLast","isCurrent","classMap","e","nothing","ifDefined","hiddenCount","firstItem","lastItems","containerClasses","visibleItems","showEllipsis","repeat","_item","__decorateClass","property","customElement","BpBreadcrumbItem","itemClasses"],"mappings":";;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiDzB,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAoC3C,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"}