@jsekulowicz/ds-components 0.1.0

package/dist/atoms/menu/menu.js

@@ -0,0 +1,174 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { menuStyles } from './menu.styles.js';
+const TYPEAHEAD_TIMEOUT_MS = 500;
+/**
+ * @tag ds-menu
+ * @summary WAI-ARIA Menu container that owns keyboard navigation among `ds-menu-item` children.
+ * @slot header - Optional region rendered above the items. Not part of the menu's role tree.
+ * @slot default - `ds-menu-item` children.
+ * @slot footer - Optional region rendered below the items. Not part of the menu's role tree.
+ * @csspart menu - The internal `role="menu"` container that holds the items.
+ * @event ds-select - Fires when an item is activated. Detail: `{ value, originalEvent }`.
+ */
+export class DsMenu extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this._hasHeader = false;
+        this._hasFooter = false;
+        this.#typeaheadBuffer = '';
+        this.#typeaheadTimer = 0;
+        this.#onItemsSlotChange = () => {
+            const enabled = this.#enabledItems();
+            if (enabled.length === 0)
+                return;
+            const hasActive = enabled.some((item) => item.getAttribute('tabindex') === '0');
+            if (!hasActive)
+                this.#setRovingTabindex(enabled[0] ?? null);
+        };
+        this.#onHeaderSlotChange = (event) => {
+            this._hasHeader = event.target.assignedNodes({ flatten: true }).length > 0;
+        };
+        this.#onFooterSlotChange = (event) => {
+            this._hasFooter = event.target.assignedNodes({ flatten: true }).length > 0;
+        };
+        this.#onFocusIn = (event) => {
+            const target = event.target;
+            if (target.tagName.toLowerCase() !== 'ds-menu-item')
+                return;
+            if (target.disabled)
+                return;
+            this.#setRovingTabindex(target);
+        };
+        this.#onActivate = (event) => {
+            const detail = event.detail;
+            this.emit('ds-select', { detail });
+        };
+        this.#moveFocus = (direction) => {
+            const items = this.#enabledItems();
+            if (items.length === 0)
+                return;
+            const current = items.findIndex((item) => item.getAttribute('tabindex') === '0');
+            const start = current >= 0 ? current : 0;
+            const next = (start + direction + items.length) % items.length;
+            items[next]?.focus();
+        };
+        this.#onKeydown = (event) => {
+            const items = this.#enabledItems();
+            if (items.length === 0)
+                return;
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.#moveFocus(1);
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.#moveFocus(-1);
+                    return;
+                case 'Home':
+                    event.preventDefault();
+                    items[0]?.focus();
+                    return;
+                case 'End':
+                    event.preventDefault();
+                    items[items.length - 1]?.focus();
+                    return;
+                case 'Tab':
+                case 'Escape':
+                case 'Enter':
+                case ' ':
+                    return;
+            }
+            if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                this.#typeahead(event.key);
+            }
+        };
+        this.#typeahead = (char) => {
+            this.#typeaheadBuffer += char.toLowerCase();
+            this.#clearTypeaheadTimer();
+            this.#typeaheadTimer = window.setTimeout(() => {
+                this.#typeaheadBuffer = '';
+            }, TYPEAHEAD_TIMEOUT_MS);
+            const items = this.#enabledItems();
+            const match = items.find((item) => item.primaryText.toLowerCase().startsWith(this.#typeaheadBuffer));
+            match?.focus();
+        };
+    }
+    static { this.styles = [...DsElement.styles, menuStyles]; }
+    #typeaheadBuffer;
+    #typeaheadTimer;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#clearTypeaheadTimer();
+    }
+    #items() {
+        const slot = this.shadowRoot?.querySelector('slot:not([name])');
+        if (!slot)
+            return [];
+        return slot
+            .assignedElements({ flatten: true })
+            .filter((el) => el.tagName.toLowerCase() === 'ds-menu-item');
+    }
+    #enabledItems() {
+        return this.#items().filter((item) => !item.disabled);
+    }
+    #setRovingTabindex(activeItem) {
+        for (const item of this.#enabledItems()) {
+            item.setAttribute('tabindex', item === activeItem ? '0' : '-1');
+        }
+    }
+    #onItemsSlotChange;
+    #onHeaderSlotChange;
+    #onFooterSlotChange;
+    #onFocusIn;
+    #onActivate;
+    #moveFocus;
+    #onKeydown;
+    #typeahead;
+    #clearTypeaheadTimer() {
+        if (this.#typeaheadTimer) {
+            window.clearTimeout(this.#typeaheadTimer);
+            this.#typeaheadTimer = 0;
+        }
+    }
+    render() {
+        return html `<div class="header" ?hidden=${!this._hasHeader}>
+        <slot name="header" @slotchange=${this.#onHeaderSlotChange}></slot>
+      </div>
+      <div
+        class="items"
+        part="menu"
+        role="menu"
+        aria-orientation="vertical"
+        aria-label=${ifDefined(this.label || undefined)}
+        @focusin=${this.#onFocusIn}
+        @keydown=${this.#onKeydown}
+        @ds-activate=${this.#onActivate}
+      >
+        <slot @slotchange=${this.#onItemsSlotChange}></slot>
+      </div>
+      <div class="footer" ?hidden=${!this._hasFooter}>
+        <slot name="footer" @slotchange=${this.#onFooterSlotChange}></slot>
+      </div>`;
+    }
+}
+__decorate([
+    property()
+], DsMenu.prototype, "label", void 0);
+__decorate([
+    state()
+], DsMenu.prototype, "_hasHeader", void 0);
+__decorate([
+    state()
+], DsMenu.prototype, "_hasFooter", void 0);
+//# sourceMappingURL=menu.js.map

