@swiftwc/ui 0.0.0-dev.52 → 0.0.0-dev.54

package/generated/components/index.d.ts

@@ -17,7 +17,6 @@ export * from './label-view';
 export * from './list-view';
 export * from './menu-view';
 export * from './navigation-large-title';
-export * from './navigation-link';
 export * from './navigation-split-view';
 export * from './navigation-stack';
 export * from './navigation-title';

package/generated/components/index.js

@@ -17,7 +17,6 @@ export * from './label-view';
 export * from './list-view';
 export * from './menu-view';
 export * from './navigation-large-title';
-export * from './navigation-link';
 export * from './navigation-split-view';
 export * from './navigation-stack';
 export * from './navigation-title';

package/generated/components/picker-view.js

@@ -158,7 +158,7 @@ export class PickerView extends FormAssociatedBase {
                     break;
                 }
                 default: {
-                    const btn = $(`<button type="button" tabindex="0" is="navigation-link"><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></button>`, '>1'), label = btn.querySelector(':scope>h-stack>label-view:nth-child(2)');
+                    const btn = $(`<button type="button" tabindex="0" navigation-link><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></button>`, '>1'), label = btn.querySelector(':scope>h-stack>label-view:nth-child(2)');
                     if (label && el.dataset.label)
                         renderLabelTitle(label, el.dataset.label); //label?.setAttribute('title', el.dataset.label)
                     btn.addEventListener('click', async (evt) => {
@@ -634,13 +634,40 @@ export class PickerView extends FormAssociatedBase {
     #reflectSelectionOnButtons() {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectSelectionOnButtons`);
-        // walk all rendered buttons (inline has buttons in list, menu has buttons in menu-view)
-        for (const el of this.querySelectorAll('button[value]:not([slot])'))
-            el.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
-        // also sync the spawn (sheet/navigation) if open
-        if (this.#spawn)
-            for (const el of this.#spawn.querySelectorAll('list-view button[value]:not([slot])'))
+        const syncButtons = (root) => {
+            // 1. Sync plain value buttons (existing behavior)
+            for (const el of root.querySelectorAll('button[value]:not([slot])'))
                 el.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
+            // 2. Sync `details` (optgroups) — open/mark if any descendant option matches selection
+            for (const details of root.querySelectorAll('details[is="disclosure-group"]')) {
+                const hasSelectedDescendant = [...details.querySelectorAll('button[value]')].some((btn) => btn.getAttribute('value') === this.#selection);
+                // Show/hide the check on the summary's label-view
+                details.querySelector(':scope>summary label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
+            }
+            // 3. Sync nav-link buttons (those without `value` that spawn sub-pages)
+            //    These wrap <datalist> children — mark them if any descendant value matches
+            for (const btn of root.querySelectorAll('button[navigation-link]:not([value])')) {
+                // Find the matching datalist node by label
+                const btnLabel = btn.querySelector('label-view span')?.textContent?.trim();
+                const matchingDatalist = [...(this.#slots?.get('list')?.assignedElements() ?? [])]
+                    .flatMap((el) => [...el.querySelectorAll('datalist'), ...(el.tagName === 'DATALIST' ? [el] : [])])
+                    .find((dl) => dl.getAttribute('data-label') === btnLabel);
+                const hasSelectedDescendant = matchingDatalist ? [...matchingDatalist.querySelectorAll('option')].some((opt) => extractTagFromOption(opt) === this.#selection) : false;
+                btn.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
+            }
+        };
+        // Run on the host element (inline/menu styles)
+        syncButtons(this);
+        // Also sync the spawn if open (sheet/navigation-link styles)
+        if (this.#spawn)
+            syncButtons(this.#spawn);
+        // // walk all rendered buttons (inline has buttons in list, menu has buttons in menu-view)
+        // for (const el of this.querySelectorAll<HTMLButtonElement>('button[value]:not([slot])'))
+        //   el.querySelector<HTMLElement>('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden')
+        // // also sync the spawn (sheet/navigation) if open
+        // if (this.#spawn)
+        //   for (const el of this.#spawn.querySelectorAll<HTMLButtonElement>('list-view button[value]:not([slot])'))
+        //     el.querySelector<HTMLElement>('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden')
     }
     get #currentTag() {
         return this.#slots

package/generated/css/index.css

@@ -753,22 +753,22 @@
     --itemradiusbr: var(--list--item-border-radius,);
     --itemradiusbl: var(--list--adjacentitem-border-radius,);
   }
-  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link])) {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link])) {
     position: relative;
   }
-  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]))::after {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]))::after {
     pointer-events: none;
     content: "";
     -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
@@ -777,13 +777,13 @@
     aspect-ratio: 1;
     place-self: center;
   }
-  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
-  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]))::after {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]),
+  list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]))::after {
     position: absolute;
     inset: 50% var(--itempadiend) auto auto;
     display: var(--list--accessories-display, grid);
@@ -3701,7 +3701,7 @@
       --itemhighlightface: var(--accentColor3);
       --itemactiveface: var(--accentColor3);
     }
