@sken-ds/primitives 0.4.6 → 0.6.0

package/dist/sken-nav-group.js

@@ -0,0 +1,306 @@
+import { t as e } from "./decorate-C1e2sg49.js";
+import { n as t, t as n } from "./catalog-y40FMic1-DY2BFupW.js";
+import { LitElement as r, css as i, html as a, nothing as o } from "lit";
+import { customElement as s, property as c, query as l } from "lit/decorators.js";
+//#region src/components/sken-nav-group.ts
+var u = class extends r {
+	constructor(...e) {
+		super(...e), this.iconName = "", this.label = "", this.defaultExpanded = !1, this.expanded = !1, this.expandedNav = !0, this.#r = () => {
+			this.#e();
+		}, this.#i = (e) => {
+			let t = e.relatedTarget;
+			t && this.contains(t) || this.#t();
+		}, this.#a = () => {
+			this.#e();
+		}, this.#o = (e) => {
+			let t = e.relatedTarget;
+			t && this.contains(t) || this.#t();
+		}, this.#s = (e) => {
+			if (this.expandedNav) return;
+			let t = e.target, n = this.shadowRoot?.querySelector("summary");
+			n && (t === n || n.contains(t)) && (e.preventDefault(), this.#c());
+		}, this.#u = "<svg viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/></svg>", this.#d = () => {
+			if (!this.detailsEl) return;
+			let e = this.detailsEl.open;
+			this.expanded = e, this.dispatchEvent(new CustomEvent("sken-nav-group-native-toggle", {
+				detail: {
+					group: this,
+					expanded: e
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: block;
+    }
+
+    details {
+      display: block;
+    }
+
+    summary {
+      display: flex;
+      align-items: center;
+      gap: var(--sken-2, 0.5rem);
+      padding-block: var(--sken-2, 0.25rem);
+      padding-inline: var(--sken-3, 0.75rem);
+      border-radius: var(--sken-radius-md, 0.5rem);
+      list-style: none;
+      cursor: pointer;
+      user-select: none;
+      transition:
+        background-color 120ms ease,
+        color 120ms ease;
+    }
+    summary::-webkit-details-marker {
+      display: none;
+    }
+    summary::marker {
+      content: '';
+    }
+    summary:hover {
+      background: var(--sken-muted, #f6f7f9);
+    }
+    summary:focus-visible {
+      outline: 2px solid var(--sken-primary, #2e6fc6);
+      outline-offset: -2px;
+    }
+
+    details[open] > summary {
+      color: var(--sken-primary, #2e6fc6);
+      font-weight: var(--sken-weight-semibold, 600);
+    }
+
+    :host([data-child-current]) summary {
+      background: var(--sken-muted, #f6f7f9);
+      color: var(--sken-primary, #2e6fc6);
+      font-weight: var(--sken-weight-semibold, 600);
+    }
+
+    .icon {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--sken-5, 1.25rem);
+      block-size: var(--sken-5, 1.25rem);
+      color: inherit;
+    }
+    .icon svg {
+      inline-size: 100%;
+      block-size: 100%;
+      display: block;
+      fill: currentColor;
+    }
+
+    .label {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .chevron {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--sken-4, 1rem);
+      block-size: var(--sken-4, 1rem);
+      color: inherit;
+      transition: transform 120ms ease;
+    }
+    .chevron svg {
+      inline-size: 100%;
+      block-size: 100%;
+      display: block;
+      fill: currentColor;
+    }
+    details[open] > summary > .chevron {
+      transform: rotate(180deg);
+    }
+
+    .children {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      padding-block-start: var(--sken-2, 0.5rem);
+      display: flex;
+      flex-direction: column;
+      gap: var(--sken-1, 0.25rem);
+    }
+
+    :host([expanded-nav]) .children {
+      border-inline-start: 1px solid var(--sken-nav-rail-color, var(--sken-primary-hover, #3785d9));
+      padding-inline-start: var(--sken-3, 1rem);
+      margin-inline-start: var(--sken-5, 1.25rem);
+      gap: var(--sken-1, 0.25rem);
+    }
+
+    :host([expanded-nav]) .children {
+      --sken-nav-child-padding-inline-start: var(--sken-2, 0.5rem);
+      --sken-nav-child-padding-inline-end: var(--sken-3, 0.75rem);
+    }
+
+    :host(:not([expanded-nav])) .label,
+    :host(:not([expanded-nav])) .chevron {
+      display: none;
+    }
+    :host(:not([expanded-nav])) summary {
+      justify-content: center;
+      padding-inline: var(--sken-2, 0.5rem);
+      gap: 0;
+      inline-size: auto;
+    }
+    :host(:not([expanded-nav])) {
+      display: inline-block;
+      inline-size: max-content;
+      position: relative;
+    }
+
+    :host(:not([expanded-nav])) details {
+      position: relative;
+    }
+    :host(:not([expanded-nav])) .children {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 100%;
+      min-inline-size: 12rem;
+      padding: 0;
+      background: var(--sken-card, #ffffff);
+      border: 1px solid var(--sken-border, #dfdfe3);
+      border-radius: var(--sken-radius-md, 0.5rem);
+      box-shadow:
+        0 4px 12px rgb(0 0 0 / 0.08),
+        0 1px 2px rgb(0 0 0 / 0.04);
+      z-index: 10;
+      list-style: none;
+      margin: 0;
+    }
+    :host(:not([expanded-nav])) .flyout-header {
+      padding: var(--sken-3, 0.75rem) var(--sken-4, 1rem);
+      font-weight: var(--sken-weight-semibold, 600);
+      color: var(--sken-foreground, #152b48);
+      border-bottom: 1px solid var(--sken-border, #dfdfe3);
+      white-space: nowrap;
+    }
+    :host(:not([expanded-nav])) .flyout-items {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sken-1, 0.25rem);
+      padding: var(--sken-2, 0.5rem);
+    }
+    :host(:not([expanded-nav])) .children {
+      visibility: hidden;
+      opacity: 0;
+      transform: translateX(-4px);
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease,
+        visibility 0s linear 120ms;
+      pointer-events: none;
+    }
+    :host(:not([expanded-nav])[data-flyout-open]) .children {
+      visibility: visible;
+      opacity: 1;
+      transform: translateX(0);
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease,
+        visibility 0s linear 0s;
+      pointer-events: auto;
+    }
+  `;
+	}
+	toggle(e) {
+		this.detailsEl && (this.detailsEl.open = e ?? !this.detailsEl.open);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("expanded") || (this.expanded = this.defaultExpanded), this.addEventListener("pointerenter", this.#r), this.addEventListener("pointerleave", this.#i), this.addEventListener("focusin", this.#a), this.addEventListener("focusout", this.#o), this.addEventListener("click", this.#s);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("pointerenter", this.#r), this.removeEventListener("pointerleave", this.#i), this.removeEventListener("focusin", this.#a), this.removeEventListener("focusout", this.#o), this.removeEventListener("click", this.#s);
+	}
+	#e() {
+		if (!this.expandedNav) {
+			this.setAttribute("data-flyout-open", "");
+			for (let e of this.#n()) e.inFlyout = !0;
+			this.detailsEl && !this.detailsEl.open && (this.detailsEl.open = !0);
+		}
+	}
+	#t() {
+		this.removeAttribute("data-flyout-open");
+		for (let e of this.#n()) e.inFlyout = !1;
+	}
+	#n() {
+		return Array.from(this.querySelectorAll("sken-nav-item"));
+	}
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c() {
+		this.expandedNav || (this.hasAttribute("data-flyout-open") ? this.#t() : this.#e());
+	}
+	updated(e) {
+		e.has("expanded") && this.detailsEl && (this.detailsEl.open = this.expanded), this.#l();
+	}
+	#l() {
+		this.#n().some((e) => e.current === !0) ? this.setAttribute("data-child-current", "") : this.removeAttribute("data-child-current");
+	}
+	render() {
+		let e = this.expanded, t = this.#f();
+		return a`
+      <details part="group-details" ?open=${e} @toggle=${this.#d}>
+        <summary part="group-summary">
+          ${t}
+          <span class="label">${this.label}</span>
+          <span class="chevron" aria-hidden="true" .innerHTML=${this.#u}></span>
+        </summary>
+        ${this.expandedNav ? a`
+                <ul class="children" part="group-list" role="list">
+                  <slot></slot>
+                </ul>
+              ` : a`
+                <div class="children" part="group-list">
+                  <div class="flyout-header" part="flyout-header" role="presentation">
+                    ${this.label}
+                  </div>
+                  <ul class="flyout-items" part="flyout-items" role="list">
+                    <slot></slot>
+                  </ul>
+                </div>
+              `}
+      </details>
+    `;
+	}
+	#u;
+	#d;
+	#f() {
+		if (!this.iconName) return o;
+		if (!n(this.iconName)) return globalThis.console?.warn(`[sken-nav-group] icon "${this.iconName}" not in Sken catalog`), a`<span class="icon" aria-hidden="true"></span>`;
+		let e = t(this.iconName, "regular");
+		return a`<span class="icon" aria-hidden="true" .innerHTML=${e}></span>`;
+	}
+};
+e([c({ attribute: "icon-name" })], u.prototype, "iconName", void 0), e([c()], u.prototype, "label", void 0), e([c({
+	type: Boolean,
+	attribute: "default-expanded"
+})], u.prototype, "defaultExpanded", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "expanded", void 0), e([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "expanded-nav"
+})], u.prototype, "expandedNav", void 0), e([l("details")], u.prototype, "detailsEl", void 0), u = e([s("sken-nav-group")], u);
+//#endregion
+export { u as SkenNavGroup };
+
+//# sourceMappingURL=sken-nav-group.js.map

package/dist/sken-nav-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sken-nav-group.js","names":[],"sources":["../src/components/sken-nav-group.ts"],"sourcesContent":["import { getSkenIconSvg, isSkenIconName, type SkenIconName } from '@sken-ds/icons/catalog'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport type { SkenNavItem } from './sken-nav-item.js'\n\n@customElement('sken-nav-group')\nexport class SkenNavGroup extends LitElement {\n  @property({ attribute: 'icon-name' })\n  iconName: SkenIconName | '' = ''\n\n  @property() label = ''\n\n  @property({ type: Boolean, attribute: 'default-expanded' })\n  defaultExpanded = false\n\n  @property({ type: Boolean, reflect: true })\n  expanded = false\n\n  @property({ type: Boolean, reflect: true, attribute: 'expanded-nav' })\n  expandedNav = true\n\n  @query('details') private detailsEl?: HTMLDetailsElement\n\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    details {\n      display: block;\n    }\n\n    summary {\n      display: flex;\n      align-items: center;\n      gap: var(--sken-2, 0.5rem);\n      padding-block: var(--sken-2, 0.25rem);\n      padding-inline: var(--sken-3, 0.75rem);\n      border-radius: var(--sken-radius-md, 0.5rem);\n      list-style: none;\n      cursor: pointer;\n      user-select: none;\n      transition:\n        background-color 120ms ease,\n        color 120ms ease;\n    }\n    summary::-webkit-details-marker {\n      display: none;\n    }\n    summary::marker {\n      content: '';\n    }\n    summary:hover {\n      background: var(--sken-muted, #f6f7f9);\n    }\n    summary:focus-visible {\n      outline: 2px solid var(--sken-primary, #2e6fc6);\n      outline-offset: -2px;\n    }\n\n    details[open] > summary {\n      color: var(--sken-primary, #2e6fc6);\n      font-weight: var(--sken-weight-semibold, 600);\n    }\n\n    :host([data-child-current]) summary {\n      background: var(--sken-muted, #f6f7f9);\n      color: var(--sken-primary, #2e6fc6);\n      font-weight: var(--sken-weight-semibold, 600);\n    }\n\n    .icon {\n      display: inline-flex;\n      flex: 0 0 auto;\n      align-items: center;\n      justify-content: center;\n      inline-size: var(--sken-5, 1.25rem);\n      block-size: var(--sken-5, 1.25rem);\n      color: inherit;\n    }\n    .icon svg {\n      inline-size: 100%;\n      block-size: 100%;\n      display: block;\n      fill: currentColor;\n    }\n\n    .label {\n      flex: 1 1 auto;\n      min-inline-size: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .chevron {\n      display: inline-flex;\n      flex: 0 0 auto;\n      align-items: center;\n      justify-content: center;\n      inline-size: var(--sken-4, 1rem);\n      block-size: var(--sken-4, 1rem);\n      color: inherit;\n      transition: transform 120ms ease;\n    }\n    .chevron svg {\n      inline-size: 100%;\n      block-size: 100%;\n      display: block;\n      fill: currentColor;\n    }\n    details[open] > summary > .chevron {\n      transform: rotate(180deg);\n    }\n\n    .children {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      padding-block-start: var(--sken-2, 0.5rem);\n      display: flex;\n      flex-direction: column;\n      gap: var(--sken-1, 0.25rem);\n    }\n\n    :host([expanded-nav]) .children {\n      border-inline-start: 1px solid var(--sken-nav-rail-color, var(--sken-primary-hover, #3785d9));\n      padding-inline-start: var(--sken-3, 1rem);\n      margin-inline-start: var(--sken-5, 1.25rem);\n      gap: var(--sken-1, 0.25rem);\n    }\n\n    :host([expanded-nav]) .children {\n      --sken-nav-child-padding-inline-start: var(--sken-2, 0.5rem);\n      --sken-nav-child-padding-inline-end: var(--sken-3, 0.75rem);\n    }\n\n    :host(:not([expanded-nav])) .label,\n    :host(:not([expanded-nav])) .chevron {\n      display: none;\n    }\n    :host(:not([expanded-nav])) summary {\n      justify-content: center;\n      padding-inline: var(--sken-2, 0.5rem);\n      gap: 0;\n      inline-size: auto;\n    }\n    :host(:not([expanded-nav])) {\n      display: inline-block;\n      inline-size: max-content;\n      position: relative;\n    }\n\n    :host(:not([expanded-nav])) details {\n      position: relative;\n    }\n    :host(:not([expanded-nav])) .children {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 100%;\n      min-inline-size: 12rem;\n      padding: 0;\n      background: var(--sken-card, #ffffff);\n      border: 1px solid var(--sken-border, #dfdfe3);\n      border-radius: var(--sken-radius-md, 0.5rem);\n      box-shadow:\n        0 4px 12px rgb(0 0 0 / 0.08),\n        0 1px 2px rgb(0 0 0 / 0.04);\n      z-index: 10;\n      list-style: none;\n      margin: 0;\n    }\n    :host(:not([expanded-nav])) .flyout-header {\n      padding: var(--sken-3, 0.75rem) var(--sken-4, 1rem);\n      font-weight: var(--sken-weight-semibold, 600);\n      color: var(--sken-foreground, #152b48);\n      border-bottom: 1px solid var(--sken-border, #dfdfe3);\n      white-space: nowrap;\n    }\n    :host(:not([expanded-nav])) .flyout-items {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sken-1, 0.25rem);\n      padding: var(--sken-2, 0.5rem);\n    }\n    :host(:not([expanded-nav])) .children {\n      visibility: hidden;\n      opacity: 0;\n      transform: translateX(-4px);\n      transition:\n        opacity 120ms ease,\n        transform 120ms ease,\n        visibility 0s linear 120ms;\n      pointer-events: none;\n    }\n    :host(:not([expanded-nav])[data-flyout-open]) .children {\n      visibility: visible;\n      opacity: 1;\n      transform: translateX(0);\n      transition:\n        opacity 120ms ease,\n        transform 120ms ease,\n        visibility 0s linear 0s;\n      pointer-events: auto;\n    }\n  `\n\n  toggle(force?: boolean): void {\n    if (!this.detailsEl) return\n    this.detailsEl.open = force ?? !this.detailsEl.open\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('expanded')) {\n      this.expanded = this.defaultExpanded\n    }\n    this.addEventListener('pointerenter', this.#onPointerEnter)\n    this.addEventListener('pointerleave', this.#onPointerLeave)\n    this.addEventListener('focusin', this.#onFocusIn)\n    this.addEventListener('focusout', this.#onFocusOut)\n    this.addEventListener('click', this.#onHostClick)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('pointerenter', this.#onPointerEnter)\n    this.removeEventListener('pointerleave', this.#onPointerLeave)\n    this.removeEventListener('focusin', this.#onFocusIn)\n    this.removeEventListener('focusout', this.#onFocusOut)\n    this.removeEventListener('click', this.#onHostClick)\n  }\n\n  #openFlyout(): void {\n    if (this.expandedNav) return\n    this.setAttribute('data-flyout-open', '')\n    for (const item of this.#slottedItems()) {\n      item.inFlyout = true\n    }\n    if (this.detailsEl && !this.detailsEl.open) {\n      this.detailsEl.open = true\n    }\n  }\n\n  #closeFlyout(): void {\n    this.removeAttribute('data-flyout-open')\n    for (const item of this.#slottedItems()) {\n      item.inFlyout = false\n    }\n  }\n\n  #slottedItems(): SkenNavItem[] {\n    return Array.from(this.querySelectorAll<SkenNavItem>('sken-nav-item'))\n  }\n\n  #onPointerEnter = (): void => {\n    this.#openFlyout()\n  }\n  #onPointerLeave = (event: PointerEvent): void => {\n    const next = event.relatedTarget as Node | null\n    if (next && this.contains(next)) return\n    this.#closeFlyout()\n  }\n  #onFocusIn = (): void => {\n    this.#openFlyout()\n  }\n  #onFocusOut = (event: FocusEvent): void => {\n    const next = event.relatedTarget as Node | null\n    if (next && this.contains(next)) return\n    this.#closeFlyout()\n  }\n\n  #onHostClick = (event: MouseEvent): void => {\n    if (this.expandedNav) return\n    const target = event.target as HTMLElement\n    const summary = this.shadowRoot?.querySelector('summary')\n    if (summary && (target === summary || summary.contains(target))) {\n      event.preventDefault()\n      this.#toggleFlyout()\n    }\n  }\n\n  #toggleFlyout(): void {\n    if (this.expandedNav) return\n    const isOpen = this.hasAttribute('data-flyout-open')\n    if (isOpen) {\n      this.#closeFlyout()\n    } else {\n      this.#openFlyout()\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>): void {\n    if (changed.has('expanded') && this.detailsEl) {\n      this.detailsEl.open = this.expanded\n    }\n    this.#syncChildCurrent()\n  }\n\n  #syncChildCurrent(): void {\n    const hasCurrent = this.#slottedItems().some((item) => item.current === true)\n    if (hasCurrent) {\n      this.setAttribute('data-child-current', '')\n    } else {\n      this.removeAttribute('data-child-current')\n    }\n  }\n\n  protected override render() {\n    const isExpanded = this.expanded\n    const iconMarkup = this.#renderIcon()\n    return html`\n      <details part=\"group-details\" ?open=${isExpanded} @toggle=${this.#onToggle}>\n        <summary part=\"group-summary\">\n          ${iconMarkup}\n          <span class=\"label\">${this.label}</span>\n          <span class=\"chevron\" aria-hidden=\"true\" .innerHTML=${this.#chevronSvg}></span>\n        </summary>\n        ${\n          this.expandedNav\n            ? html`\n                <ul class=\"children\" part=\"group-list\" role=\"list\">\n                  <slot></slot>\n                </ul>\n              `\n            : html`\n                <div class=\"children\" part=\"group-list\">\n                  <div class=\"flyout-header\" part=\"flyout-header\" role=\"presentation\">\n                    ${this.label}\n                  </div>\n                  <ul class=\"flyout-items\" part=\"flyout-items\" role=\"list\">\n                    <slot></slot>\n                  </ul>\n                </div>\n              `\n        }\n      </details>\n    `\n  }\n\n  #chevronSvg = `<svg viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/></svg>`\n\n  #onToggle = (): void => {\n    if (!this.detailsEl) return\n    const next = this.detailsEl.open\n    this.expanded = next\n    this.dispatchEvent(\n      new CustomEvent('sken-nav-group-native-toggle', {\n        detail: { group: this, expanded: next },\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #renderIcon() {\n    if (!this.iconName) return nothing\n    if (!isSkenIconName(this.iconName)) {\n      globalThis.console?.warn(`[sken-nav-group] icon \"${this.iconName}\" not in Sken catalog`)\n      return html`<span class=\"icon\" aria-hidden=\"true\"></span>`\n    }\n    const raw = getSkenIconSvg(this.iconName, 'regular')\n    return html`<span class=\"icon\" aria-hidden=\"true\" .innerHTML=${raw}></span>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-nav-group': SkenNavGroup\n  }\n}\n"],"mappings":"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"}

package/dist/sken-nav-item.js

@@ -0,0 +1,224 @@
+import { t as e } from "./decorate-C1e2sg49.js";
+import { n as t, t as n } from "./catalog-y40FMic1-DY2BFupW.js";
+import { LitElement as r, css as i, html as a, nothing as o } from "lit";
+import { customElement as s, property as c, query as l } from "lit/decorators.js";
+//#region src/components/sken-nav-item.ts
+function u() {
+	return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+}
+var d = class extends r {
+	constructor(...e) {
+		super(...e), this.iconName = "", this.href = "", this.label = "", this.current = !1, this.currentStyle = "solid", this.disabled = !1, this.tooltip = "", this.expanded = !0, this.inFlyout = !1, this._hostId = `sken-nav-item-${u()}`, this.tabIndex = 0, this.#t = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 0 && this.href && (e.preventDefault(), this.dispatchEvent(new CustomEvent("sken-nav-item-navigate", {
+				detail: {
+					href: this.href,
+					item: this
+				},
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this.#n = (e) => {
+			this.disabled || (e.key === "Enter" || e.key === " ") && this.href && (e.preventDefault(), this.dispatchEvent(new CustomEvent("sken-nav-item-navigate", {
+				detail: {
+					href: this.href,
+					item: this
+				},
+				bubbles: !0,
+				composed: !0
+			})));
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.id ||= this._hostId, this.hasAttribute("current-style") || (this.currentStyle = this.#e()), this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n);
+	}
+	#e() {
+		let e = this.parentElement;
+		for (; e;) {
+			if (e.tagName.toLowerCase() === "sken-nav-group") return "soft";
+			e = e.parentElement;
+		}
+		return "solid";
+	}
+	static {
+		this.styles = i`
+    :host {
+      cursor: pointer;
+      display: inline-block;
+    }
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    a,
+    button {
+      display: flex;
+      align-items: center;
+      gap: var(--sken-2, 0.5rem);
+      padding-block: var(--sken-nav-child-padding-block, var(--sken-2, 0.25rem));
+      padding-inline-start: var(--sken-nav-child-padding-inline-start, var(--sken-3, 0.75rem));
+      padding-inline-end: var(--sken-nav-child-padding-inline-end, var(--sken-3, 0.75rem));
+      border-radius: var(--sken-nav-child-radius, var(--sken-radius-md, 0.5rem));
+      background: transparent;
+      color: inherit;
+      text-decoration: none;
+      font: inherit;
+      font-size: var(--sken-nav-child-font-size, inherit);
+      user-select: none;
+      inline-size: 100%;
+      box-sizing: border-box;
+      pointer-events: none;
+      transition:
+        background-color 120ms ease,
+        color 120ms ease;
+    }
+
+    a:hover:not([aria-disabled='true']):not([aria-current='page']),
+    button:hover:not([aria-disabled='true']):not([aria-current='page']) {
+      background: var(--sken-muted, #f6f7f9);
+    }
+    a:focus-visible,
+    button:focus-visible {
+      outline: 2px solid var(--sken-primary, #2e6fc6);
+      outline-offset: -2px;
+    }
+
+    [aria-current='page'] {
+      background: var(--sken-primary, #2e6fc6);
+      color: var(--sken-primary-foreground, #fcfcfc);
+    }
+    [aria-current='page']:hover {
+      background: color-mix(
+        in srgb,
+        var(--sken-primary, #2e6fc6) 88%,
+        var(--sken-foreground, #152b48)
+      );
+    }
+    [aria-current='page']:focus-visible {
+      outline-color: var(--sken-primary-foreground, #fcfcfc);
+    }
+
+    :host([current-style='soft']) [aria-current='page'] {
+      background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 12%, var(--sken-card, #ffffff));
+      color: var(--sken-primary, #2e6fc6);
+    }
+    :host([current-style='soft']) [aria-current='page']:hover {
+      background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 18%, var(--sken-card, #ffffff));
+    }
+    :host([current-style='soft']) [aria-current='page']:focus-visible {
+      outline-color: var(--sken-primary, #2e6fc6);
+    }
+
+    [aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .icon {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--sken-5, 1.25rem);
+      block-size: var(--sken-5, 1.25rem);
+      color: inherit;
+    }
+    .icon svg {
+      inline-size: 100%;
+      block-size: 100%;
+      display: block;
+      fill: currentColor;
+    }
+
+    .label {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host(:not([expanded]):not([in-flyout])) {
+      inline-size: max-content;
+    }
+    :host(:not([expanded]):not([in-flyout])) a,
+    :host(:not([expanded]):not([in-flyout])) button {
+      inline-size: auto;
+      padding-inline: var(--sken-2, 0.5rem);
+      line-height: 1;
+      justify-content: center;
+    }
+  `;
+	}
+	focus(e) {
+		super.focus(e);
+	}
+	#t;
+	#n;
+	render() {
+		let e = this.tooltip || this.label, t = this.#r(), n = !this.expanded && !this.inFlyout ? o : this.label ? a`<span class="label">${this.label}</span>` : o, r = !this.expanded && !this.inFlyout && this.label ? this.label : o;
+		return this.href ? a`
+        <a
+          part="item-link"
+          href=${this.disabled ? o : this.href}
+          aria-label=${r}
+          aria-current=${this.current ? "page" : o}
+          aria-disabled=${this.disabled ? "true" : o}
+          data-tooltip=${e || o}
+        >
+          ${t} ${n}
+        </a>
+      ` : a`
+      <button
+        part="item-link"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-label=${r}
+        aria-current=${this.current ? "page" : o}
+        aria-disabled=${this.disabled ? "true" : o}
+        data-tooltip=${e || o}
+      >
+        ${t} ${n}
+      </button>
+    `;
+	}
+	updated() {}
+	#r() {
+		if (!this.iconName) return o;
+		if (!n(this.iconName)) return globalThis.console?.warn(`[sken-nav-item] icon "${this.iconName}" not in Sken catalog`), a`<span class="icon" aria-hidden="true"></span>`;
+		let e = t(this.iconName, "regular");
+		return a`<span class="icon" aria-hidden="true" .innerHTML=${e}></span>`;
+	}
+};
+e([c({ attribute: "icon-name" })], d.prototype, "iconName", void 0), e([c()], d.prototype, "href", void 0), e([c()], d.prototype, "label", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "current", void 0), e([c({
+	reflect: !0,
+	attribute: "current-style"
+})], d.prototype, "currentStyle", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([c()], d.prototype, "tooltip", void 0), e([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "expanded"
+})], d.prototype, "expanded", void 0), e([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "in-flyout"
+})], d.prototype, "inFlyout", void 0), e([l(":scope > sken-tooltip")], d.prototype, "_tooltipChild", void 0), e([c({
+	type: Number,
+	reflect: !0,
+	attribute: "tabindex"
+})], d.prototype, "tabIndex", void 0), d = e([s("sken-nav-item")], d);
+//#endregion
+export { d as SkenNavItem };
+
+//# sourceMappingURL=sken-nav-item.js.map

package/dist/sken-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sken-nav-item.js","names":[],"sources":["../src/components/sken-nav-item.ts"],"sourcesContent":["import { getSkenIconSvg, isSkenIconName, type SkenIconName } from '@sken-ds/icons/catalog'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nfunction generateUniqueId(): string {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID()\n  }\n  return Math.random().toString(36).slice(2)\n}\n\n@customElement('sken-nav-item')\nexport class SkenNavItem extends LitElement {\n  @property({ attribute: 'icon-name' })\n  iconName: SkenIconName | '' = ''\n\n  @property() href = ''\n\n  @property() label = ''\n\n  @property({ type: Boolean, reflect: true })\n  current = false\n\n  @property({ reflect: true, attribute: 'current-style' })\n  currentStyle: 'solid' | 'soft' = 'solid'\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property() tooltip = ''\n\n  @property({ type: Boolean, reflect: true, attribute: 'expanded' })\n  expanded = true\n\n  @property({ type: Boolean, reflect: true, attribute: 'in-flyout' })\n  inFlyout = false\n\n  @query(':scope > sken-tooltip') private _tooltipChild?: HTMLElement | null\n\n  private readonly _hostId = `sken-nav-item-${generateUniqueId()}`\n\n  @property({ type: Number, reflect: true, attribute: 'tabindex' })\n  override tabIndex = 0\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.id) this.id = this._hostId\n    if (!this.hasAttribute('current-style')) {\n      this.currentStyle = this.#detectCurrentStyle()\n    }\n    this.addEventListener('click', this.#onHostClick)\n    this.addEventListener('keydown', this.#onHostKeydown)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('click', this.#onHostClick)\n    this.removeEventListener('keydown', this.#onHostKeydown)\n  }\n\n  #detectCurrentStyle(): 'solid' | 'soft' {\n    let parent = this.parentElement\n    while (parent) {\n      if (parent.tagName.toLowerCase() === 'sken-nav-group') {\n        return 'soft'\n      }\n      parent = parent.parentElement\n    }\n    return 'solid'\n  }\n\n  static override styles = css`\n    :host {\n      cursor: pointer;\n      display: inline-block;\n    }\n    :host([disabled]) {\n      cursor: not-allowed;\n    }\n\n    a,\n    button {\n      display: flex;\n      align-items: center;\n      gap: var(--sken-2, 0.5rem);\n      padding-block: var(--sken-nav-child-padding-block, var(--sken-2, 0.25rem));\n      padding-inline-start: var(--sken-nav-child-padding-inline-start, var(--sken-3, 0.75rem));\n      padding-inline-end: var(--sken-nav-child-padding-inline-end, var(--sken-3, 0.75rem));\n      border-radius: var(--sken-nav-child-radius, var(--sken-radius-md, 0.5rem));\n      background: transparent;\n      color: inherit;\n      text-decoration: none;\n      font: inherit;\n      font-size: var(--sken-nav-child-font-size, inherit);\n      user-select: none;\n      inline-size: 100%;\n      box-sizing: border-box;\n      pointer-events: none;\n      transition:\n        background-color 120ms ease,\n        color 120ms ease;\n    }\n\n    a:hover:not([aria-disabled='true']):not([aria-current='page']),\n    button:hover:not([aria-disabled='true']):not([aria-current='page']) {\n      background: var(--sken-muted, #f6f7f9);\n    }\n    a:focus-visible,\n    button:focus-visible {\n      outline: 2px solid var(--sken-primary, #2e6fc6);\n      outline-offset: -2px;\n    }\n\n    [aria-current='page'] {\n      background: var(--sken-primary, #2e6fc6);\n      color: var(--sken-primary-foreground, #fcfcfc);\n    }\n    [aria-current='page']:hover {\n      background: color-mix(\n        in srgb,\n        var(--sken-primary, #2e6fc6) 88%,\n        var(--sken-foreground, #152b48)\n      );\n    }\n    [aria-current='page']:focus-visible {\n      outline-color: var(--sken-primary-foreground, #fcfcfc);\n    }\n\n    :host([current-style='soft']) [aria-current='page'] {\n      background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 12%, var(--sken-card, #ffffff));\n      color: var(--sken-primary, #2e6fc6);\n    }\n    :host([current-style='soft']) [aria-current='page']:hover {\n      background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 18%, var(--sken-card, #ffffff));\n    }\n    :host([current-style='soft']) [aria-current='page']:focus-visible {\n      outline-color: var(--sken-primary, #2e6fc6);\n    }\n\n    [aria-disabled='true'] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    .icon {\n      display: inline-flex;\n      flex: 0 0 auto;\n      align-items: center;\n      justify-content: center;\n      inline-size: var(--sken-5, 1.25rem);\n      block-size: var(--sken-5, 1.25rem);\n      color: inherit;\n    }\n    .icon svg {\n      inline-size: 100%;\n      block-size: 100%;\n      display: block;\n      fill: currentColor;\n    }\n\n    .label {\n      flex: 1 1 auto;\n      min-inline-size: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    :host(:not([expanded]):not([in-flyout])) {\n      inline-size: max-content;\n    }\n    :host(:not([expanded]):not([in-flyout])) a,\n    :host(:not([expanded]):not([in-flyout])) button {\n      inline-size: auto;\n      padding-inline: var(--sken-2, 0.5rem);\n      line-height: 1;\n      justify-content: center;\n    }\n  `\n\n  override focus(options?: FocusOptions): void {\n    super.focus(options)\n  }\n\n  #onHostClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return\n    if (event.button !== 0) return\n    if (!this.href) return\n    event.preventDefault()\n    this.dispatchEvent(\n      new CustomEvent('sken-nav-item-navigate', {\n        detail: { href: this.href, item: this },\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #onHostKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    if (!this.href) return\n    event.preventDefault()\n    this.dispatchEvent(\n      new CustomEvent('sken-nav-item-navigate', {\n        detail: { href: this.href, item: this },\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  protected override render() {\n    const tooltipText = this.tooltip || this.label\n    const iconMarkup = this.#renderIcon()\n    const labelSlot =\n      !this.expanded && !this.inFlyout\n        ? nothing\n        : this.label\n          ? html`<span class=\"label\">${this.label}</span>`\n          : nothing\n    const collapsedAria = !this.expanded && !this.inFlyout && this.label ? this.label : nothing\n    if (this.href) {\n      return html`\n        <a\n          part=\"item-link\"\n          href=${this.disabled ? nothing : this.href}\n          aria-label=${collapsedAria}\n          aria-current=${this.current ? 'page' : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          data-tooltip=${tooltipText || nothing}\n        >\n          ${iconMarkup} ${labelSlot}\n        </a>\n      `\n    }\n    return html`\n      <button\n        part=\"item-link\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${collapsedAria}\n        aria-current=${this.current ? 'page' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        data-tooltip=${tooltipText || nothing}\n      >\n        ${iconMarkup} ${labelSlot}\n      </button>\n    `\n  }\n\n  protected override updated(): void {}\n\n  #renderIcon() {\n    if (!this.iconName) return nothing\n    if (!isSkenIconName(this.iconName)) {\n      globalThis.console?.warn(`[sken-nav-item] icon \"${this.iconName}\" not in Sken catalog`)\n      return html`<span class=\"icon\" aria-hidden=\"true\"></span>`\n    }\n    const raw = getSkenIconSvg(this.iconName, 'regular')\n    return html`<span class=\"icon\" aria-hidden=\"true\" .innerHTML=${raw}></span>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-nav-item': SkenNavItem\n  }\n}\n"],"mappings":"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"}