@api-client/ui 0.5.32 → 0.5.33

package/build/src/elements/navigation/internals/Navigation.d.ts

@@ -0,0 +1,68 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type NavigationItem from './NavigationItem.js';
+import { AriaCurrent } from '../../../types/aria.js';
+/**
+ * NavigationList
+ *
+ * A semantic, accessible navigation container for `ui-navigation-item` elements.
+ * Handles keyboard navigation (roving tabindex), focus management, and ARIA roles.
+ *
+ * ## Usage Example
+ *
+ * ```html
+ * <ui-navigation aria-label="Main navigation" current="page">
+ *   <ui-navigation-item selected>
+ *     <span slot="icon" aria-hidden="true">🏠</span>
+ *     Home
+ *   </ui-navigation-item>
+ *   <ui-navigation-item>
+ *     <span slot="icon" aria-hidden="true">🔍</span>
+ *     Search
+ *   </ui-navigation-item>
+ *   <ui-navigation-item>
+ *     <span slot="icon" aria-hidden="true">📁</span>
+ *     Files
+ *   </ui-navigation-item>
+ *   <ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
+ *     <span slot="icon" aria-hidden="true">⚙️</span>
+ *   </ui-navigation-item>
+ * </ui-navigation>
+ * ```
+ *
+ * @slot - Place `ui-navigation-item` elements as direct children.
+ * @fires select - Dispatched when an item is selected via click or keyboard.
+ *                 The `detail` object contains the selected `item`.
+ */
+export default class Navigation extends LitElement {
+    /**
+     * Orientation of the navigation: 'horizontal' or 'vertical'.
+     * @attribute
+     */
+    accessor orientation: 'horizontal' | 'vertical';
+    /**
+     * The current item in the navigation, used for ARIA attributes.
+     * Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.
+     * @attribute
+     */
+    accessor current: AriaCurrent;
+    /**
+     * Query all ui-navigation-item children
+     */
+    accessor _items: NavigationItem[];
+    render(): TemplateResult;
+    constructor();
+    firstUpdated(): void;
+    private _onSlotChange;
+    /**
+     * Sets the initial `tabindex` for the items. The first selected item,
+     * or the first item if none are selected, receives `tabindex="0"`.
+     * All other items receive `tabindex="-1"`.
+     */
+    private _setTabIndexes;
+    private _getEnabledItems;
+    private _onClick;
+    private _selectItem;
+    private _updateFocus;
+    private _onKeyDown;
+}
+//# sourceMappingURL=Navigation.d.ts.map

package/build/src/elements/navigation/internals/Navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/Navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAE3D,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD;;;OAGG;IACwC,QAAQ,CAAC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAa;IAEvG;;;;OAIG;IACwC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAK;IAE7E;;OAEG;IACuC,QAAQ,CAAC,MAAM,EAAG,cAAc,EAAE,CAAA;IAEnE,MAAM,IAAI,cAAc;;IAcxB,YAAY;IAIrB,OAAO,CAAC,aAAa,CAEpB;IAED;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,QAAQ,CAMf;IAED,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;CAyCnB"}

package/build/src/elements/navigation/internals/Navigation.js