-    list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]:not([is=navigation-link]) {
+    list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]:not([navigation-link]) {
       --itemtext: var(--accentColor);
       --itemhighlighttext: var(--accentColor);
       --itemactivetext: var(--accentColor);
@@ -4074,7 +4074,7 @@
       --itemhighlightface: var(--accentColor3);
       --itemactiveface: var(--accentColor3);
     }
-    [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]:not([is=navigation-link]) {
+    [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]:not([navigation-link]) {
       --itemtext: var(--accentColor);
       --itemhighlighttext: var(--accentColor);
       --itemactivetext: var(--accentColor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.52",
+  "version": "0.0.0-dev.54",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/components/_form-view.scss

@@ -180,7 +180,7 @@ $form-elses: (
             --itemhighlightface: var(--accentColor3);
             --itemactiveface: var(--accentColor3);
           }
-          &:not([is='navigation-link']) {
+          &:not([navigation-link]) {
             --itemtext: var(--accentColor);
             --itemhighlighttext: var(--accentColor);
             --itemactivetext: var(--accentColor);

package/scss/components/_list-view.scss

@@ -181,7 +181,7 @@ $list-elses: (
             --itemhighlightface: var(--accentColor3);
             --itemactiveface: var(--accentColor3);
           }
-          &:not([is='navigation-link']) {
+          &:not([navigation-link]) {
             --itemtext: var(--accentColor);
             --itemhighlighttext: var(--accentColor);
             --itemactivetext: var(--accentColor);

package/scss/placeholders/_lists.scss

@@ -462,7 +462,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
     section-view > #{$list-item-selector},
     [is='disclosure-group'] > #{$list-item-selector} {
       // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
-      &:is(navigation-split-view button[is='navigation-link'], navigation-stack button[is='navigation-link']) {
+      &:is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]) {
         :where(&) {
           position: relative;
 

package/web-components.html-data/en.json

@@ -235,10 +235,6 @@
     {
       "name": "navigation-large-title"
     },
-    {
-      "name": "navigation-link",
-      "description": "A button that controls a navigation presentation."
-    },
     {
       "name": "navigation-split-view",
       "description": "A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section."

package/generated/components/navigation-link.d.ts

@@ -1,10 +0,0 @@
-import { ButtonBase } from '../namespace-browser/base';
-/**
- * @summary A button that controls a navigation presentation.
- */
-export declare class NavigationLink extends ButtonBase {
-    #private;
-    constructor();
-    static polyfillDisconnectedCallback(el: NavigationLink): void;
-    static polyfillConnectedCallback(el: NavigationLink): void;
-}

package/generated/components/navigation-link.js

@@ -1,25 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
-import { ButtonBase } from '../namespace-browser/base';
-/**
- * @summary A button that controls a navigation presentation.
- */
-export class NavigationLink extends ButtonBase {
-    constructor() {
-        super();
-    }
-    static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${NavigationLink.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(el);
-    }
-    static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${NavigationLink.name} ⚡️ connect`);
-        el.tabIndex = 0;
-        CleanupRegistry.register(el, onoff('click', NavigationLink.#handleClick, el).on());
-    }
-    static #handleClick = async (evt) => {
-        // alert(99)
-    };
-}