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

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) => {

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.53",
   "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)
-    };
-}