@swiftwc/ui 0.0.0-dev.49 → 0.0.0-dev.50

package/generated/client/index.js

@@ -113,6 +113,8 @@ const handleHelp = ({ target, relatedTarget }) => {
     const trigger = target.closest('[help]');
     if (!trigger)
         return;
+    if ('PICKER-VIEW' === trigger.tagName)
+        return;
     if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
         return;
     const newAnchorName = `--help-${self.crypto.randomUUID()}`;
@@ -130,6 +132,8 @@ const handleHelp = ({ target, relatedTarget }) => {
     const trigger = target.closest('[help]');
     if (!trigger)
         return;
+    if ('PICKER-VIEW' === trigger.tagName)
+        return;
     if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
         return;
     const anchorName = trigger.style.anchorName;

package/generated/components/date-picker.js

@@ -412,13 +412,13 @@ export class DatePicker extends FormAssociatedBase {
             for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
                 if (!el.matches('option'))
                     continue;
-                const option = el;
-                if (`${kebabCase(key)}` === option.value) {
-                    message = option.label;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
                     break;
                 }
-                else if (`${kebabCase(key)}:${message}` === option.value) {
-                    message = option.label;
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
                     break;
                 }
             }

package/generated/components/label-view.js

@@ -19,6 +19,7 @@ export class LabelView extends HTMLElement {
         ));
     }
     #shadowRoot;
