@api-client/ui 0.5.31 → 0.5.33

package/build/src/types/aria.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/types/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,CAAA;AAEhG;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAElE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAA;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,UAAU,GACV,MAAM,GACN,KAAK,GACL,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,eAAe,GACf,QAAQ,GACR,aAAa,GACb,OAAO,GACP,WAAW,GACX,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,UAAU,GACV,aAAa,GACb,SAAS,GACT,MAAM,GACN,cAAc,GACd,YAAY,GACZ,WAAW,GACX,UAAU,GACV,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,KAAK,GACL,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,QAAQ,GACR,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,GACR,eAAe,GACf,aAAa,GACb,MAAM,GACN,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,eAAe,GACf,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,eAAe,GACf,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,WAAW,GACX,YAAY,GACZ,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,GACd,eAAe,GACf,SAAS,GACT,cAAc,GACd,SAAS,GACT,SAAS,CAAA"}

package/build/src/types/aria.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=aria.js.map

package/build/src/types/aria.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria.js","sourceRoot":"","sources":["../../../src/types/aria.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * - `page` - Represents the current page within a set of pages.\n * - `step` - Represents the current step within a process.\n * - `location` - Represents the current location, for example the current page in a breadcrumbs hierarchy.\n * - `date` - Represents the current date within a collection of dates.\n * - `time` - Represents the current time within a set of times.\n * - `true` - Represents the current item within a set.\n * - `false` - Does not represent the current item within a set.\n * - `''` - No current state.\n */\nexport type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | ''\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both'\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAExpanded = 'true' | 'false'\n\n/**\n * Valid values for `aria-haspopup`.\n */\nexport type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n  | 'alert'\n  | 'alertdialog'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'gridcell'\n  | 'link'\n  | 'log'\n  | 'marquee'\n  | 'menuitem'\n  | 'menuitemcheckbox'\n  | 'menuitemradio'\n  | 'option'\n  | 'progressbar'\n  | 'radio'\n  | 'scrollbar'\n  | 'searchbox'\n  | 'slider'\n  | 'spinbutton'\n  | 'status'\n  | 'switch'\n  | 'tab'\n  | 'tabpanel'\n  | 'textbox'\n  | 'timer'\n  | 'tooltip'\n  | 'treeitem'\n  | 'combobox'\n  | 'grid'\n  | 'listbox'\n  | 'menu'\n  | 'menubar'\n  | 'radiogroup'\n  | 'tablist'\n  | 'tree'\n  | 'treegrid'\n  | 'application'\n  | 'article'\n  | 'cell'\n  | 'columnheader'\n  | 'definition'\n  | 'directory'\n  | 'document'\n  | 'feed'\n  | 'figure'\n  | 'group'\n  | 'heading'\n  | 'img'\n  | 'list'\n  | 'listitem'\n  | 'math'\n  | 'none'\n  | 'note'\n  | 'presentation'\n  | 'region'\n  | 'row'\n  | 'rowgroup'\n  | 'rowheader'\n  | 'separator'\n  | 'table'\n  | 'term'\n  | 'text'\n  | 'toolbar'\n  | 'banner'\n  | 'complementary'\n  | 'contentinfo'\n  | 'form'\n  | 'main'\n  | 'navigation'\n  | 'region'\n  | 'search'\n  | 'doc-abstract'\n  | 'doc-acknowledgments'\n  | 'doc-afterword'\n  | 'doc-appendix'\n  | 'doc-backlink'\n  | 'doc-biblioentry'\n  | 'doc-bibliography'\n  | 'doc-biblioref'\n  | 'doc-chapter'\n  | 'doc-colophon'\n  | 'doc-conclusion'\n  | 'doc-cover'\n  | 'doc-credit'\n  | 'doc-credits'\n  | 'doc-dedication'\n  | 'doc-endnote'\n  | 'doc-endnotes'\n  | 'doc-epigraph'\n  | 'doc-epilogue'\n  | 'doc-errata'\n  | 'doc-example'\n  | 'doc-footnote'\n  | 'doc-foreword'\n  | 'doc-glossary'\n  | 'doc-glossref'\n  | 'doc-index'\n  | 'doc-introduction'\n  | 'doc-noteref'\n  | 'doc-notice'\n  | 'doc-pagebreak'\n  | 'doc-pagelist'\n  | 'doc-part'\n  | 'doc-preface'\n  | 'doc-prologue'\n  | 'doc-pullquote'\n  | 'doc-qna'\n  | 'doc-subtitle'\n  | 'doc-tip'\n  | 'doc-toc'\n"]}