package/dist/atoms/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/atoms/menu/menu.ts"],"names":[],"mappings":"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"}

package/dist/atoms/menu/menu.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const menuStyles: import("lit").CSSResult;
+//# sourceMappingURL=menu.styles.d.ts.map

package/dist/atoms/menu/menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/menu/menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAyCtB,CAAC"}

package/dist/atoms/menu/menu.styles.js

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+export const menuStyles = css `
+  :host {
+    display: inline-block;
+    background: var(--ds-color-bg);
+    color: var(--ds-color-fg);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-sm);
+    box-shadow: var(--ds-shadow-md);
+    overflow: hidden;
+    min-width: 180px;
+    font-family: var(--ds-font-body);
+  }
+  .header,
+  .footer {
+    display: block;
+    padding: var(--ds-space-2) var(--ds-space-3);
+    color: var(--ds-color-fg-subtle, var(--ds-color-fg));
+    font-size: var(--ds-font-size-2xs);
+    letter-spacing: var(--ds-letter-spacing-wide);
+    text-transform: uppercase;
+  }
+  .header:has(slot:not([name='header']):empty),
+  .footer:has(slot:not([name='footer']):empty) {
+    display: none;
+  }
+  .header[hidden],
+  .footer[hidden] {
+    display: none;
+  }
+  .header {
+    border-bottom: 1px solid var(--ds-color-border);
+  }
+  .footer {
+    border-top: 1px solid var(--ds-color-border);
+  }
+  .items {
+    display: block;
+    padding: var(--ds-space-1);
+    max-height: var(--ds-menu-max-height, 320px);
+    overflow-y: auto;
+  }
+`;
+//# sourceMappingURL=menu.styles.js.map

package/dist/atoms/menu/menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/atoms/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC5B,CAAC"}

package/dist/atoms/nav-item/define.d.ts

@@ -0,0 +1,9 @@
+import { DsNavItem } from './nav-item.js';
+import { DsNavGroup } from './nav-group.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-nav-item': DsNavItem;
+        'ds-nav-group': DsNavGroup;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/atoms/nav-item/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAS5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;QACzB,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/atoms/nav-item/define.js

@@ -0,0 +1,9 @@
+import { DsNavItem } from './nav-item.js';
+import { DsNavGroup } from './nav-group.js';
+if (!customElements.get('ds-nav-item')) {
+    customElements.define('ds-nav-item', DsNavItem);
+}
+if (!customElements.get('ds-nav-group')) {
+    customElements.define('ds-nav-group', DsNavGroup);
+}
+//# sourceMappingURL=define.js.map

package/dist/atoms/nav-item/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAClD,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;IACxC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AACpD,CAAC"}

package/dist/atoms/nav-item/index.d.ts

@@ -0,0 +1,3 @@
+export { DsNavItem } from './nav-item.js';
+export { DsNavGroup } from './nav-group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/nav-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/atoms/nav-item/index.js

@@ -0,0 +1,3 @@
+export { DsNavItem } from './nav-item.js';
+export { DsNavGroup } from './nav-group.js';
+//# sourceMappingURL=index.js.map

package/dist/atoms/nav-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/atoms/nav-item/nav-group.d.ts