@@ -0,0 +1,205 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+let Navigation = (() => {
+    let _classSuper = LitElement;
+    let _orientation_decorators;
+    let _orientation_initializers = [];
+    let _orientation_extraInitializers = [];
+    let _current_decorators;
+    let _current_initializers = [];
+    let _current_extraInitializers = [];
+    let __items_decorators;
+    let __items_initializers = [];
+    let __items_extraInitializers = [];
+    return class Navigation extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _orientation_decorators = [property({ type: String, reflect: true })];
+            _current_decorators = [property({ type: String, reflect: true })];
+            __items_decorators = [queryAssignedElements({ flatten: true })];
+            __esDecorate(this, null, _orientation_decorators, { kind: "accessor", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
+            __esDecorate(this, null, _current_decorators, { kind: "accessor", name: "current", static: false, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _current_initializers, _current_extraInitializers);
+            __esDecorate(this, null, __items_decorators, { kind: "accessor", name: "_items", static: false, private: false, access: { has: obj => "_items" in obj, get: obj => obj._items, set: (obj, value) => { obj._items = value; } }, metadata: _metadata }, __items_initializers, __items_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #orientation_accessor_storage = __runInitializers(this, _orientation_initializers, 'vertical'
+        /**
+         * The current item in the navigation, used for ARIA attributes.
+         * Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.
+         * @attribute
+         */
+        );
+        /**
+         * Orientation of the navigation: 'horizontal' or 'vertical'.
+         * @attribute
+         */
+        get orientation() { return this.#orientation_accessor_storage; }
+        set orientation(value) { this.#orientation_accessor_storage = value; }
+        #current_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _current_initializers, ''
+        /**
+         * Query all ui-navigation-item children
+         */
+        ));
+        /**
+         * The current item in the navigation, used for ARIA attributes.
+         * Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.
+         * @attribute
+         */
+        get current() { return this.#current_accessor_storage; }
+        set current(value) { this.#current_accessor_storage = value; }
+        #_items_accessor_storage = (__runInitializers(this, _current_extraInitializers), __runInitializers(this, __items_initializers, void 0));
+        /**
+         * Query all ui-navigation-item children
+         */
+        get _items() { return this.#_items_accessor_storage; }
+        set _items(value) { this.#_items_accessor_storage = value; }
+        render() {
+            return html `
+      <nav aria-label="${this.getAttribute('aria-label') || 'Navigation'}">
+        <slot @slotchange="${this._onSlotChange}"></slot>
+      </nav>
+    `;
+        }
+        constructor() {
+            super();
+            this.addEventListener('keydown', this._onKeyDown.bind(this));
+            this.addEventListener('click', this._onClick.bind(this));
+        }
+        firstUpdated() {
+            this._setTabIndexes();
+        }
+        _onSlotChange = (__runInitializers(this, __items_extraInitializers), () => {
+            this._setTabIndexes();
+        });
+        /**
+         * Sets the initial `tabindex` for the items. The first selected item,
+         * or the first item if none are selected, receives `tabindex="0"`.
+         * All other items receive `tabindex="-1"`.
+         */
+        _setTabIndexes() {
+            const items = this._getEnabledItems();
+            if (!items.length) {
+                return;
+            }
+            items.forEach((item) => {
+                if (item.disabled) {
+                    return;
+                }
+                item.setAttribute('tabindex', item.selected ? '0' : '-1');
+            });
+        }
+        _getEnabledItems() {
+            return (this._items || []).filter((item) => !item.disabled);
+        }
+        _onClick = (e) => {
+            const target = e.target;
+            const item = target.closest('ui-navigation-item');
+            if (item && this._items.includes(item)) {
+                this._selectItem(item);
+            }
+        };
+        _selectItem(itemToSelect) {
+            if (itemToSelect.disabled) {
+                return;
+            }
+            this._items.forEach((item) => {
+                item.selected = item === itemToSelect;
+                if (item.hasAttribute('aria-current')) {
+                    item.removeAttribute('aria-current');
+                }
+            });
+            if (this.current) {
+                itemToSelect.setAttribute('aria-current', this.current);
+            }
+            this._updateFocus(itemToSelect);
+            this.dispatchEvent(new CustomEvent('select', {
+                detail: { item: itemToSelect },
+                bubbles: false,
+                composed: true,
+            }));
+        }
+        _updateFocus(itemToFocus) {
+            this._setTabIndexes();
+            itemToFocus.focus();
+        }
+        _onKeyDown(e) {
+            const items = this._getEnabledItems();
+            if (!items.length) {
+                return;
+            }
+            const activeElement = this.getRootNode().activeElement;
+            if (!activeElement) {
+                return;
+            }
+            // Find which of our items is the host of the active element.
+            // This is necessary because of focus delegation in ui-navigation-item.
+            const activeItem = items.find((item) => item === activeElement || item.shadowRoot?.contains(activeElement));
+            if (!activeItem) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._selectItem(activeItem);
+                return;
+            }
+            const idx = items.indexOf(activeItem);
+            let nextIdx = idx;
+            if (this.orientation === 'horizontal') {
+                if (e.key === 'ArrowRight')
+                    nextIdx = (idx + 1) % items.length;
+                if (e.key === 'ArrowLeft')
+                    nextIdx = (idx - 1 + items.length) % items.length;
+            }
+            else {
+                if (e.key === 'ArrowDown')
+                    nextIdx = (idx + 1) % items.length;
+                if (e.key === 'ArrowUp')
+                    nextIdx = (idx - 1 + items.length) % items.length;
+            }
+            if (e.key === 'Home')
+                nextIdx = 0;
+            if (e.key === 'End')
+                nextIdx = items.length - 1;
+            if (nextIdx !== idx) {
+                items[nextIdx].focus();
+                items.forEach((item, i) => item.setAttribute('tabindex', i === nextIdx ? '0' : '-1'));
+                e.preventDefault();
+            }
+        }
+    };
+})();
+/**
+ * NavigationList
+ *
+ * A semantic, accessible navigation container for `ui-navigation-item` elements.
+ * Handles keyboard navigation (roving tabindex), focus management, and ARIA roles.
+ *
+ * ## Usage Example
+ *
+ * ```html
+ * <ui-navigation aria-label="Main navigation" current="page">
+ *   <ui-navigation-item selected>
+ *     <span slot="icon" aria-hidden="true">🏠</span>
+ *     Home
+ *   </ui-navigation-item>
+ *   <ui-navigation-item>
+ *     <span slot="icon" aria-hidden="true">🔍</span>
+ *     Search
+ *   </ui-navigation-item>
+ *   <ui-navigation-item>
+ *     <span slot="icon" aria-hidden="true">📁</span>
+ *     Files
+ *   </ui-navigation-item>
+ *   <ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
+ *     <span slot="icon" aria-hidden="true">⚙️</span>
+ *   </ui-navigation-item>
+ * </ui-navigation>
+ * ```
+ *
+ * @slot - Place `ui-navigation-item` elements as direct children.
+ * @fires select - Dispatched when an item is selected via click or keyboard.
+ *                 The `detail` object contains the selected `item`.
+ */
+export default Navigation;
+//# sourceMappingURL=Navigation.js.map

package/build/src/elements/navigation/internals/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/Navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport type NavigationItem from './NavigationItem.js'\nimport { AriaCurrent } from '../../../types/aria.js'\n\n/**\n * NavigationList\n *\n * A semantic, accessible navigation container for `ui-navigation-item` elements.\n * Handles keyboard navigation (roving tabindex), focus management, and ARIA roles.\n *\n * ## Usage Example\n *\n * ```html\n * <ui-navigation aria-label=\"Main navigation\" current=\"page\">\n *   <ui-navigation-item selected>\n *     <span slot=\"icon\" aria-hidden=\"true\">🏠</span>\n *     Home\n *   </ui-navigation-item>\n *   <ui-navigation-item>\n *     <span slot=\"icon\" aria-hidden=\"true\">🔍</span>\n *     Search\n *   </ui-navigation-item>\n *   <ui-navigation-item>\n *     <span slot=\"icon\" aria-hidden=\"true\">📁</span>\n *     Files\n *   </ui-navigation-item>\n *   <ui-navigation-item iconOnly disabled aria-disabled=\"true\" tabindex=\"-1\">\n *     <span slot=\"icon\" aria-hidden=\"true\">⚙️</span>\n *   </ui-navigation-item>\n * </ui-navigation>\n * ```\n *\n * @slot - Place `ui-navigation-item` elements as direct children.\n * @fires select - Dispatched when an item is selected via click or keyboard.\n *                 The `detail` object contains the selected `item`.\n */\nexport default class Navigation extends LitElement {\n  /**\n   * Orientation of the navigation: 'horizontal' or 'vertical'.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor orientation: 'horizontal' | 'vertical' = 'vertical'\n\n  /**\n   * The current item in the navigation, used for ARIA attributes.\n   * Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor current: AriaCurrent = ''\n\n  /**\n   * Query all ui-navigation-item children\n   */\n  @queryAssignedElements({ flatten: true }) accessor _items!: NavigationItem[]\n\n  override render(): TemplateResult {\n    return html`\n      <nav aria-label=\"${this.getAttribute('aria-label') || 'Navigation'}\">\n        <slot @slotchange=\"${this._onSlotChange}\"></slot>\n      </nav>\n    `\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('keydown', this._onKeyDown.bind(this))\n    this.addEventListener('click', this._onClick.bind(this))\n  }\n\n  override firstUpdated() {\n    this._setTabIndexes()\n  }\n\n  private _onSlotChange = () => {\n    this._setTabIndexes()\n  }\n\n  /**\n   * Sets the initial `tabindex` for the items. The first selected item,\n   * or the first item if none are selected, receives `tabindex=\"0\"`.\n   * All other items receive `tabindex=\"-1\"`.\n   */\n  private _setTabIndexes() {\n    const items = this._getEnabledItems()\n    if (!items.length) {\n      return\n    }\n    items.forEach((item) => {\n      if (item.disabled) {\n        return\n      }\n      item.setAttribute('tabindex', item.selected ? '0' : '-1')\n    })\n  }\n\n  private _getEnabledItems(): NavigationItem[] {\n    return (this._items || []).filter((item) => !item.disabled)\n  }\n\n  private _onClick = (e: MouseEvent) => {\n    const target = e.target as HTMLElement\n    const item = target.closest('ui-navigation-item')\n    if (item && this._items.includes(item)) {\n      this._selectItem(item)\n    }\n  }\n\n  private _selectItem(itemToSelect: NavigationItem) {\n    if (itemToSelect.disabled) {\n      return\n    }\n\n    this._items.forEach((item) => {\n      item.selected = item === itemToSelect\n      if (item.hasAttribute('aria-current')) {\n        item.removeAttribute('aria-current')\n      }\n    })\n\n    if (this.current) {\n      itemToSelect.setAttribute('aria-current', this.current)\n    }\n    this._updateFocus(itemToSelect)\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: { item: itemToSelect },\n        bubbles: false,\n        composed: true,\n      })\n    )\n  }\n\n  private _updateFocus(itemToFocus: NavigationItem) {\n    this._setTabIndexes()\n    itemToFocus.focus()\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    const items = this._getEnabledItems()\n    if (!items.length) {\n      return\n    }\n\n    const activeElement = (this.getRootNode() as Document | ShadowRoot).activeElement\n    if (!activeElement) {\n      return\n    }\n\n    // Find which of our items is the host of the active element.\n    // This is necessary because of focus delegation in ui-navigation-item.\n    const activeItem = items.find((item) => item === activeElement || item.shadowRoot?.contains(activeElement))\n    if (!activeItem) {\n      return\n    }\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this._selectItem(activeItem)\n      return\n    }\n\n    const idx = items.indexOf(activeItem)\n    let nextIdx = idx\n    if (this.orientation === 'horizontal') {\n      if (e.key === 'ArrowRight') nextIdx = (idx + 1) % items.length\n      if (e.key === 'ArrowLeft') nextIdx = (idx - 1 + items.length) % items.length\n    } else {\n      if (e.key === 'ArrowDown') nextIdx = (idx + 1) % items.length\n      if (e.key === 'ArrowUp') nextIdx = (idx - 1 + items.length) % items.length\n    }\n    if (e.key === 'Home') nextIdx = 0\n    if (e.key === 'End') nextIdx = items.length - 1\n    if (nextIdx !== idx) {\n      items[nextIdx].focus()\n      items.forEach((item, i) => item.setAttribute('tabindex', i === nextIdx ? '0' : '-1'))\n      e.preventDefault()\n    }\n  }\n}\n"]}

package/build/src/elements/navigation/internals/Navigation.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=Navigation.styles.d.ts.map

package/build/src/elements/navigation/internals/Navigation.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/Navigation.styles.ts"],"names":[],"mappings":";AAEA,wBAqBC"}

package/build/src/elements/navigation/internals/Navigation.styles.js

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    outline: none;
+  }
+
+  nav {
+    display: flex;
+    gap: 8px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  :host([orientation='horizontal']) nav {
+    flex-direction: row;
+  }
+
+  :host([orientation='vertical']) nav {
+    flex-direction: column;
+  }
+`;
+//# sourceMappingURL=Navigation.styles.js.map

package/build/src/elements/navigation/internals/Navigation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/Navigation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  nav {\n    display: flex;\n    gap: 8px;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  :host([orientation='horizontal']) nav {\n    flex-direction: row;\n  }\n\n  :host([orientation='vertical']) nav {\n    flex-direction: column;\n  }\n`\n"]}

package/build/src/elements/navigation/internals/NavigationItem.d.ts

@@ -1,12 +1,67 @@
 import { TemplateResult } from 'lit';
 import { UiElement } from '../../../md/UiElement.js';
+/**
+ * NavigationItem
+ *
+ * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports
+ * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.
+ *
+ * ## Accessibility
+ *
+ * - Uses a native `<button>` element for proper semantics and keyboard accessibility.
+ * - The icon is marked with `role="presentation"` to indicate it is decorative.
+ * - Focus ring and ripple effects are included for visual feedback.
+ *
+ * ## Usage Example
+ *
+ * ### Accessible Navigation Example
+ *
+ * ```html
+ * <nav aria-label="Main navigation">
+ *   <ul style="display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;">
+ *     <li>
+ *       <navigation-item selected aria-current="page">
+ *         <span slot="icon" aria-hidden="true">🏠</span>
+ *         Home
+ *       </navigation-item>
+ *     </li>
+ *     <li>
+ *       <navigation-item>
+ *         <span slot="icon" aria-hidden="true">🔍</span>
+ *         Search
+ *       </navigation-item>
+ *     </li>
+ *     <li>
+ *       <navigation-item>
+ *         <span slot="icon" aria-hidden="true">📁</span>
+ *         Files
+ *       </navigation-item>
+ *     </li>
+ *     <li>
+ *       <navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
+ *         <span slot="icon" aria-hidden="true">⚙️</span>
+ *       </navigation-item>
+ *     </li>
+ *   </ul>
+ * </nav>
+ * ```
+ *
+ * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`
+ * is placed inside a list item for proper structure. The `aria-current="page"` attribute marks the current
+ * page, and `aria-disabled="true"` with `tabindex="-1"` ensures the disabled item is not focusable.
+ * Icons use `aria-hidden="true"` for accessibility.
+ *
+ * @slot icon - A slot for the icon element
+ * @slot - The default slot for the label
+ */
 export default class NavigationItem extends UiElement {
     static shadowRootOptions: ShadowRootInit;
+    get disabled(): boolean;
     /**
-     * When set, the button is a disabled state.
+     * When set, the navigation item is in a disabled state.
      * @attribute
      */
-    accessor disabled: boolean;
+    set disabled(value: boolean);
     /**
      * Whether the navigation item is selected.
      * @attribute

package/build/src/elements/navigation/internals/NavigationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.d.ts","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;IACnD,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IACrE;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;cAK3B,MAAM,IAAI,cAAc;IAiB3C,SAAS,CAAC,UAAU,IAAI,cAAc;CAKvC"}
+{"version":3,"file":"NavigationItem.d.ts","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAA;AAInD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;IACnD,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IACrE;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;cAK3B,MAAM,IAAI,cAAc;IAqB3C,SAAS,CAAC,UAAU,IAAI,cAAc;CAKvC"}

package/build/src/elements/navigation/internals/NavigationItem.js

@@ -1,13 +1,14 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { when } from 'lit/directives/when.js';
 import { UiElement } from '../../../md/UiElement.js';
+import { isDisabled, setDisabled } from '../../../lib/disabled.js';
 let NavigationItem = (() => {
     let _classSuper = UiElement;
-    let _disabled_decorators;
-    let _disabled_initializers = [];
-    let _disabled_extraInitializers = [];
+    let _instanceExtraInitializers = [];
+    let _set_disabled_decorators;
     let _selected_decorators;
     let _selected_initializers = [];
     let _selected_extraInitializers = [];
@@ -20,11 +21,11 @@ let NavigationItem = (() => {
     return class NavigationItem extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _disabled_decorators = [property({ reflect: true, type: Boolean })];
+            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
             _selected_decorators = [property({ reflect: true, type: Boolean })];
             _iconOnly_decorators = [property({ reflect: true, type: Boolean })];
             _hasIcon_decorators = [state()];
-            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
             __esDecorate(this, null, _iconOnly_decorators, { kind: "accessor", name: "iconOnly", static: false, private: false, access: { has: obj => "iconOnly" in obj, get: obj => obj.iconOnly, set: (obj, value) => { obj.iconOnly = value; } }, metadata: _metadata }, _iconOnly_initializers, _iconOnly_extraInitializers);
             __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
@@ -34,19 +35,19 @@ let NavigationItem = (() => {
             mode: 'open',
             delegatesFocus: true,
         };
-        #disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false
-        /**
-         * Whether the navigation item is selected.
-         * @attribute
-         */
-        );
+        get disabled() {
+            return isDisabled(this);
+        }
         /**
-         * When set, the button is a disabled state.
+         * When set, the navigation item is in a disabled state.
          * @attribute
          */
-        get disabled() { return this.#disabled_accessor_storage; }
-        set disabled(value) { this.#disabled_accessor_storage = value; }
-        #selected_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _selected_initializers, false
+        set disabled(value) {
+            const old = isDisabled(this);
+            setDisabled(this, value);
+            this.requestUpdate('disabled', old);
+        }
+        #selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, false
         /**
          * When set, the navigation item is rendered as an icon-only button.
          * The width of the button is set to 40px.
@@ -97,10 +98,10 @@ let NavigationItem = (() => {
                 'icon-only': this.iconOnly,
             });
             return html `
-      <button class="${containerClasses}" id="button">
+      <button class="${containerClasses}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}">
         <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
         <md-ripple></md-ripple>
-        ${this.renderIcon()}${this.iconOnly ? '' : html `<slot></slot>`}
+        ${this.renderIcon()}${when(this.iconOnly, () => nothing, () => html `<slot></slot>`)}
       </button>
     `;
         }
@@ -115,5 +116,59 @@ let NavigationItem = (() => {
         }
     };
 })();
+/**
+ * NavigationItem
+ *
+ * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports
+ * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.
+ *
+ * ## Accessibility
+ *
+ * - Uses a native `<button>` element for proper semantics and keyboard accessibility.
+ * - The icon is marked with `role="presentation"` to indicate it is decorative.
+ * - Focus ring and ripple effects are included for visual feedback.
+ *
+ * ## Usage Example
+ *
+ * ### Accessible Navigation Example
+ *
+ * ```html
+ * <nav aria-label="Main navigation">
+ *   <ul style="display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;">
+ *     <li>
+ *       <navigation-item selected aria-current="page">
+ *         <span slot="icon" aria-hidden="true">🏠</span>
+ *         Home
+ *       </navigation-item>
+ *     </li>
+ *     <li>
+ *       <navigation-item>
+ *         <span slot="icon" aria-hidden="true">🔍</span>
+ *         Search
+ *       </navigation-item>
+ *     </li>
+ *     <li>
+ *       <navigation-item>
+ *         <span slot="icon" aria-hidden="true">📁</span>
+ *         Files
+ *       </navigation-item>
+ *     </li>
+ *     <li>
+ *       <navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
+ *         <span slot="icon" aria-hidden="true">⚙️</span>
+ *       </navigation-item>
+ *     </li>
+ *   </ul>
+ * </nav>
+ * ```
+ *
+ * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`
+ * is placed inside a list item for proper structure. The `aria-current="page"` attribute marks the current
+ * page, and `aria-disabled="true"` with `tabindex="-1"` ensures the disabled item is not focusable.
+ * Icons use `aria-hidden="true"` for accessibility.
+ *
+ * @slot icon - A slot for the icon element
+ * @slot - The default slot for the label
+ */
 export default NavigationItem;
 //# sourceMappingURL=NavigationItem.js.map

package/build/src/elements/navigation/internals/NavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;;sBAER,SAAS;;;;;;;;;;;;;iBAAhC,cAAe,SAAQ,WAAS;;;oCAUlD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCAK1C,KAAK,EAAE;YAjBoC,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAMzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAMzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAK5D,0KAAmB,OAAO,6BAAP,OAAO,yFAAQ;;;QA1B3C,MAAM,CAAU,iBAAiB,GAAmB;YAClD,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACrB,CAAA;QAM2C,6EAAoB,KAAK;QAErE;;;WAGG;UALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAMzB,oIAAoB,KAAK;QACrE;;;;WAIG;WALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAMzB,oIAAoB,KAAK;QAErE;;WAEG;WAJkE;QALrE;;;;WAIG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAK5D,kIAA6B,KAAK;QAE3C;;WAEG;WAJwC;QAH3C;;WAEG;QACM,IAAmB,OAAO,6CAAQ;QAAlC,IAAmB,OAAO,mDAAQ;QAE3C;;WAEG;QACO,oBAAoB,CAAC,CAAQ;YACrC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;YACxC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAA;QAC9C,CAAC;QAEkB,MAAM;YACvB,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YAChC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;gBAChC,QAAQ,EAAE,IAAI;gBACd,WAAW,EAAE,IAAI,CAAC,OAAO;gBACzB,SAAS,EAAE,OAAO;gBAClB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,CAAC,CAAA;YACF,OAAO,IAAI,CAAA;uBACQ,gBAAgB;;;UAG7B,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;KAEjE,CAAA;QACH,CAAC;QAES,UAAU;YAClB,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,oBAAoB;aACpD,CAAA;QACX,CAAC;;;;;;;AA1DH","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../../md/UiElement.js'\n\nexport default class NavigationItem extends UiElement {\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor disabled = false\n\n  /**\n   * Whether the navigation item is selected.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor selected = false\n  /**\n   * When set, the navigation item is rendered as an icon-only button.\n   * The width of the button is set to 40px.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor iconOnly = false\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected accessor hasIcon = false\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement\n    this.hasIcon = !!slot.assignedNodes().length\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      'button': true,\n      'with-icon': this.hasIcon,\n      'pressed': pressed,\n      'icon-only': this.iconOnly,\n    })\n    return html`\n      <button class=\"${containerClasses}\" id=\"button\">\n        <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n        <md-ripple></md-ripple>\n        ${this.renderIcon()}${this.iconOnly ? '' : html`<slot></slot>`}\n      </button>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<span role=\"presentation\" class=\"icon\"\n      ><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot\n    ></span>`\n  }\n}\n"]}
+{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { UiElement } from '../../../md/UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\n\n/**\n * NavigationItem\n *\n * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports\n * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.\n *\n * ## Accessibility\n *\n * - Uses a native `<button>` element for proper semantics and keyboard accessibility.\n * - The icon is marked with `role=\"presentation\"` to indicate it is decorative.\n * - Focus ring and ripple effects are included for visual feedback.\n *\n * ## Usage Example\n *\n * ### Accessible Navigation Example\n *\n * ```html\n * <nav aria-label=\"Main navigation\">\n *   <ul style=\"display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;\">\n *     <li>\n *       <navigation-item selected aria-current=\"page\">\n *         <span slot=\"icon\" aria-hidden=\"true\">🏠</span>\n *         Home\n *       </navigation-item>\n *     </li>\n *     <li>\n *       <navigation-item>\n *         <span slot=\"icon\" aria-hidden=\"true\">🔍</span>\n *         Search\n *       </navigation-item>\n *     </li>\n *     <li>\n *       <navigation-item>\n *         <span slot=\"icon\" aria-hidden=\"true\">📁</span>\n *         Files\n *       </navigation-item>\n *     </li>\n *     <li>\n *       <navigation-item iconOnly disabled aria-disabled=\"true\" tabindex=\"-1\">\n *         <span slot=\"icon\" aria-hidden=\"true\">⚙️</span>\n *       </navigation-item>\n *     </li>\n *   </ul>\n * </nav>\n * ```\n *\n * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`\n * is placed inside a list item for proper structure. The `aria-current=\"page\"` attribute marks the current\n * page, and `aria-disabled=\"true\"` with `tabindex=\"-1\"` ensures the disabled item is not focusable.\n * Icons use `aria-hidden=\"true\"` for accessibility.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class NavigationItem extends UiElement {\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  }\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the navigation item is in a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Whether the navigation item is selected.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor selected = false\n  /**\n   * When set, the navigation item is rendered as an icon-only button.\n   * The width of the button is set to 40px.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor iconOnly = false\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected accessor hasIcon = false\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement\n    this.hasIcon = !!slot.assignedNodes().length\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      'button': true,\n      'with-icon': this.hasIcon,\n      'pressed': pressed,\n      'icon-only': this.iconOnly,\n    })\n    return html`\n      <button class=\"${containerClasses}\" id=\"button\" ?disabled=\"${this.disabled}\" aria-disabled=\"${this.disabled}\">\n        <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n        <md-ripple></md-ripple>\n        ${this.renderIcon()}${when(\n          this.iconOnly,\n          () => nothing,\n          () => html`<slot></slot>`\n        )}\n      </button>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<span role=\"presentation\" class=\"icon\"\n      ><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot\n    ></span>`\n  }\n}\n"]}

package/build/src/elements/navigation/ui-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/Navigation.js';
+export declare class NavigationListElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-navigation': NavigationListElement;
+    }
+}
+//# sourceMappingURL=ui-navigation.d.ts.map

package/build/src/elements/navigation/ui-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/ui-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAG/C,qBACa,qBAAsB,SAAQ,OAAO;IAChD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,qBAAqB,CAAA;KACvC;CACF"}

package/build/src/elements/navigation/ui-navigation.js

@@ -0,0 +1,27 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/Navigation.js';
+import styles from './internals/Navigation.styles.js';
+let NavigationListElement = (() => {
+    let _classDecorators = [customElement('ui-navigation')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var NavigationListElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            NavigationListElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return NavigationListElement = _classThis;
+})();
+export { NavigationListElement };
+//# sourceMappingURL=ui-navigation.js.map

package/build/src/elements/navigation/ui-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-navigation.js","sourceRoot":"","sources":["../../../../src/elements/navigation/ui-navigation.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAC/C,OAAO,MAAM,MAAM,kCAAkC,CAAA;IAGxC,qBAAqB;4BADjC,aAAa,CAAC,eAAe,CAAC;;;;sBACY,OAAO;qCAAf,SAAQ,WAAO;;;;YAAlD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAqB;;;;;SAArB,qBAAqB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/Navigation.js'\nimport styles from './internals/Navigation.styles.js'\n\n@customElement('ui-navigation')\nexport class NavigationListElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-navigation': NavigationListElement\n  }\n}\n"]}

package/build/src/md/input/Input.d.ts

@@ -15,6 +15,8 @@ export default abstract class Input extends UiElement {
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
     };
     static readonly formAssociated = true;
     get form(): HTMLFormElement | null;