@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/breadcrumb-BUUBrakn.js

@@ -0,0 +1,459 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { classMap as l } from "lit/directives/class-map.js";
+import { repeat as u } from "lit/directives/repeat.js";
+//#region source/components/breadcrumb/breadcrumb.style.ts
+var d = r`
+  /* 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;
+  }
+
+  .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 */
+  }
+`, f = r`
+  /* 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);
+  }
+`, p = class extends n {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [d];
+	}
+	constructor() {
+		super(), this.items = [], this.size = "md", this.separator = "slash", this.ariaLabel = "Breadcrumb", this.collapseOnMobile = !1, this.maxItems = 0;
+	}
+	handleItemClick(e, t, n) {
+		this.dispatchEvent(new CustomEvent("bp-breadcrumb-click", {
+			detail: {
+				item: t,
+				index: n
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleKeyDown(e, t, n) {
+		(e.key === "Enter" || e.key === " ") && (t.href || e.preventDefault(), this.dispatchEvent(new CustomEvent("bp-breadcrumb-click", {
+			detail: {
+				item: t,
+				index: n
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	renderSeparator() {
+		let e = {
+			slash: i`<span class="separator__icon">/</span>`,
+			chevron: i`
+        <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: i`
+        <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: i`<span class="separator__icon separator__icon--dot">•</span>`
+		};
+		return i`
+      <span class="separator" part="separator" aria-hidden="true">
+        <slot name="separator">${e[this.separator]}</slot>
+      </span>
+    `;
+	}
+	renderItem(e, t, n) {
+		let r = e.current || n;
+		return i`
+      <li
+        class=${l({
+			item: !0,
+			"item--current": r
+		})}
+        part="item ${r ? "item-current" : ""}"
+      >
+        ${e.href && !r ? i`
+                <a
+                  class="link"
+                  part="link"
+                  href=${e.href}
+                  @click=${(n) => this.handleItemClick(n, e, t)}
+                  @keydown=${(n) => this.handleKeyDown(n, e, t)}
+                >
+                  ${e.icon ? i`<bp-icon
+                          name=${e.icon}
+                          class="item__icon"
+                        ></bp-icon>` : a}
+                  <span class="item__label">${e.label}</span>
+                </a>
+              ` : i`
+                <span
+                  class="text"
+                  part="text"
+                  aria-current=${c(r ? "page" : void 0)}
+                >
+                  ${e.icon ? i`<bp-icon
+                          name=${e.icon}
+                          class="item__icon"
+                        ></bp-icon>` : a}
+                  <span class="item__label">${e.label}</span>
+                </span>
+              `}
+        ${n ? a : this.renderSeparator()}
+      </li>
+    `;
+	}
+	renderEllipsis(e) {
+		return i`
+      <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
+		};
+		let e = this.items[0], t = this.items.slice(-(this.maxItems - 1)), n = this.items.length - this.maxItems;
+		return {
+			items: [e, ...t],
+			hiddenCount: n,
+			showEllipsis: !0
+		};
+	}
+	render() {
+		let e = {
+			breadcrumb: !0,
+			[`breadcrumb--${this.size}`]: !0,
+			[`breadcrumb--separator-${this.separator}`]: !0,
+			"breadcrumb--collapse-mobile": this.collapseOnMobile
+		}, { items: t, hiddenCount: n, showEllipsis: r } = this.getVisibleItems();
+		return this.items.length > 0 ? i`
+        <nav
+          class=${l(e)}
+          part="nav"
+          aria-label=${this.ariaLabel}
+        >
+          <ol class="list" part="list">
+            ${r ? i`
+                    ${this.renderItem(t[0], 0, !1)}
+                    ${this.renderEllipsis(n)}
+                    ${u(t.slice(1), (e, t) => t, (e, n) => this.renderItem(e, this.items.length - t.length + 1 + n, n === t.length - 2))}
+                  ` : u(t, (e, t) => t, (e, n) => this.renderItem(e, n, n === t.length - 1))}
+          </ol>
+        </nav>
+      ` : i`
+      <nav
+        class=${l(e)}
+        part="nav"
+        aria-label=${this.ariaLabel}
+      >
+        <ol class="list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+	}
+};
+e([s({ type: Array })], p.prototype, "items", void 0), e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", void 0), e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "separator", void 0), e([s({
+	type: String,
+	attribute: "aria-label"
+})], p.prototype, "ariaLabel", void 0), e([s({
+	type: Boolean,
+	attribute: "collapse-on-mobile"
+})], p.prototype, "collapseOnMobile", void 0), e([s({
+	type: Number,
+	attribute: "max-items"
+})], p.prototype, "maxItems", void 0), p = e([o("bp-breadcrumb")], p);
+var m = class extends n {
+	static {
+		this.styles = [d, f];
+	}
+	constructor() {
+		super(), this.href = "", this.current = !1;
+	}
+	render() {
+		let e = {
+			item: !0,
+			"item--current": this.current
+		};
+		return i`
+      <li
+        class=${l(e)}
+        part="item ${this.current ? "item-current" : ""}"
+      >
+        ${this.href && !this.current ? i`
+                <a class="link" part="link" href=${this.href}>
+                  <slot></slot>
+                </a>
+              ` : i`
+                <span
+                  class="text"
+                  part="text"
+                  aria-current=${c(this.current ? "page" : void 0)}
+                >
+                  <slot></slot>
+                </span>
+              `}
+        <span class="separator" part="separator" aria-hidden="true"></span>
+      </li>
+    `;
+	}
+};
+e([s({ type: String })], m.prototype, "href", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "current", void 0), m = e([o("bp-breadcrumb-item")], m);
+//#endregion
+export { m as n, p as t };
+
+//# sourceMappingURL=breadcrumb-BUUBrakn.js.map

package/dist/shared/breadcrumb-BUUBrakn.js.map

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

package/dist/shared/button-BBmxCyz-.js

@@ -0,0 +1,186 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region source/components/button/button.style.ts
+var o = n`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .button {
+    /* Reset */
+    appearance: none;
+    border: none;
+    margin: 0;
+
+    /* Layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bp-spacing-sm);
+    cursor: pointer;
+    user-select: none;
+
+    /* Typography */
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-medium);
+    text-decoration: none;
+    white-space: nowrap;
+
+    /* Visual */
+    border-radius: var(--bp-border-radius-md);
+    transition: all var(--bp-duration-fast);
+
+    /* Accessibility */
+    outline: none;
+  }
+
+  /* Variants */
+  .button--primary {
+    background: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--success {
+    background: var(--bp-color-success);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--error {
+    background: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--warning {
+    background: var(--bp-color-warning);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--info {
+    background: var(--bp-color-info);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--secondary {
+    background: var(--bp-color-surface-elevated);
+    color: var(--bp-color-text);
+    border: var(--bp-border-width) solid var(--bp-color-border-strong);
+  }
+
+  /* Sizes */
+  .button--sm {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-tight);
+  }
+
+  .button--md {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .button--lg {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* States */
+  .button:hover:not(:disabled) {
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  .button--primary:hover:not(:disabled) {
+    background: var(--bp-color-primary-hover);
+  }
+
+  .button--success:hover:not(:disabled) {
+    background: var(--bp-color-success-hover);
+  }
+
+  .button--error:hover:not(:disabled) {
+    background: var(--bp-color-error-hover);
+  }
+
+  .button--warning:hover:not(:disabled) {
+    background: var(--bp-color-warning-hover);
+  }
+
+  .button--info:hover:not(:disabled) {
+    background: var(--bp-color-info-hover);
+  }
+
+  .button--secondary:hover:not(:disabled) {
+    background: var(--bp-color-surface);
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .button:active:not(:disabled) {
+    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.15);
+  }
+
+  .button--primary:active:not(:disabled) {
+    background: var(--bp-color-primary-active);
+  }
+
+  .button:disabled {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+  }
+
+  .button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+`, s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button";
+	}
+	handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("bp-click", {
+			detail: { originalEvent: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return r`
+      <button
+        part="button"
+        class="button button--${this.variant} button--${this.size}"
+        type=${this.type}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot></slot>
+      </button>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "type", void 0), s = e([i("bp-button")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=button-BBmxCyz-.js.map