package/build/src/types/role.d.ts

@@ -1,17 +1,2 @@
-/**
- * Valid values for `aria-expanded`.
- */
-export type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both';
-/**
- * Valid values for `aria-expanded`.
- */
-export type ARIAExpanded = 'true' | 'false';
-/**
- * Valid values for `aria-haspopup`.
- */
-export type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
-/**
- * Valid values for `role`.
- */
-export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
+export { ARIAAutoComplete, ARIAExpanded, ARIAHasPopup, ARIARole } from './aria.js';
 //# sourceMappingURL=role.d.ts.map

package/build/src/types/role.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"role.d.ts","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAElE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAA;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,UAAU,GACV,MAAM,GACN,KAAK,GACL,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,eAAe,GACf,QAAQ,GACR,aAAa,GACb,OAAO,GACP,WAAW,GACX,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,UAAU,GACV,aAAa,GACb,SAAS,GACT,MAAM,GACN,cAAc,GACd,YAAY,GACZ,WAAW,GACX,UAAU,GACV,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,KAAK,GACL,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,QAAQ,GACR,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,GACR,eAAe,GACf,aAAa,GACb,MAAM,GACN,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,eAAe,GACf,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,eAAe,GACf,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,WAAW,GACX,YAAY,GACZ,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,GACd,eAAe,GACf,SAAS,GACT,cAAc,GACd,SAAS,GACT,SAAS,CAAA"}
+{"version":3,"file":"role.d.ts","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA"}

package/build/src/types/role.js.map

@@ -1 +1 @@
-{"version":3,"file":"role.js","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both'\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAExpanded = 'true' | 'false'\n\n/**\n * Valid values for `aria-haspopup`.\n */\nexport type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n  | 'alert'\n  | 'alertdialog'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'gridcell'\n  | 'link'\n  | 'log'\n  | 'marquee'\n  | 'menuitem'\n  | 'menuitemcheckbox'\n  | 'menuitemradio'\n  | 'option'\n  | 'progressbar'\n  | 'radio'\n  | 'scrollbar'\n  | 'searchbox'\n  | 'slider'\n  | 'spinbutton'\n  | 'status'\n  | 'switch'\n  | 'tab'\n  | 'tabpanel'\n  | 'textbox'\n  | 'timer'\n  | 'tooltip'\n  | 'treeitem'\n  | 'combobox'\n  | 'grid'\n  | 'listbox'\n  | 'menu'\n  | 'menubar'\n  | 'radiogroup'\n  | 'tablist'\n  | 'tree'\n  | 'treegrid'\n  | 'application'\n  | 'article'\n  | 'cell'\n  | 'columnheader'\n  | 'definition'\n  | 'directory'\n  | 'document'\n  | 'feed'\n  | 'figure'\n  | 'group'\n  | 'heading'\n  | 'img'\n  | 'list'\n  | 'listitem'\n  | 'math'\n  | 'none'\n  | 'note'\n  | 'presentation'\n  | 'region'\n  | 'row'\n  | 'rowgroup'\n  | 'rowheader'\n  | 'separator'\n  | 'table'\n  | 'term'\n  | 'text'\n  | 'toolbar'\n  | 'banner'\n  | 'complementary'\n  | 'contentinfo'\n  | 'form'\n  | 'main'\n  | 'navigation'\n  | 'region'\n  | 'search'\n  | 'doc-abstract'\n  | 'doc-acknowledgments'\n  | 'doc-afterword'\n  | 'doc-appendix'\n  | 'doc-backlink'\n  | 'doc-biblioentry'\n  | 'doc-bibliography'\n  | 'doc-biblioref'\n  | 'doc-chapter'\n  | 'doc-colophon'\n  | 'doc-conclusion'\n  | 'doc-cover'\n  | 'doc-credit'\n  | 'doc-credits'\n  | 'doc-dedication'\n  | 'doc-endnote'\n  | 'doc-endnotes'\n  | 'doc-epigraph'\n  | 'doc-epilogue'\n  | 'doc-errata'\n  | 'doc-example'\n  | 'doc-footnote'\n  | 'doc-foreword'\n  | 'doc-glossary'\n  | 'doc-glossref'\n  | 'doc-index'\n  | 'doc-introduction'\n  | 'doc-noteref'\n  | 'doc-notice'\n  | 'doc-pagebreak'\n  | 'doc-pagelist'\n  | 'doc-part'\n  | 'doc-preface'\n  | 'doc-prologue'\n  | 'doc-pullquote'\n  | 'doc-qna'\n  | 'doc-subtitle'\n  | 'doc-tip'\n  | 'doc-toc'\n"]}
+{"version":3,"file":"role.js","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"","sourcesContent":["export { ARIAAutoComplete, ARIAExpanded, ARIAHasPopup, ARIARole } from './aria.js'\n"]}

package/build/test/elements/navigation/Navigation.test.d.ts

@@ -0,0 +1,3 @@
+import '../../../src/elements/navigation/ui-navigation.js';
+import '../../../src/elements/navigation/ui-navigation-item.js';
+//# sourceMappingURL=Navigation.test.d.ts.map

package/build/test/elements/navigation/Navigation.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.test.d.ts","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"AAEA,OAAO,mDAAmD,CAAA;AAC1D,OAAO,wDAAwD,CAAA"}