+    // #reflectScheduled = false
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
@@ -29,6 +30,7 @@ export class LabelView extends HTMLElement {
             console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
+        // this.#scheduleReflect()
         switch (name) {
             case 'system-image':
                 renderLabelIcon(this, newValue);

package/generated/components/picker-view.d.ts

@@ -10,6 +10,7 @@ export declare class PickerView extends FormAssociatedBase {
         SELECTION: string;
         SEARCHABLE: string;
         CURRENT_VALUE_LABEL: string;
+        TRIGGER_HELP: string;
     };
     static get observedAttributes(): string[];
     get selection(): string;

package/generated/components/picker-view.js

@@ -78,6 +78,7 @@ export class PickerView extends FormAssociatedBase {
             SELECTION: 'selection',
             SEARCHABLE: 'searchable',
             CURRENT_VALUE_LABEL: 'current-value-label',
+            TRIGGER_HELP: 'help',
         };
     }
     static get observedAttributes() {
@@ -157,9 +158,9 @@ export class PickerView extends FormAssociatedBase {
                     break;
                 }
                 default: {
-                    const btn = $(`<button type="button" tabindex="0"><label-view></label-view></button>`, '>1'), label = btn.querySelector(':scope>label-view');
-                    if (el.dataset.label)
-                        label?.setAttribute('title', el.dataset.label);
+                    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)');
+                    if (label && el.dataset.label)
+                        renderLabelTitle(label, el.dataset.label); //label?.setAttribute('title', el.dataset.label)
                     btn.addEventListener('click', async (evt) => {
                         evt.stopImmediatePropagation();
                         evt.preventDefault();
@@ -233,6 +234,8 @@ export class PickerView extends FormAssociatedBase {
                     renderLabelIcon(currentValueLabel, 'dots-three'); // overwritten
                     renderLabelTitle(currentValueLabel, this.#currentValueLabel); // overwritten
                 }
+                if (this.hasAttribute('help'))
+                    currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
                 _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
                 break;
             }
@@ -248,8 +251,9 @@ export class PickerView extends FormAssociatedBase {
                         el.remove();
                 const value = this.getAttribute(this.constructor.ATTR.LABEL);
                 if (value) {
-                    const label = $(`<label-view></label-view>`, '>1');
-                    label.setAttribute('title', value);
+                    const label = $(`<label-view><span></span></label-view>`, '>1');
+                    if (label)
+                        renderLabelTitle(label, value); //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', label);
                 }
                 _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [])].filter((el) => el.matches('option')), section);
@@ -408,6 +412,10 @@ export class PickerView extends FormAssociatedBase {
                 // if (oldValue === newValue) break
                 this.#reflectCurrentValueLabel();
                 break;
+            case this.constructor.ATTR.TRIGGER_HELP:
+                // if (oldValue === newValue) break
+                this.#reflectTriggerHelp();
+                break;
             case this.constructor.ATTR.SELECTION:
                 // nothing happens
                 break;
@@ -562,19 +570,20 @@ export class PickerView extends FormAssociatedBase {
         btn.setAttribute('value', extractTagFromOption(node));
         // if (selection !== btn.getAttribute('value')) chevron?.style.setProperty('visibility', 'hidden')
         const label = $(`<label-view><span></span></label-view>`, '>1');
-        label.querySelector('span').textContent = extractCurrentValueFromOption(node); //label.setAttribute('title', extractCurrentValueFromOption(node))
+        renderLabelTitle(label, extractCurrentValueFromOption(node)); // label.querySelector('span')!.textContent = extractCurrentValueFromOption(node) //label.setAttribute('title', extractCurrentValueFromOption(node))
         hStack?.appendChild(label);
         return btn;
     }
     static #wrapOptgroupTag(node) {
         if (devFlags.debug)
             console.debug(`${_a.name} #wrapOptgroupTag`);
-        const labelT = `<label-view></label-view>`, summaryT = `<summary>${labelT}</summary>`;
-        const group = $(`<details is="disclosure-group">${summaryT}</details>`, '>1'), summary = group.querySelector(':scope>summary') ?? group.appendChild($(summaryT, '>1')), summaryLabel = summary.querySelector(':scope>label-view') ?? summary.appendChild($(labelT, '>1'));
-        if (node.hasAttribute('label'))
-            summaryLabel.setAttribute('title', node.getAttribute('label') ?? '');
-        if (node.hasAttribute('data-system-image'))
-            summaryLabel.setAttribute('system-image', node.getAttribute('data-system-image') ?? '');
+        const labelT = `<label-view><span></span></label-view>`, summaryT = `<summary><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>${labelT}</h-stack></summary>`;
+        const group = $(`<details is="disclosure-group">${summaryT}</details>`, '>1'), hStack = group.querySelector(':scope>summary>h-stack'); // ?? group.appendChild($(summaryT, '>1'))
+        //   summaryLabel = summary.querySelector(':scope>label-view') ?? summary.appendChild($(labelT, '>1'))
+        // if (node.hasAttribute('label')) summaryLabel.setAttribute('title', node.getAttribute('label') ?? '')
+        // if (node.hasAttribute('data-system-image')) summaryLabel.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
+        if (hStack)
+            renderLabel(hStack, ':scope>label-view:nth-child(2)', labelT, node.getAttribute('label'), node.getAttribute('data-system-image'));
         return group;
     }
     static #reflectButtons(nodes, container) {
@@ -583,11 +592,11 @@ export class PickerView extends FormAssociatedBase {
         for (const node of nodes)
             switch (node.tagName) {
                 case 'DATALIST': {
-                    const group = $(`<menu-view tabindex="0"></menu-view>`, '>1'), label = group.querySelector(':scope>label-view[slot=label]') ?? group.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-                    if (node.hasAttribute('data-label'))
-                        label.setAttribute('title', node.getAttribute('data-label') ?? '');
-                    if (node.hasAttribute('data-system-image'))
-                        label.setAttribute('system-image', node.getAttribute('data-system-image') ?? '');
+                    const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
+                    // label = group.querySelector(':scope>label-view[slot=label]') ?? group.appendChild($(`<label-view slot="label"></label-view>`, '>1'))
+                    // if (node.hasAttribute('data-label')) label.setAttribute('title', node.getAttribute('data-label') ?? '')
+                    // if (node.hasAttribute('data-system-image')) label.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
+                    renderLabel(group, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, node.getAttribute('data-label'), node.getAttribute('data-system-image'));
                     _a.#reflectButtons([...node.children], group);
                     container.appendChild(group);
                     break;
@@ -672,6 +681,28 @@ export class PickerView extends FormAssociatedBase {
             }
         }
     }
+    #reflectTriggerHelp() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} #reflectTriggerHelp`);
+        let trigger;
+        switch (this.pickerStyle) {
+            case 'sheet':
+            case 'navigation-link': {
+                trigger = this.querySelector(':scope>label-view:not([slot])') ?? undefined;
+            }
+            case 'menu': {
+                trigger = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]') ?? undefined;
+            }
+            case 'inline':
+            default: {
+                //udnefined
+            }
+        }
+        if (this.hasAttribute('help'))
+            trigger?.setAttribute('help', this.getAttribute('help') ?? '');
+        else
+            trigger?.removeAttribute('help');
+    }
     // Optional: form participation properties
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
@@ -686,13 +717,13 @@ export class PickerView extends FormAssociatedBase {
             for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
                 if (!el.matches('option'))
                     continue;
-                const option = el;
-                if (`${kebabCase(key)}` === option.value) {
-                    message = option.label;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
                     break;
                 }
-                else if (`${kebabCase(key)}:${message}` === option.value) {
-                    message = option.label;
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
                     break;
                 }
             }

package/generated/components/text-field.js

@@ -451,13 +451,13 @@ export class TextField extends FormAssociatedBase {
             for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
                 if (!el.matches('option'))
                     continue;
-                const option = el;
-                if (`${kebabCase(key)}` === option.value) {
-                    message = option.label;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
                     break;
                 }
-                else if (`${kebabCase(key)}:${message}` === option.value) {
-                    message = option.label;
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
                     break;
                 }
             }

package/generated/css/index.css

@@ -1054,6 +1054,10 @@
     --toolbar-cell-filter: blur(10px);
     --toolbar-cell-opacity: 0;
   }
