@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/link-BlDSXjMo.js

@@ -0,0 +1,174 @@
+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";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+//#region source/components/link/link.style.ts
+var s = n`
+  /* Base styles */
+  :host {
+    display: inline;
+  }
+
+  .link {
+    display: inline;
+    font-family: var(--bp-font-family);
+    font-size: inherit;
+    font-weight: inherit;
+    color: var(--bp-color-primary);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color var(--bp-transition-fast);
+  }
+
+  .link:hover {
+    color: var(--bp-color-primary-hover);
+  }
+
+  .link:active {
+    color: var(--bp-color-primary-active);
+    transform: translateY(var(--bp-spacing-0-5));
+  }
+
+  .link:visited {
+    color: var(--bp-color-primary);
+  }
+
+  .link:visited:hover {
+    color: var(--bp-color-primary-hover);
+  }
+
+  .link:focus-visible {
+    outline: var(--bp-focus-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+    border-radius: var(--bp-border-radius-sm);
+  }
+
+  .link[aria-disabled='true'] {
+    color: var(--bp-color-text-muted);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Variants */
+  .link--primary {
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  .link--muted {
+    color: var(--bp-color-text-muted);
+  }
+
+  .link--muted:hover {
+    color: var(--bp-color-text);
+  }
+
+  .link--muted:active {
+    color: var(--bp-color-text);
+  }
+
+  .link--muted:visited {
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Underline variants */
+  .link--underline-always {
+    text-decoration: underline;
+  }
+
+  .link--underline-hover {
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: text-decoration-color var(--bp-transition-fast);
+  }
+
+  .link--underline-hover:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .link--underline-none {
+    text-decoration: none;
+  }
+
+  .link--underline-none:hover {
+    text-decoration: none;
+  }
+
+  /* Size variants */
+  .link--size-sm {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .link--size-md {
+    font-size: inherit;
+  }
+
+  .link--size-lg {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* External link indicator */
+  .link[target='_blank']::after {
+    content: '↗';
+    margin-left: var(--bp-spacing-1);
+    vertical-align: super;
+    line-height: 0;
+    opacity: 0.75;
+    transition: opacity var(--bp-transition-fast);
+  }
+
+  .link[target='_blank']:hover::after {
+    opacity: 1;
+  }
+`, c = class extends t {
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.href = "", this.target = "", this.rel = "", this.variant = "default", this.underline = "hover", this.size = "md", this.disabled = !1;
+	}
+	handleClick(e) {
+		this.disabled && e.preventDefault();
+	}
+	render() {
+		let e = this.target === "_blank", t = this.rel || (e ? "noopener noreferrer" : void 0);
+		return r`
+      <a
+        class="link link--${this.variant} link--underline-${this.underline} link--size-${this.size}"
+        href=${o(this.disabled ? void 0 : this.href || void 0)}
+        target=${o(this.target || void 0)}
+        rel=${o(t)}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        @click=${this.handleClick}
+        part="link"
+      >
+        <slot></slot>
+      </a>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "href", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "target", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "rel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "underline", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), c = e([i("bp-link")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=link-BlDSXjMo.js.map

package/dist/shared/link-BlDSXjMo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-BlDSXjMo.js","names":["_decorate","__decorate","linkStyles","BpLink","LitElement","event","isExternal","computedRel","ifDefined","property","customElement"],"sources":["../../source/components/link/link.style.ts","../../source/components/link/link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const linkStyles = css`\n  /* Base styles */\n  :host {\n    display: inline;\n  }\n\n  .link {\n    display: inline;\n    font-family: var(--bp-font-family);\n    font-size: inherit;\n    font-weight: inherit;\n    color: var(--bp-color-primary);\n    text-decoration: none;\n    cursor: pointer;\n    transition: color var(--bp-transition-fast);\n  }\n\n  .link:hover {\n    color: var(--bp-color-primary-hover);\n  }\n\n  .link:active {\n    color: var(--bp-color-primary-active);\n    transform: translateY(var(--bp-spacing-0-5));\n  }\n\n  .link:visited {\n    color: var(--bp-color-primary);\n  }\n\n  .link:visited:hover {\n    color: var(--bp-color-primary-hover);\n  }\n\n  .link:focus-visible {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    border-radius: var(--bp-border-radius-sm);\n  }\n\n  .link[aria-disabled='true'] {\n    color: var(--bp-color-text-muted);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* Variants */\n  .link--primary {\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  .link--muted {\n    color: var(--bp-color-text-muted);\n  }\n\n  .link--muted:hover {\n    color: var(--bp-color-text);\n  }\n\n  .link--muted:active {\n    color: var(--bp-color-text);\n  }\n\n  .link--muted:visited {\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Underline variants */\n  .link--underline-always {\n    text-decoration: underline;\n  }\n\n  .link--underline-hover {\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    transition: text-decoration-color var(--bp-transition-fast);\n  }\n\n  .link--underline-hover:hover {\n    text-decoration-color: currentColor;\n  }\n\n  .link--underline-none {\n    text-decoration: none;\n  }\n\n  .link--underline-none:hover {\n    text-decoration: none;\n  }\n\n  /* Size variants */\n  .link--size-sm {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .link--size-md {\n    font-size: inherit;\n  }\n\n  .link--size-lg {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* External link indicator */\n  .link[target='_blank']::after {\n    content: '↗';\n    margin-left: var(--bp-spacing-1);\n    vertical-align: super;\n    line-height: 0;\n    opacity: 0.75;\n    transition: opacity var(--bp-transition-fast);\n  }\n\n  .link[target='_blank']:hover::after {\n    opacity: 1;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { linkStyles } from './link.style.js';\n\nexport type LinkVariant = 'default' | 'primary' | 'muted';\nexport type LinkUnderline = 'always' | 'hover' | 'none';\nexport type LinkSize = 'sm' | 'md' | 'lg';\n\n/**\n * A link component that provides styled anchor elements with variants.\n * Supports internal and external links with accessibility features.\n */\n@customElement('bp-link')\nexport class BpLink extends LitElement {\n  /**\n   * The URL the link points to.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare href: string;\n\n  /**\n   * Where to display the linked URL (same semantics as anchor target).\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare target: string;\n\n  /**\n   * Relationship of the linked URL (same semantics as anchor rel).\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare rel: string;\n\n  /**\n   * Visual variant of the link.\n   * @type {'default' | 'primary' | 'muted'}\n   * @default 'default'\n   */\n  @property({ type: String, reflect: true }) declare variant: LinkVariant;\n\n  /**\n   * Underline style for the link.\n   * @type {'always' | 'hover' | 'none'}\n   * @default 'hover'\n   */\n  @property({ type: String, reflect: true }) declare underline: LinkUnderline;\n\n  /**\n   * Size of the link text.\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: LinkSize;\n\n  /**\n   * Whether the link is disabled.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [linkStyles];\n\n  constructor() {\n    super();\n    this.href = '';\n    this.target = '';\n    this.rel = '';\n    this.variant = 'default';\n    this.underline = 'hover';\n    this.size = 'md';\n    this.disabled = false;\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    const isExternal = this.target === '_blank';\n    const computedRel =\n      this.rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n    return html`\n      <a\n        class=\"link link--${this.variant} link--underline-${\n          this.underline\n        } link--size-${this.size}\"\n        href=${ifDefined(this.disabled ? undefined : this.href || undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(computedRel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @click=${this.handleClick}\n        part=\"link\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-link': BpLink;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAaE,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCYhBC,IAAN,cAAqBC,EAAW;;EAkDrB,KAAA,SAAA,CAACF,CAAU;;CAE3B,cAAc;EAQZ,AAPA,MAAM,GACN,KAAK,OAAO,IACZ,KAAK,SAAS,IACd,KAAK,MAAM,IACX,KAAK,UAAU,WACf,KAAK,YAAY,SACjB,KAAK,OAAO,MACZ,KAAK,WAAW;CAClB;CAEA,YAAoB,GAAmB;EACrC,AAAI,KAAK,YACPG,EAAM,eAAe;CAEzB;CAEA,SAAS;EACP,IAAMC,IAAa,KAAK,WAAW,UAC7BC,IACJ,KAAK,QAAQD,IAAa,wBAAwB,KAAA;EAEpD,OAAO,CAAI;;4BAEa,KAAK,QAAQ,mBAC/B,KAAK,UACN,cAAc,KAAK,KAAK;eAClBE,EAAU,KAAK,WAAW,KAAA,IAAY,KAAK,QAAQ,KAAA,CAAS,EAAE;iBAC5DA,EAAU,KAAK,UAAU,KAAA,CAAS,EAAE;cACvCA,EAAUD,CAAW,EAAE;wBACb,KAAK,WAAW,SAAS,QAAQ;iBACxC,KAAK,YAAY;;;;;;CAMhC;AACF;AApFGP,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,UAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,OAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,WAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,YAAA,KAAA,CAAA,GAjD3C,IAAAH,EAAA,CAAAU,EAAc,SAAS,CAAA,GAAAP,CAAA"}

package/dist/shared/memoize-CpXRWhgJ.js

@@ -0,0 +1,14 @@
+//#region source/utilities/memoize.ts
+function e(e) {
+	let n, r, i = !1;
+	return (...a) => i && t(n, a) ? r : (n = a, r = e(...a), i = !0, r);
+}
+function t(e, t) {
+	if (e.length !== t.length) return !1;
+	for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
+	return !0;
+}
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=memoize-CpXRWhgJ.js.map

package/dist/shared/memoize-CpXRWhgJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoize-CpXRWhgJ.js","names":["memoizeOne","lastArgs","lastResult","hasBeenCalled","args","argsMatch","fn","prev","next","i"],"sources":["../../source/utilities/memoize.ts"],"sourcesContent":["/**\n * Single-result memoization utility.\n * Caches the last call's arguments and result using shallow equality comparison.\n * Ideal for willUpdate() patterns where you memoize based on reactive properties.\n */\n\nexport function memoizeOne<T extends (...args: never[]) => unknown>(fn: T): T {\n  let lastArgs: Parameters<T> | undefined;\n  let lastResult: ReturnType<T>;\n  let hasBeenCalled = false;\n\n  const memoized = (...args: Parameters<T>): ReturnType<T> => {\n    if (hasBeenCalled && argsMatch(lastArgs!, args)) {\n      return lastResult;\n    }\n\n    lastArgs = args;\n    lastResult = fn(...args) as ReturnType<T>;\n    hasBeenCalled = true;\n    return lastResult;\n  };\n\n  return memoized as T;\n}\n\nfunction argsMatch(prev: unknown[], next: unknown[]): boolean {\n  if (prev.length !== next.length) {\n    return false;\n  }\n\n  for (let i = 0; i < prev.length; i++) {\n    if (prev[i] !== next[i]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"mappings":";AAMA,SAAgBA,EAAoD,GAAU;CAC5E,IAAIC,GACAC,GACAC,IAAgB;CAapB,QAXkB,GAAGC,MACfD,KAAiBE,EAAUJ,GAAWG,CAAI,IACrCF,KAGT,IAAWE,GACX,IAAaE,EAAG,GAAGF,CAAI,GACvB,IAAgB,IACTF;AAIX;AAEA,SAASG,EAAU,GAAiB,GAA0B;CAC5D,IAAIE,EAAK,WAAWC,EAAK,QACvB,OAAO;CAGT,KAAK,IAAIC,IAAI,GAAGA,IAAIF,EAAK,QAAQ,KAC/B,IAAIA,EAAKE,OAAOD,EAAKC,IACnB,OAAO;CAIX,OAAO;AACT"}

package/dist/shared/menu-Cr_E847O.js

@@ -0,0 +1,291 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+//#region source/components/menu/menu.style.ts
+var c = n`
+  /* Base styles - Menu Container */
+  :host {
+    display: block;
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    min-width: 200px;
+    padding: var(--bp-spacing-xs) 0;
+    margin: 0;
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    box-shadow: var(--bp-shadow-lg);
+    font-family: var(--bp-font-family);
+    list-style: none;
+    outline: none;
+  }
+
+  /* Menu Sizes */
+  .menu--sm {
+    min-width: 160px;
+  }
+
+  .menu--lg {
+    min-width: 280px;
+  }
+
+  /* Menu Item Base */
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    margin: 0 var(--bp-spacing-xs);
+    min-height: 40px;
+    border-radius: var(--bp-border-radius-sm);
+    background-color: transparent;
+    color: var(--bp-color-text);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    font-weight: var(--bp-font-weight-normal);
+    line-height: var(--bp-line-height-normal);
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      transform var(--bp-transition-fast);
+    user-select: none;
+    outline: none;
+  }
+
+  /* Menu Item Sizes */
+  .menu-item--sm {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    min-height: 36px;
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .menu-item--lg {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    min-height: 48px;
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* Menu Item States */
+  .menu-item:hover:not(.menu-item--disabled) {
+    background-color: var(--bp-color-surface);
+  }
+
+  .menu-item:focus-visible:not(.menu-item--disabled) {
+    background-color: var(--bp-color-surface);
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-primary);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .menu-item:active:not(.menu-item--disabled) {
+    background-color: var(--bp-color-surface);
+    transform: scale(0.98);
+  }
+
+  .menu-item--selected {
+    background-color: var(--bp-color-surface);
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .menu-item--selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: var(--bp-color-primary);
+    border-radius: 0 var(--bp-border-radius-sm) var(--bp-border-radius-sm) 0;
+  }
+
+  .menu-item--disabled {
+    color: var(--bp-color-text-muted);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Menu Item Parts */
+  .menu-item__prefix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .menu-item__prefix:empty {
+    display: none;
+  }
+
+  .menu-item__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu-item__suffix {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .menu-item__suffix:empty {
+    display: none;
+  }
+
+  .menu-item__shortcut {
+    color: var(--bp-color-text-muted);
+    font-size: var(--bp-font-size-sm);
+    font-family: var(--bp-font-family-mono);
+    padding: 2px var(--bp-spacing-xs);
+    background-color: var(--bp-color-surface);
+    border-radius: var(--bp-border-radius-sm);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  .menu-item__arrow {
+    color: var(--bp-color-text-muted);
+    font-size: var(--bp-font-size-lg);
+    line-height: 1;
+  }
+
+  /* Menu Divider */
+  .menu-divider {
+    height: var(--bp-border-width);
+    margin: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    background-color: var(--bp-color-border);
+  }
+`, l = class extends t {
+	static {
+		this.styles = [c];
+	}
+	constructor() {
+		super(), this.focusedIndex = -1, this.handleFocusIn = (e) => {
+			let t = e.target, n = this.menuItems;
+			this.focusedIndex = n.indexOf(t);
+		}, this.size = "md";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("focusin", this.handleFocusIn);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("focusin", this.handleFocusIn);
+	}
+	get menuItems() {
+		let e = this.shadowRoot?.querySelector("slot");
+		return e ? e.assignedElements().filter((e) => e.tagName === "BP-MENU-ITEM") : [];
+	}
+	handleKeyDown(e) {
+		let t = this.menuItems.filter((e) => !e.disabled);
+		if (t.length !== 0) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), this.focusedIndex = Math.min(this.focusedIndex + 1, t.length - 1), t[this.focusedIndex]?.focus();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this.focusedIndex = Math.max(this.focusedIndex - 1, 0), t[this.focusedIndex]?.focus();
+				break;
+			case "Home":
+				e.preventDefault(), this.focusedIndex = 0, t[0]?.focus();
+				break;
+			case "End": e.preventDefault(), this.focusedIndex = t.length - 1, t[t.length - 1]?.focus();
+		}
+	}
+	handleSlotChange() {
+		this.menuItems.forEach((e) => {
+			e.size = this.size;
+		});
+	}
+	render() {
+		return r`
+      <div
+        class="menu menu--${this.size}"
+        part="container"
+        role="menu"
+        @keydown=${this.handleKeyDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], l.prototype, "size", void 0), e([s()], l.prototype, "focusedIndex", void 0), l = e([a("bp-menu")], l);
+var u = class extends t {
+	static {
+		this.styles = [c];
+	}
+	constructor() {
+		super(), this.value = "", this.disabled = !1, this.selected = !1, this.hasSubmenu = !1, this.size = "md", this.shortcut = "";
+	}
+	focus() {
+		(this.shadowRoot?.querySelector(".menu-item"))?.focus();
+	}
+	handleActivate() {
+		this.disabled || this.dispatchEvent(new CustomEvent("bp-menu-select", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		this.handleActivate();
+	}
+	handleKeyDown(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleActivate());
+	}
+	render() {
+		return r`
+      <div
+        class="menu-item menu-item--${this.size} ${this.disabled ? "menu-item--disabled" : ""} ${this.selected ? "menu-item--selected" : ""}"
+        part="base"
+        role="menuitem"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-disabled=${this.disabled}
+        aria-current=${this.selected ? "page" : "false"}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <span class="menu-item__prefix" part="prefix">
+          <slot name="prefix"></slot>
+        </span>
+        <span class="menu-item__label" part="label">
+          <slot></slot>
+        </span>
+        <span class="menu-item__suffix" part="suffix">
+          ${this.shortcut ? r`<span class="menu-item__shortcut">${this.shortcut}</span>` : i}
+          <slot name="suffix"></slot>
+          ${this.hasSubmenu ? r`<span class="menu-item__arrow">›</span>` : i}
+        </span>
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], u.prototype, "value", void 0), e([o({ type: Boolean })], u.prototype, "disabled", void 0), e([o({ type: Boolean })], u.prototype, "selected", void 0), e([o({
+	type: Boolean,
+	attribute: "has-submenu"
+})], u.prototype, "hasSubmenu", void 0), e([o({ type: String })], u.prototype, "size", void 0), e([o({ type: String })], u.prototype, "shortcut", void 0), u = e([a("bp-menu-item")], u);
+var d = class extends t {
+	static {
+		this.styles = [c];
+	}
+	render() {
+		return r`<div
+      class="menu-divider"
+      part="divider"
+      role="separator"
+    ></div>`;
+	}
+};
+d = e([a("bp-menu-divider")], d);
+//#endregion
+export { d as n, u as r, l as t };
+
+//# sourceMappingURL=menu-Cr_E847O.js.map

package/dist/shared/menu-Cr_E847O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-Cr_E847O.js","names":["_decorate","__decorate","menuStyles","BpMenu","LitElement","target","event","items","slot","el","item","property","state","customElement","BpMenuItem","nothing","BpMenuDivider"],"sources":["../../source/components/menu/menu.style.ts","../../source/components/menu/menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n  /* Base styles - Menu Container */\n  :host {\n    display: block;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    min-width: 200px;\n    padding: var(--bp-spacing-xs) 0;\n    margin: 0;\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    box-shadow: var(--bp-shadow-lg);\n    font-family: var(--bp-font-family);\n    list-style: none;\n    outline: none;\n  }\n\n  /* Menu Sizes */\n  .menu--sm {\n    min-width: 160px;\n  }\n\n  .menu--lg {\n    min-width: 280px;\n  }\n\n  /* Menu Item Base */\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    margin: 0 var(--bp-spacing-xs);\n    min-height: 40px;\n    border-radius: var(--bp-border-radius-sm);\n    background-color: transparent;\n    color: var(--bp-color-text);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-normal);\n    line-height: var(--bp-line-height-normal);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      transform var(--bp-transition-fast);\n    user-select: none;\n    outline: none;\n  }\n\n  /* Menu Item Sizes */\n  .menu-item--sm {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    min-height: 36px;\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .menu-item--lg {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    min-height: 48px;\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* Menu Item States */\n  .menu-item:hover:not(.menu-item--disabled) {\n    background-color: var(--bp-color-surface);\n  }\n\n  .menu-item:focus-visible:not(.menu-item--disabled) {\n    background-color: var(--bp-color-surface);\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-primary);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .menu-item:active:not(.menu-item--disabled) {\n    background-color: var(--bp-color-surface);\n    transform: scale(0.98);\n  }\n\n  .menu-item--selected {\n    background-color: var(--bp-color-surface);\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .menu-item--selected::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 3px;\n    background-color: var(--bp-color-primary);\n    border-radius: 0 var(--bp-border-radius-sm) var(--bp-border-radius-sm) 0;\n  }\n\n  .menu-item--disabled {\n    color: var(--bp-color-text-muted);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Menu Item Parts */\n  .menu-item__prefix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .menu-item__prefix:empty {\n    display: none;\n  }\n\n  .menu-item__label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .menu-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    flex-shrink: 0;\n    margin-left: auto;\n  }\n\n  .menu-item__suffix:empty {\n    display: none;\n  }\n\n  .menu-item__shortcut {\n    color: var(--bp-color-text-muted);\n    font-size: var(--bp-font-size-sm);\n    font-family: var(--bp-font-family-mono);\n    padding: 2px var(--bp-spacing-xs);\n    background-color: var(--bp-color-surface);\n    border-radius: var(--bp-border-radius-sm);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .menu-item__arrow {\n    color: var(--bp-color-text-muted);\n    font-size: var(--bp-font-size-lg);\n    line-height: 1;\n  }\n\n  /* Menu Divider */\n  .menu-divider {\n    height: var(--bp-border-width);\n    margin: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    background-color: var(--bp-color-border);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { menuStyles } from './menu.style.js';\n\nexport type MenuSize = 'sm' | 'md' | 'lg';\n\n/**\n * A menu container component for displaying a list of actions or options.\n *\n * @fires bp-menu-select - Dispatched when a menu item is selected\n *\n * @slot - Menu items (bp-menu-item, bp-menu-divider)\n *\n * @csspart container - The menu container element\n */\n@customElement('bp-menu')\nexport class BpMenu extends LitElement {\n  /** Size variant for all menu items */\n  @property({ type: String }) declare size: MenuSize;\n\n  /** Current focused item index for keyboard navigation */\n  @state() private focusedIndex = -1;\n\n  static styles = [menuStyles];\n\n  constructor() {\n    super();\n    this.size = 'md';\n  }\n\n  private handleFocusIn = (event: FocusEvent) => {\n    const target = event.target as BpMenuItem;\n    const items = this.menuItems;\n    this.focusedIndex = items.indexOf(target);\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('focusin', this.handleFocusIn);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('focusin', this.handleFocusIn);\n  }\n\n  /**\n   * Gets all non-divider menu items from the default slot.\n   * @returns Array of bp-menu-item elements\n   */\n  private get menuItems(): BpMenuItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return [];\n    return slot\n      .assignedElements()\n      .filter((el): el is BpMenuItem => el.tagName === 'BP-MENU-ITEM');\n  }\n\n  /**\n   * Handles keyboard navigation within the menu.\n   * Supports ArrowDown, ArrowUp, Home, and End keys.\n   */\n  private handleKeyDown(event: KeyboardEvent) {\n    const items = this.menuItems.filter((item) => !item.disabled);\n    if (items.length === 0) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusedIndex = Math.min(this.focusedIndex + 1, items.length - 1);\n        items[this.focusedIndex]?.focus();\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\n        items[this.focusedIndex]?.focus();\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusedIndex = 0;\n        items[0]?.focus();\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusedIndex = items.length - 1;\n        items[items.length - 1]?.focus();\n        break;\n    }\n  }\n\n  private handleSlotChange() {\n    // Update size on all menu items\n    this.menuItems.forEach((item) => {\n      item.size = this.size;\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"menu menu--${this.size}\"\n        part=\"container\"\n        role=\"menu\"\n        @keydown=${this.handleKeyDown}\n      >\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * A menu item component for use within bp-menu.\n *\n * @fires bp-select - Dispatched when the item is selected\n *\n * @slot - Item label content\n * @slot prefix - Content before the label (typically an icon)\n * @slot suffix - Content after the label (typically a shortcut or arrow)\n *\n * @csspart base - The menu item container\n * @csspart prefix - The prefix slot container\n * @csspart label - The label container\n * @csspart suffix - The suffix slot container\n */\n@customElement('bp-menu-item')\nexport class BpMenuItem extends LitElement {\n  /** The value associated with this menu item */\n  @property({ type: String }) declare value: string;\n\n  /** Whether the item is disabled */\n  @property({ type: Boolean }) declare disabled: boolean;\n\n  /** Whether the item is selected/active */\n  @property({ type: Boolean }) declare selected: boolean;\n\n  /** Whether the item has a submenu */\n  @property({ type: Boolean, attribute: 'has-submenu' })\n  declare hasSubmenu: boolean;\n\n  /** Size variant (inherited from parent menu) */\n  @property({ type: String }) declare size: MenuSize;\n\n  /** Keyboard shortcut hint to display */\n  @property({ type: String }) declare shortcut: string;\n\n  static styles = [menuStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.disabled = false;\n    this.selected = false;\n    this.hasSubmenu = false;\n    this.size = 'md';\n    this.shortcut = '';\n  }\n\n  focus() {\n    const button = this.shadowRoot?.querySelector('.menu-item') as HTMLElement;\n    button?.focus();\n  }\n\n  private handleActivate() {\n    if (this.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-menu-select', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.handleActivate();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleActivate();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"menu-item menu-item--${this.size} ${\n          this.disabled ? 'menu-item--disabled' : ''\n        } ${this.selected ? 'menu-item--selected' : ''}\"\n        part=\"base\"\n        role=\"menuitem\"\n        tabindex=${this.disabled ? -1 : 0}\n        aria-disabled=${this.disabled}\n        aria-current=${this.selected ? 'page' : 'false'}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <span class=\"menu-item__prefix\" part=\"prefix\">\n          <slot name=\"prefix\"></slot>\n        </span>\n        <span class=\"menu-item__label\" part=\"label\">\n          <slot></slot>\n        </span>\n        <span class=\"menu-item__suffix\" part=\"suffix\">\n          ${\n            this.shortcut\n              ? html`<span class=\"menu-item__shortcut\">${this.shortcut}</span>`\n              : nothing\n          }\n          <slot name=\"suffix\"></slot>\n          ${\n            this.hasSubmenu\n              ? html`<span class=\"menu-item__arrow\">›</span>`\n              : nothing\n          }\n        </span>\n      </div>\n    `;\n  }\n}\n\n/**\n * A divider for visually separating menu items.\n *\n * @csspart divider - The divider element\n */\n@customElement('bp-menu-divider')\nexport class BpMenuDivider extends LitElement {\n  static styles = [menuStyles];\n\n  render() {\n    return html`<div\n      class=\"menu-divider\"\n      part=\"divider\"\n      role=\"separator\"\n    ></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-menu': BpMenu;\n    'bp-menu-item': BpMenuItem;\n    'bp-menu-divider': BpMenuDivider;\n  }\n}\n"],"mappings":"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"}