package/build/test/elements/navigation/Navigation.test.js

@@ -0,0 +1,113 @@
+import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing';
+import '../../../src/elements/navigation/ui-navigation.js';
+import '../../../src/elements/navigation/ui-navigation-item.js';
+describe('Navigation', () => {
+    it('renders with slot content', async () => {
+        const el = await fixture(html `
+      <ui-navigation aria-label="Main navigation">
+        <ui-navigation-item selected aria-current="page">Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+        <ui-navigation-item>Files</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const nav = el.shadowRoot.querySelector('nav');
+        assert.ok(nav, 'nav element is rendered');
+        assert.equal(nav?.getAttribute('aria-label'), 'Main navigation');
+        const items = el._items;
+        assert.equal(items.length, 3);
+        assert.isTrue(items[0].selected);
+        assert.equal(items[0].getAttribute('aria-current'), 'page');
+    });
+    it('sets correct tabindex for items', async () => {
+        const el = await fixture(html `
+      <ui-navigation>
+        <ui-navigation-item selected>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const items = el._items;
+        assert.equal(items[0].getAttribute('tabindex'), '0');
+        assert.equal(items[1].getAttribute('tabindex'), '-1');
+    });
+    it('selects item on click and fires select event', async () => {
+        const el = await fixture(html `
+      <ui-navigation>
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const items = el._items;
+        setTimeout(() => items[1].click());
+        const ev = await oneEvent(el, 'select');
+        assert.equal(ev.detail.item, items[1]);
+        assert.isTrue(items[1].selected);
+        assert.equal(items[1].getAttribute('tabindex'), '0');
+        assert.isFalse(items[0].selected);
+        assert.equal(items[0].getAttribute('tabindex'), '-1');
+    });
+    it('handles keyboard navigation (vertical)', async () => {
+        const el = await fixture(html `
+      <ui-navigation>
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+        <ui-navigation-item>Files</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const items = el._items;
+        items[0].focus();
+        // ArrowDown moves to next
+        items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await aTimeout(0);
+        assert.dom.equal(document.activeElement, items[1]);
+        // ArrowUp wraps to last
+        items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+        await aTimeout(0);
+        assert.dom.equal(document.activeElement, items[0]);
+    });
+    it('handles keyboard navigation (horizontal)', async () => {
+        const el = await fixture(html `
+      <ui-navigation orientation="horizontal">
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const items = el._items;
+        items[0].focus();
+        items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+        await aTimeout(0);
+        assert.dom.equal(document.activeElement, items[1]);
+        items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+        await aTimeout(0);
+        assert.dom.equal(document.activeElement, items[0]);
+    });
+    it('skips disabled items in navigation', async () => {
+        const el = await fixture(html `
+      <ui-navigation>
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item disabled>Search</ui-navigation-item>
+        <ui-navigation-item>Files</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const items = el._items;
+        items[0].focus();
+        items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await aTimeout(0);
+        // Should skip disabled and go to Files
+        assert.dom.equal(document.activeElement, items[2]);
+    });
+    it('sets aria-current on selected item if current is set', async () => {
+        const el = await fixture(html `
+      <ui-navigation current="page">
+        <ui-navigation-item>Home</ui-navigation-item>
+        <ui-navigation-item>Search</ui-navigation-item>
+      </ui-navigation>
+    `);
+        const items = el._items;
+        // Simulate user selection by clicking the item (public API)
+        items[1].click();
+        await aTimeout(0);
+        assert.equal(items[1].getAttribute('aria-current'), 'page');
+        assert.isFalse(items[0].hasAttribute('aria-current'));
+    });
+});
+//# sourceMappingURL=Navigation.test.js.map

package/build/test/elements/navigation/Navigation.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.test.js","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing'\nimport type Navigation from '../../../src/elements/navigation/internals/Navigation.js'\nimport '../../../src/elements/navigation/ui-navigation.js'\nimport '../../../src/elements/navigation/ui-navigation-item.js'\n\ndescribe('Navigation', () => {\n  it('renders with slot content', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation aria-label=\"Main navigation\">\n        <ui-navigation-item selected aria-current=\"page\">Home</ui-navigation-item>\n        <ui-navigation-item>Search</ui-navigation-item>\n        <ui-navigation-item>Files</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const nav = el.shadowRoot!.querySelector('nav')\n    assert.ok(nav, 'nav element is rendered')\n    assert.equal(nav?.getAttribute('aria-label'), 'Main navigation')\n    const items = el._items\n    assert.equal(items.length, 3)\n    assert.isTrue(items[0].selected)\n    assert.equal(items[0].getAttribute('aria-current'), 'page')\n  })\n\n  it('sets correct tabindex for items', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation>\n        <ui-navigation-item selected>Home</ui-navigation-item>\n        <ui-navigation-item>Search</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const items = el._items\n    assert.equal(items[0].getAttribute('tabindex'), '0')\n    assert.equal(items[1].getAttribute('tabindex'), '-1')\n  })\n\n  it('selects item on click and fires select event', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation>\n        <ui-navigation-item>Home</ui-navigation-item>\n        <ui-navigation-item>Search</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const items = el._items\n    setTimeout(() => items[1].click())\n    const ev = await oneEvent(el, 'select')\n    assert.equal(ev.detail.item, items[1])\n    assert.isTrue(items[1].selected)\n    assert.equal(items[1].getAttribute('tabindex'), '0')\n    assert.isFalse(items[0].selected)\n    assert.equal(items[0].getAttribute('tabindex'), '-1')\n  })\n\n  it('handles keyboard navigation (vertical)', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation>\n        <ui-navigation-item>Home</ui-navigation-item>\n        <ui-navigation-item>Search</ui-navigation-item>\n        <ui-navigation-item>Files</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const items = el._items\n    items[0].focus()\n    // ArrowDown moves to next\n    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))\n    await aTimeout(0)\n    assert.dom.equal(document.activeElement, items[1])\n    // ArrowUp wraps to last\n    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))\n    await aTimeout(0)\n    assert.dom.equal(document.activeElement, items[0])\n  })\n\n  it('handles keyboard navigation (horizontal)', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation orientation=\"horizontal\">\n        <ui-navigation-item>Home</ui-navigation-item>\n        <ui-navigation-item>Search</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const items = el._items\n    items[0].focus()\n    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))\n    await aTimeout(0)\n    assert.dom.equal(document.activeElement, items[1])\n    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))\n    await aTimeout(0)\n    assert.dom.equal(document.activeElement, items[0])\n  })\n\n  it('skips disabled items in navigation', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation>\n        <ui-navigation-item>Home</ui-navigation-item>\n        <ui-navigation-item disabled>Search</ui-navigation-item>\n        <ui-navigation-item>Files</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const items = el._items\n    items[0].focus()\n    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))\n    await aTimeout(0)\n    // Should skip disabled and go to Files\n    assert.dom.equal(document.activeElement, items[2])\n  })\n\n  it('sets aria-current on selected item if current is set', async () => {\n    const el = await fixture<Navigation>(html`\n      <ui-navigation current=\"page\">\n        <ui-navigation-item>Home</ui-navigation-item>\n        <ui-navigation-item>Search</ui-navigation-item>\n      </ui-navigation>\n    `)\n    const items = el._items\n    // Simulate user selection by clicking the item (public API)\n    items[1].click()\n    await aTimeout(0)\n    assert.equal(items[1].getAttribute('aria-current'), 'page')\n    assert.isFalse(items[0].hasAttribute('aria-current'))\n  })\n})\n"]}

package/demo/elements/index.html

@@ -52,6 +52,8 @@
         <dt><a href="mention-textarea/index.html">Mention Textarea</a></dt>
         <dd>The mention-textarea component.</dd>
 
+        <dt><a href="navigation/navigation.html">Navigation Menu</a></dt>
+        <dd>The navigation component.</dd>
         <dt><a href="navigation/navigation-item.html">Navigation Item</a></dt>
         <dd>The navigation-item component.</dd>
 

package/demo/elements/navigation/navigation.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Navigation item Demo</title>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet"
+  />
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../page.css" rel="stylesheet" type="text/css" />
+</head>
+<body data-gr-ext-disabled="next">
+  <div id="app"></div>
+  <script type="module" src="/.tmp/demo/elements/navigation/navigation.js"></script>
+</body>
+</html>

package/demo/elements/navigation/navigation.ts

@@ -0,0 +1,45 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import { reactive } from '../../../src/decorators/index.js'
+
+import '../../../src/elements/navigation/ui-navigation-item.js'
+import '../../../src/elements/navigation/ui-navigation.js'
+import '../../../src/md/icons/ui-icon.js'
+import '../../../src/md/checkbox/ui-checkbox.js'
+
+class ComponentDemoPage extends DemoPage {
+  @reactive()
+  protected accessor selected = false
+
+  constructor() {
+    super()
+    this.componentName = '<ui-navigation>'
+  }
+
+  override contentTemplate(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <ui-navigation aria-label="Main navigation" current="page">
+          <ui-navigation-item selected aria-current="page">
+            <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" aria-label="Settings">
+            <span slot="icon" aria-hidden="true">⚙️</span>
+          </ui-navigation-item>
+        </ui-navigation>
+      </section>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.31",
+  "version": "0.5.33",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/core/renderer/ApplicationRenderer.ts

@@ -1,7 +1,7 @@
-import { nothing, render, type RootPart, type TemplateResult } from 'lit'
+import { nothing, type TemplateResult } from 'lit'
 import type { Application } from '../Application.js'
 import type { Activity } from '../Activity.js'
-import { Renderer, renderFn } from './Renderer.js'
+import { Renderer } from './Renderer.js'
 import { ModalActivity } from '../ModalActivity.js'
 
 export class ApplicationRenderer extends Renderer {
@@ -12,46 +12,42 @@ export class ApplicationRenderer extends Renderer {
     this.renderedFirst = new WeakMap()
   }
 
-  [renderFn](): void {
-    const { app, renderRoot } = this
-    let host: Application | Activity
-    let root: HTMLElement | null = renderRoot
-    let content: TemplateResult | typeof nothing
-    const activity = app.manager.getTopActivity()
-    if (activity) {
-      host = activity
-      if (activity.renderRoot) {
-        root = activity.renderRoot
-      }
-      if (activity instanceof ModalActivity) {
-        content = activity.renderDialog()
-      } else {
-        content = activity.render()
+  private _handleFirstRender(target: Application | Activity, clearRoot: boolean, root: HTMLElement): void {
+    if (!this.renderedFirst.has(target)) {
+      this.renderedFirst.set(target, true)
+      if (clearRoot) {
+        this._clearRoot(root)
       }
+      queueMicrotask(() => target.onFirstRender())
+    }
+  }
+
+  protected renderer(): void {
+    const { app, renderRoot: defaultRenderRoot } = this
+    const activity = app.manager.getTopActivity()
+
+    const host: Application | Activity = activity || app
+    const root: HTMLElement | null = activity?.renderRoot || defaultRenderRoot
+
+    let content: TemplateResult | typeof nothing
+    if (activity instanceof ModalActivity) {
+      content = activity.renderDialog()
     } else {
-      host = app
-      content = app.render()
+      content = host.render()
     }
     if (!root) {
       // eslint-disable-next-line no-console
       console.warn(`The "renderRoot" is not set up.`)
       return
     }
-    if (!this.renderedFirst.has(app)) {
-      this.renderedFirst.set(app, true)
-      Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node))
-      setTimeout(() => app.onFirstRender())
-    }
-    // host might !== app
-    if (!this.renderedFirst.has(host)) {
-      setTimeout(() => host.onFirstRender())
+    this._handleFirstRender(app, true, root)
+    if (!this.firstRendered) {
+      this.firstRenderedFlag = true
     }
-    const litPart = root as HTMLElement & { _$litPart$?: RootPart }
-    if (litPart._$litPart$ && litPart._$litPart$.options) {
-      litPart._$litPart$.options.host = host
+    if (host !== app) {
+      this._handleFirstRender(host, false, root)
     }
-    render(content, root, { host })
-    this.resolveUpdatePromise()
+    this._render(content, root, host)
     this.app.onRendered()
   }
 }

package/src/core/renderer/FragmentRenderer.ts

@@ -1,33 +1,24 @@
-import { render, RenderOptions, RootPart } from 'lit'
 import type { Fragment } from '../Fragment.js'
-import { Renderer, renderFn } from './Renderer.js'
+import { Renderer } from './Renderer.js'
 
 export class FragmentRenderer extends Renderer {
   constructor(protected fragment: Fragment) {
     super()
   }
 
-  [renderFn](): void {
+  protected renderer(): void {
     const root = this.renderRoot
     if (!root) {
       // return quietly. Fragments can be rendered directly.
       return
     }
-    const fragment = this.fragment
-    const host = fragment.getSingleVisibleFragment() || fragment
+    const host = this.fragment.getSingleVisibleFragment() ?? this.fragment
     if (!this.firstRendered) {
       this.firstRenderedFlag = true
       // cleanup any pre-existing content.
-      Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node))
-      setTimeout(() => host.onFirstRender())
+      this._clearRoot(root)
+      queueMicrotask(() => host.onFirstRender())
     }
-    const litPart = root as unknown as HTMLElement & { _$litPart$?: RootPart }
-    if (litPart._$litPart$) {
-      ;(litPart._$litPart$.options as RenderOptions).host = host
-    }
-    // console.log(host, root)
-    render(host.render(), root, { host })
-    this.resolveUpdatePromise()
-    // this.app.onRendered()
+    this._render(host.render(), root, host)
   }
 }

package/src/core/renderer/Renderer.ts

@@ -1,10 +1,10 @@
+import { render, type RootPart, type TemplateResult, type nothing } from 'lit'
+
 export enum RenderingState {
   Idle,
   Rendering,
 }
 
-export const renderFn = Symbol('renderFn')
-
 /**
  * A class that manages rendering of the application screen.
  */
@@ -22,8 +22,10 @@ export abstract class Renderer {
   }
 
   /**
-   * Sets the root element where the application will be rendered.
-   * @param renderRoot The root element or its selector.
+   * Sets the root element where the application or activity will be rendered.
+   *
+   * @param renderRoot - The root element or a CSS selector string for the element.
+   * If a string is provided, it will be queried from the document.
    */
   setRenderRoot(renderRoot: HTMLElement | string): void {
     if (typeof renderRoot === 'string') {
@@ -34,8 +36,10 @@ export abstract class Renderer {
   }
 
   /**
-   * Requests an update of the application UI. This will call the `render()` method
-   * and update the DOM.
+   * Requests an update of the UI. Schedules a render if one is not already pending.
+   *
+   * This will call the `renderer()` method and update the DOM in the next animation frame.
+   * Ensures only one render is scheduled at a time.
    */
   requestUpdate(): void {
     if (this.#renderingState !== RenderingState.Idle) {
@@ -47,7 +51,7 @@ export abstract class Renderer {
       this.#setUpdatePromise()
     }
     requestAnimationFrame(() => {
-      this[renderFn]()
+      this.renderer()
       this.#renderingState = RenderingState.Idle
     })
   }
@@ -55,8 +59,7 @@ export abstract class Renderer {
   protected firstRenderedFlag = false
 
   /**
-   * Determines whether the initial render had run and the `onFirstRender()`
-   * function was called.
+   * Indicates whether the initial render has occurred and `onFirstRender()` was called.
    */
   get firstRendered(): boolean {
     return this.firstRenderedFlag
@@ -67,6 +70,15 @@ export abstract class Renderer {
    */
   #renderingState = RenderingState.Idle
 
+  /**
+   * Returns the current rendering state.
+   *
+   * @returns The current rendering state.
+   */
+  get state(): RenderingState {
+    return this.#renderingState
+  }
+
   /**
    * A flag that helps to determine whether the `updateComplete` is setup.
    */
@@ -80,13 +92,19 @@ export abstract class Renderer {
   /**
    * The resolver to call when the update completes.
    */
-  #updateResolver?: () => void;
+  #updateResolver?: () => void
 
   /**
-   * Manages the rendering of the UI.
+   * Abstract method that must be implemented by subclasses to perform the actual rendering logic.
+   *
+   * Called by `requestUpdate()` when a render is scheduled.
    */
-  abstract [renderFn](): void
+  protected abstract renderer(): void
 
+  /**
+   * Sets up the promise that will be resolved when the next render completes.
+   * Used for tracking asynchronous rendering.
+   */
   #setUpdatePromise(): void {
     this.#updateComplete = new Promise<void>((resolve) => {
       this.#updateResolver = resolve
@@ -94,6 +112,9 @@ export abstract class Renderer {
     })
   }
 
+  /**
+   * Resolves the update promise if one is pending, indicating that rendering has finished.
+   */
   protected resolveUpdatePromise(): void {
     if (!this.#hasPendingUpdatePromise) {
       return
@@ -104,4 +125,31 @@ export abstract class Renderer {
       resolver()
     }
   }
+
+  /**
+   * Renders the given Lit template into the specified root element, setting the host context.
+   *
+   * @param content - The Lit template or `nothing` to render.
+   * @param root - The root HTMLElement to render into.
+   * @param host - The host object for Lit's context (usually the Application or Activity).
+   */
+  protected _render(content: TemplateResult | typeof nothing, root: HTMLElement, host: object): void {
+    const litPart = root as HTMLElement & { _$litPart$?: RootPart }
+    if (litPart._$litPart$ && litPart._$litPart$.options) {
+      litPart._$litPart$.options.host = host
+    }
+    render(content, root, { host })
+    this.resolveUpdatePromise()
+  }
+
+  /**
+   * Removes all child nodes from the given root element.
+   *
+   * Uses `replaceChildren()` for efficient DOM cleanup.
+   * @param root - The root HTMLElement to clear.
+   */
+  protected _clearRoot(root: HTMLElement): void {
+    // Using replaceChildren() is a modern and clean way to clear a node's children.
+    root.replaceChildren()
+  }
 }

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

@@ -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;
+  }
+`