+  :where(:is(navigation-stack, dialog, body-view):has(> body-view > body-view) > scroll-view,
+  :is(navigation-stack, dialog, body-view):has(> body-view > body-view) > tool-bar) {
+    content-visibility: hidden;
+  }
 }
 @layer sw-components {
   :where(navigation-stack:not([hidden]),
@@ -1348,6 +1352,7 @@
     }
   }
 }
+@layer sw-components {}
 @layer sw-components {
   :where(h-divider) {
     inline-size: 100%;
@@ -1701,6 +1706,11 @@
     place-items: center;
     text-align: center;
     row-gap: 1rem;
+    padding-inline: 1rem;
+    padding-block: 1rem;
+  }
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack), :where(content-unavailable-view)::part(content-unavailable-title-stack), :where(content-unavailable-view)::part(content-unavailable-description-stack) {
+    max-inline-size: 20rem;
   }
   :where(content-unavailable-view)::part(content-unavailable-actions-stack) {
     row-gap: 0.2rem;
@@ -1760,6 +1770,14 @@
     gap: 1rem;
     --confirmation--dialog-scale: scale(0.7);
     --confirmation--dialog-opacity: 0.8;
+    --confirmation--inner-scale: scale3d(1, 1, 1);
+  }
+  :where([is=confirmation-dialog] > *) {
+    transform: var(--confirmation--inner-scale, );
+    transform-origin: top;
+  }
+  :where([is=confirmation-dialog] > :nth-child(1)) {
+    transform-origin: bottom;
   }
   :where([is=confirmation-dialog][open]) {
     --confirmation--dialog-inline-size: min(20rem, 80vw);
@@ -1769,11 +1787,13 @@
     --confirmation--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
     --confirmation--dialog-scale: scale(1);
     --confirmation--dialog-opacity: 1;
+    --confirmation--inner-scale: scale3d(1, 1, 1);
   }
   @starting-style {
     :where([is=confirmation-dialog][open]) {
       --confirmation--dialog-scale: scale(0.7);
       --confirmation--dialog-opacity: 0.8;
+      --confirmation--inner-scale: scale3d(0, 0, 1);
     }
   }
   :where([is=confirmation-dialog][closing]) {
@@ -1782,6 +1802,7 @@
     --confirmation--dialog-max-block-size: anchor-size();
     --confirmation--dialog-scale: scale(0.7);
     --confirmation--dialog-opacity: 0;
+    --confirmation--inner-scale: scale3d(0, 0, 1);
   }
 }
 @layer sw-components {
@@ -2522,6 +2543,8 @@
     box-shadow: var(--menu-popover-box-shadow, );
     border-radius: var(--pill-border-radius);
     padding-inline: 1rem;
+    appearance: none;
+    outline: none;
   }
 }
 @layer sw-components {
@@ -2631,7 +2654,6 @@
     -webkit-box-orient: var(--label--box-orient, );
     line-clamp: var(--label--line-clamp, );
     -webkit-line-clamp: var(--label--line-clamp, );
-    text-decoration: underline;
     font-size: var(--label--titlestack-font-size, );
     line-height: var(--label--titlestack-line-height, );
     font-weight: var(--label--titlestack-font-weight, );
@@ -7152,6 +7174,10 @@
     :where([is=confirmation-dialog]) {
       transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
     }
+    :where([is=confirmation-dialog] > *) {
+      transition: transform var(--touchglass-transition-duration) allow-discrete ease-out;
+      will-change: transform;
+    }
   }
 }
 @layer sw-transitions {
@@ -8262,13 +8288,13 @@
   :where(tool-bar-item[tint]:not(tool-bar-item-group tool-bar-item),
   tool-bar-item-group[tint],
   tool-bar-item-group[tint] > tool-bar-item:not([tint])) > button {
-    --secondary: var(--btntext);
-    --blue: var(--btntext);
-    --red: var(--btntext);
-    --green: var(--btntext);
-    --orange: var(--btntext);
-    --accentColor: var(--btntext);
-    --accentColorEffective: var(--btntext);
+    --secondary: var(--toolbaritemtext);
+    --blue: var(--toolbaritemtext);
+    --red: var(--toolbaritemtext);
+    --green: var(--toolbaritemtext);
+    --orange: var(--toolbaritemtext);
+    --accentColor: var(--toolbaritemtext);
+    --accentColorEffective: var(--toolbaritemtext);
   }
   :where(sidebar-toggle) {
     --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));