@@ -0,0 +1,25 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../tooltip/define.js';
+/**
+ * @tag ds-nav-group
+ * @summary Collapsible heading + nested ds-nav-item children. Uses the disclosure pattern.
+ * @slot default - ds-nav-item children.
+ * @slot icon - Optional leading icon for the heading. Required when `compact` is set.
+ * @event ds-group-toggle - Fires when the user toggles the heading. Detail: `{ expanded: boolean }`.
+ * @csspart heading - The internal `<button>` heading.
+ * @csspart chevron - The chevron icon wrapper.
+ * @csspart items - The nested items container.
+ */
+export declare class DsNavGroup extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    label: string;
+    expanded: boolean;
+    collapsible: boolean;
+    compact: boolean;
+    private _hasIcon;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=nav-group.d.ts.map

package/dist/atoms/nav-item/nav-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-group.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,sBAAsB,CAAC;AAI9B;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,SAAS;;IACvC,OAAgB,MAAM,4BAAyC;IAEnD,KAAK,SAAM;IACqB,QAAQ,UAAS;IAChC,WAAW,UAAQ;IACJ,OAAO,UAAS;IAEnD,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAuEtC,MAAM,IAAI,cAAc;CA2BlC"}

package/dist/atoms/nav-item/nav-group.js

@@ -0,0 +1,139 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { navGroupStyles } from './nav-group.styles.js';
+import '../tooltip/define.js';
+const HOVER_TOOLTIP_DELAY_MS = 2000;
+/**
+ * @tag ds-nav-group
+ * @summary Collapsible heading + nested ds-nav-item children. Uses the disclosure pattern.
+ * @slot default - ds-nav-item children.
+ * @slot icon - Optional leading icon for the heading. Required when `compact` is set.
+ * @event ds-group-toggle - Fires when the user toggles the heading. Detail: `{ expanded: boolean }`.
+ * @csspart heading - The internal `<button>` heading.
+ * @csspart chevron - The chevron icon wrapper.
+ * @csspart items - The nested items container.
+ */
+export class DsNavGroup extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.expanded = false;
+        this.collapsible = true;
+        this.compact = false;
+        this._hasIcon = false;
+        this.#onIconSlotChange = () => {
+            this._hasIcon = this.#hasAssignedIcon();
+            this.#warnIfMissingIcon();
+        };
+        this.#onHeadingClick = () => {
+            if (!this.collapsible) {
+                return;
+            }
+            this.expanded = !this.expanded;
+            this.emit('ds-group-toggle', { detail: { expanded: this.expanded } });
+        };
+    }
+    static { this.styles = [...DsElement.styles, navGroupStyles]; }
+    updated(changed) {
+        if (changed.has('compact') || changed.has('_hasIcon')) {
+            this.#warnIfMissingIcon();
+        }
+    }
+    #hasAssignedIcon() {
+        const slot = this.renderRoot.querySelector('slot[name="icon"]');
+        if (!slot) {
+            return false;
+        }
+        return slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    #warnIfMissingIcon() {
+        if (this.compact && !this.#hasAssignedIcon()) {
+            console.error('[ds-nav-group] compact mode requires a child element with slot="icon".', this);
+        }
+    }
+    #onIconSlotChange;
+    #onHeadingClick;
+    #renderHeading() {
+        const headingId = `${this.uid}-heading`;
+        const itemsId = `${this.uid}-items`;
+        const isOpen = !this.collapsible || this.expanded;
+        return html `<button
+      class="heading"
+      part="heading"
+      id=${headingId}
+      type="button"
+      aria-expanded=${this.collapsible ? (isOpen ? 'true' : 'false') : 'true'}
+      aria-controls=${itemsId}
+      aria-label=${this.compact ? this.label : ''}
+      ?disabled=${!this.collapsible}
+      @click=${this.#onHeadingClick}
+    >
+      <span class="icon" part="icon" ?hidden=${!this._hasIcon}>
+        <slot name="icon" @slotchange=${this.#onIconSlotChange}></slot>
+      </span>
+      <span class="label">${this.label}</span>
+      ${this.collapsible
+            ? html `<span class="chevron" part="chevron" aria-hidden="true">
+            <!-- Heroicons 2.2.0 — 16/solid: chevron-down -->
+            <svg viewBox="0 0 16 16" fill="currentColor">
+              <path
+                fill-rule="evenodd"
+                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </span>`
+            : null}
+    </button>`;
+    }
+    render() {
+        const itemsId = `${this.uid}-items`;
+        const headingId = `${this.uid}-heading`;
+        const isOpen = !this.collapsible || this.expanded;
+        const heading = this.compact
+            ? html `<ds-tooltip
+          class="tooltip-wrapper"
+          placement="right"
+          delay=${HOVER_TOOLTIP_DELAY_MS}
+          ?hover-only=${true}
+        >
+          ${this.#renderHeading()}
+          <span slot="tip">${this.label}</span>
+        </ds-tooltip>`
+            : this.#renderHeading();
+        return html `${heading}
+      <div
+        class="items"
+        part="items"
+        id=${itemsId}
+        role="list"
+        aria-labelledby=${headingId}
+        ?hidden=${!isOpen}
+      >
+        <slot></slot>
+      </div>`;
+    }
+}
+__decorate([
+    property()
+], DsNavGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsNavGroup.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], DsNavGroup.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsNavGroup.prototype, "compact", void 0);
+__decorate([
+    state()
+], DsNavGroup.prototype, "_hasIcon", void 0);
+//# sourceMappingURL=nav-group.js.map

package/dist/atoms/nav-item/nav-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-group.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.ts"],"names":[],"mappings":"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"}

package/dist/atoms/nav-item/nav-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const navGroupStyles: import("lit").CSSResult;
+//# sourceMappingURL=nav-group.styles.d.ts.map

package/dist/atoms/nav-item/nav-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-group.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAwG1B,CAAC"}

package/dist/atoms/nav-item/nav-group.styles.js

@@ -0,0 +1,107 @@
+import { css } from 'lit';
+export const navGroupStyles = css `
+  :host {
+    display: block;
+  }
+  :host([compact]) {
+    .heading {
+      height: var(--ds-sidenav-item-compact-size);
+      width: var(--ds-sidenav-item-compact-size);
+    }
+  }
+  .heading {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+    width: 100%;
+    height: var(--ds-sidenav-item-height);
+    padding: var(--ds-space-2) var(--ds-space-3);
+    border: none;
+    background: transparent;
+    border-radius: var(--ds-radius-sm);
+    color: var(--ds-color-fg-subtle);
+    font-family: var(--ds-font-body);
+    font-size: var(--ds-font-size-2xs);
+    font-weight: var(--ds-font-weight-semibold);
+    letter-spacing: var(--ds-letter-spacing-wide);
+    text-transform: uppercase;
+    text-align: left;
+    cursor: pointer;
+  }
+  .heading[disabled] {
+    cursor: default;
+  }
+  .heading:hover:not([disabled]) {
+    color: var(--ds-color-fg);
+  }
+  .heading:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow: var(--ds-shadow-focus);
+  }
+  .icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .icon[hidden] {
+    display: none;
+  }
+  .label {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .chevron {
+    display: inline-flex;
+    flex: none;
+    transition: transform var(--ds-duration-fast) var(--ds-easing-standard);
+  }
+  .chevron svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  :host([expanded]) .chevron {
+    transform: rotate(180deg);
+  }
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    padding-left: var(--ds-space-2);
+  }
+  .items[hidden] {
+    display: none;
+  }
+  :host([compact]) .label {
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    position: absolute;
+  }
+  :host([compact]) .heading {
+    justify-content: center;
+    gap: var(--ds-space-1);
+    padding: var(--ds-space-2);
+  }
+  :host([compact]) .chevron svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  :host([compact]) .items {
+    padding-left: 0;
+  }
+  .tooltip-wrapper {
+    display: block;
+    width: 100%;
+  }
+  :host([compact]) .tooltip-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+  :host([compact]) .tooltip-wrapper::part(anchor) {
+    display: inline-flex;
+    width: auto;
+  }
+`;
+//# sourceMappingURL=nav-group.styles.js.map

package/dist/atoms/nav-item/nav-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-group.styles.js","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGhC,CAAC"}

package/dist/atoms/nav-item/nav-item.d.ts

@@ -0,0 +1,28 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../tooltip/define.js';
+/**
+ * @tag ds-nav-item
+ * @summary Interactive navigation link. Renders an `<a>` and reflects `current` state via `aria-current`.
+ * @slot default - The label.
+ * @slot icon - Optional leading icon (typically `<ds-icon>`). Required when `compact` is set.
+ * @csspart link - The internal `<a>` (or `<span>` when disabled).
+ * @csspart icon - The icon slot wrapper.
+ * @csspart label - The label slot wrapper.
+ */
+export declare class DsNavItem extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    href: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    current: boolean;
+    disabled: boolean;
+    compact: boolean;
+    private _hasIcon;
+    private _labelText;
+    connectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=nav-item.d.ts.map

package/dist/atoms/nav-item/nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.d.ts","sourceRoot":"","sources":["../../../src/atoms/nav-item/nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,sBAAsB,CAAC;AAI9B;;;;;;;;GAQG;AACH,qBAAa,SAAU,SAAQ,SAAS;;IACtC,OAAgB,MAAM,4BAAwC;IAElD,IAAI,SAAM;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACmB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAEnD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAM;IAExB,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAsEtC,MAAM,IAAI,cAAc;CAclC"}