package/package.json

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

package/scss/_components.scss

@@ -4,6 +4,8 @@
 
 @forward 'components/disclosure-group';
 
+@forward 'components/image-view';
+
 @forward 'components/h-divider';
 @forward 'components/v-divider';
 

package/scss/base/_layout.scss

@@ -52,4 +52,13 @@
       }
     }
   }
+
+  :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+    > scroll-view,
+    > tool-bar {
+      :where(&) {
+        content-visibility: hidden;
+      }
+    }
+  }
 }

package/scss/colors/_index.scss

@@ -636,7 +636,7 @@ $colors: map.merge(
       @include mixins.wire-tinted-glass(toolbaritem);
 
       > button {
-        @include mixins.takeover-color-vars(btn);
+        @include mixins.takeover-color-vars(toolbaritem);
         // --secondary: var(--btntext);
         // --blue: var(--btntext);
 

package/scss/components/_confirmation-dialog.scss

@@ -45,6 +45,18 @@
       // finally
       --confirmation--dialog-scale: scale(0.7);
       --confirmation--dialog-opacity: 0.8;
+
+      --confirmation--inner-scale: scale3d(1, 1, 1);
+    }
+
+    :where(& > *) {
+      transform: var(--confirmation--inner-scale,);
+
+      transform-origin: top;
+    }
+
+    :where(& > :nth-child(1)) {
+      transform-origin: bottom;
     }
 
     &[open] {
@@ -61,9 +73,13 @@
         --confirmation--dialog-scale: scale(1);
         --confirmation--dialog-opacity: 1;
 
+        --confirmation--inner-scale: scale3d(1, 1, 1);
+
         @starting-style {
           --confirmation--dialog-scale: scale(0.7);
           --confirmation--dialog-opacity: 0.8;
+
+          --confirmation--inner-scale: scale3d(0, 0, 1);
         }
       }
     }
@@ -78,6 +94,8 @@
 
         --confirmation--dialog-scale: scale(0.7);
         --confirmation--dialog-opacity: 0;
+
+        --confirmation--inner-scale: scale3d(0, 0, 1);
       }
     }
   }

package/scss/components/_content-unavailable-view.scss

@@ -11,6 +11,15 @@
 
       row-gap: 1rem;
 
+      padding-inline: 1rem;
+      padding-block: 1rem;
+
+      &::part(content-unavailable-actions-stack),
+      &::part(content-unavailable-title-stack),
+      &::part(content-unavailable-description-stack) {
+        max-inline-size: 20rem;
+      }
+
       &::part(content-unavailable-actions-stack) {
         row-gap: 0.2rem;
       }

package/scss/components/_label-view.scss

@@ -201,7 +201,7 @@ $label-line-ifs: (
         line-clamp: var(--label--line-clamp,);
         -webkit-line-clamp: var(--label--line-clamp,);
 
-        text-decoration: underline;
+        // text-decoration: underline;
 
         font-size: var(--label--titlestack-font-size,);
 

package/scss/components/_search-view.scss

@@ -13,6 +13,10 @@
       border-radius: var(--pill-border-radius);
 
       padding-inline: 1rem;
+
+      appearance: none;
+
+      outline: none;
     }
   }
 }

package/scss/transitions/_confirmation-dialog.scss

@@ -17,6 +17,11 @@
         transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
         // will-change: block-size, inline-size, transform, overlay, display;
       }
+
+      :where(& > *) {
+        transition: transform var(--touchglass-transition-duration) allow-discrete ease-out;
+        will-change: transform;
+      }
     }
   }
 }