@swiftwc/ui 0.0.0-dev.62 → 0.0.0-dev.63

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

@@ -17,11 +17,13 @@ export declare class PickerView extends FormAssociatedBase {
     #private;
     static get ATTR(): {
         PLACEHOLDER: string;
+        PLACEHOLDER_ICON: string;
         LABEL: string;
         PICKER_STYLE: string;
         SELECTION: string;
         SEARCHABLE: string;
         CURRENT_VALUE_LABEL: string;
+        CURRENT_VALUE_ICON: string;
         TRIGGER_HELP: string;
         DICTIONARY: string;
     };

package/generated/components/picker-view.js

@@ -118,12 +118,14 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
 export class PickerView extends FormAssociatedBase {
     static get ATTR() {
         return {
-            PLACEHOLDER: 'placeholder',
+            PLACEHOLDER: 'prompt',
+            PLACEHOLDER_ICON: 'prompt-icon',
             LABEL: 'label',
             PICKER_STYLE: 'picker-style',
             SELECTION: 'selection',
             SEARCHABLE: 'searchable',
             CURRENT_VALUE_LABEL: 'current-value-label',
+            CURRENT_VALUE_ICON: 'current-value-icon',
             TRIGGER_HELP: 'help',
             DICTIONARY: 'dictionary',
         };
@@ -154,7 +156,7 @@ export class PickerView extends FormAssociatedBase {
     #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
         if (devFlags.debug)
             console.debug(`${_a.name} #spawnPage`);
-        const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="caret-left"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
+        const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
         if (title)
             sv?.setAttribute('navigation-inline-title', title);
         if (searchable) {
@@ -288,28 +290,27 @@ export class PickerView extends FormAssociatedBase {
         switch (input.mode) {
             case 'dictionary': {
                 const flattenDictionary = (tree) => {
-                    const out = {};
-                    const stack = [tree];
-                    const idx = [0];
+                    const out1 = {}, out2 = {}, stack = [tree], idx = [0];
                     while (stack.length) {
-                        const frame = stack[stack.length - 1];
-                        const i = idx[idx.length - 1];
+                        const frame = stack[stack.length - 1], i = idx[idx.length - 1];
                         if (i >= frame.length) {
                             stack.pop();
                             idx.pop();
                             continue;
                         }
                         idx[idx.length - 1]++;
-                        const { value, label, children } = frame[i];
-                        out[value] = label;
+                        const { value, label, systemImage, children } = frame[i];
+                        out1[value] = label;
+                        out2[value] = systemImage;
                         if (children.length) {
                             stack.push(children);
                             idx.push(0);
                         }
                     }
-                    return out;
+                    return { labels: out1, icons: out2 };
                 };
-                this.#lastRenderedLabelMap = flattenDictionary(input.source);
+                this.#lastRenderedLabelMap = flattenDictionary(input.source).labels;
+                this.#lastRenderedIconMap = flattenDictionary(input.source).icons;
                 // const collectLeafValues = (node: DictEntry): string[] => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value])
                 // collectGroups = (nodes: DictEntry[]): string[][] => {
                 //   const groups: string[][] = []
@@ -328,14 +329,19 @@ export class PickerView extends FormAssociatedBase {
             }
             case 'list': {
                 this.#lastRenderedLabelMap = {};
+                this.#lastRenderedIconMap = {};
                 for (const el of input.source)
                     if (el.matches('option')) {
-                        const opt = el;
-                        this.#lastRenderedLabelMap[extractTagFromOption(opt)] = opt.getAttribute('label') ?? undefined;
+                        const k = extractTagFromOption(el);
+                        this.#lastRenderedLabelMap[k] = el.getAttribute('label') ?? undefined;
+                        this.#lastRenderedIconMap[k] = extractIconFromOption(el) ?? undefined;
                     }
                     else
-                        for (const opt of el.querySelectorAll('option'))
-                            this.#lastRenderedLabelMap[extractTagFromOption(opt)] = opt.getAttribute('label') ?? undefined;
+                        for (const opt of el.querySelectorAll('option')) {
+                            const k = extractTagFromOption(opt);
+                            this.#lastRenderedLabelMap[k] = opt.getAttribute('label') ?? undefined;
+                            this.#lastRenderedIconMap[k] = extractIconFromOption(opt) ?? undefined;
+                        }
                 this.#lastIndexedRoot = input.source;
                 // this.#lastRenderedGroupMap = assigned.flatMap<string[]>((el) =>
                 //   [...(el.matches('datalist') ? [el as HTMLDataListElement] : []), ...el.querySelectorAll<HTMLDataListElement>('datalist')].map((dl) =>
@@ -461,10 +467,16 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm();
     }
     #lastRenderedLabelMap = {};
+    #lastRenderedIconMap = {};
     #lastIndexedRoot = [];
     get #currentValueLabel() {
         const cvl = this.#lastRenderedLabelMap[this.#selection];
-        return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl;
+        return ((this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_LABEL) ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) ||
+            cvl);
+    }
+    get #currentValueIcon() {
+        const cvl = this.#lastRenderedIconMap[this.#selection];
+        return (this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_ICON) ?? '') || cvl;
     }
     get #internals() {
         return getInternals(this);
@@ -572,7 +584,10 @@ export class PickerView extends FormAssociatedBase {
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case this.constructor.ATTR.PLACEHOLDER:
-                this.#reflectPlaceholder(newValue);
+            case this.constructor.ATTR.PLACEHOLDER_ICON:
+                if (oldValue === newValue)
+                    break;
+                this.#reflectSelectionOnCurrentValueLabel(); //this.#reflectPlaceholder(newValue)
                 break;
             case this.constructor.ATTR.LABEL:
                 this.#reflectLabel(newValue);
@@ -589,6 +604,7 @@ export class PickerView extends FormAssociatedBase {
                 this.#renderSlotted([]);
                 break;
             case this.constructor.ATTR.CURRENT_VALUE_LABEL:
+            case this.constructor.ATTR.CURRENT_VALUE_ICON:
                 // if (oldValue === newValue) break
                 this.#reflectSelectionOnCurrentValueLabel();
                 break;
@@ -832,17 +848,14 @@ export class PickerView extends FormAssociatedBase {
                     container.appendChild(_a.#wrapOptionTag(node));
             }
     }
-    #reflectPlaceholder(value) {
-        if (devFlags.debug)
-            console.debug(`#reflectPlaceholder`);
-        const input = this.#shadowRoot.querySelector('input');
-        if (input) {
-            if (value)
-                input.setAttribute('placeholder', value);
-            else
-                input.removeAttribute('placeholder');
-        }
-    }
+    // #reflectPlaceholder(value: string | null) {
+    //   if (devFlags.debug) console.debug(`#reflectPlaceholder`)
+    // const input = this.#shadowRoot.querySelector('input')
+    // if (input) {
+    //   if (value) input.setAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER, value)
+    //   else input.removeAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER)
+    // }
+    // }
     #reflectLabel(value) {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectLabel`);
@@ -893,26 +906,22 @@ export class PickerView extends FormAssociatedBase {
                     const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
                     if (!currentValueLabel)
                         break;
-                    const cvl = this.#currentValueLabel;
-                    if (!cvl)
-                        currentValueLabel.setAttribute('foreground', 'secondary');
-                    else
-                        currentValueLabel.removeAttribute('foreground');
-                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
-                    renderLabelIcon(currentValueLabel, 'dots-three');
+                    const cvl = this.#currentValueLabel, cvi = this.#currentValueIcon;
+                    // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
+                    // else currentValueLabel.removeAttribute('foreground')
+                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute(this.constructor.ATTR.PLACEHOLDER) || this.#selection);
+                    renderLabelIcon(currentValueLabel, cvi || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
                     break;
                 }
                 case 'menu': {
                     const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
                     if (!currentValueLabel)
                         break;
-                    const cvl = this.#currentValueLabel;
-                    if (!cvl)
-                        currentValueLabel.setAttribute('foreground', 'secondary');
-                    else
-                        currentValueLabel.removeAttribute('foreground');
-                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
-                    renderLabelIcon(currentValueLabel, 'dots-three');
+                    const cvl = this.#currentValueLabel, cvi = this.#currentValueIcon;
+                    // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
+                    // else currentValueLabel.removeAttribute('foreground')
+                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute(this.constructor.ATTR.PLACEHOLDER) || this.#selection);
+                    renderLabelIcon(currentValueLabel, cvi || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
                     break;
                 }
                 case 'inline':

package/generated/css/index.css

@@ -3105,7 +3105,7 @@
   :where(labeled-content)::part(labeled-content-value-stack) {
     color: var(--secondary);
     justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
-    word-break: break-all;
+    word-break: break-word;
   }
   @media (pointer: fine) {
     :where(labeled-content) {
@@ -4635,6 +4635,9 @@
     grid-template-rows: minmax(0, 1fr);
     column-gap: var(--labeled-content-column-gap);
   }
+  :where(text-field)::part(text-field-label-stack) {
+    color: var(--secondary);
+  }
   :where(text-field)::part(text-field-input-stack) {
     place-items: stretch;
     place-content: stretch;
@@ -4644,8 +4647,7 @@
     appearance: none;
     border: 0;
     outline: 0;
-    padding-block: 0.1rem;
-    padding-inline-start: 0.3rem;
+    padding: 0;
     background-color: transparent;
   }
 }
@@ -4678,19 +4680,14 @@
     border: var(--picker--stack-grid-border, );
     color: var(--picker--stack-grid-color, );
   }
-  :where(picker-view > :not([slot])) {
-    place-self: var(--picker--input-stack-child-place-self, );
-  }
   :where(picker-view)::part(picker-stack) {
-    display: var(--picker--stack-display, );
-    flex-wrap: var(--picker--stack-flex-wrap, );
-    justify-content: var(--picker--stack-justify-content, );
+    grid-template-columns: var(--picker--stack-grid-template-columns, );
+    grid-template-rows: var(--picker--stack-grid-template-rows, );
     row-gap: var(--picker--stack-row-gap, );
     column-gap: var(--picker--stack-column-gap, );
   }
   :where(picker-view)::part(picker-input-stack) {
-    flex-shrink: var(--picker--input-stack-flex-shrink, );
-    max-width: var(--picker--input-stack-max-width, );
+    text-align: var(--picker--input-stack-text-align, );
   }
   :where(picker-view)::part(picker-label-stack) {
     display: var(--picker--labelstack-display, none);
@@ -4698,6 +4695,10 @@
     --label-truncation-mode: tail;
     --label-line-limit: 1;
   }
+  :where(picker-view) {
+    --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
+    --picker--stack-grid-template-rows: minmax(0, 1fr);
+  }
   @container not style(--picker-style) {
     :where(picker-view > list-view > section-view > :not(button):first-child) {
       color: var(--secondary);
@@ -4736,27 +4737,14 @@
       --picker--stack-grid-border: if(
         style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
       );
-      --picker--input-stack-child-place-self: if(style(--picker-style: sheet): flex-end ; style(--picker-style: navigation-link): flex-end ; style(--picker-style: menu): flex-end ;);
-      --picker--input-stack-flex-shrink: if(
-        style(--picker-style: sheet) or style(--picker-style: navigation-link) or
-          style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 1 ; else: 0 ;)
-      );
-      --picker--stack-flex-wrap: if(
-        style(--picker-style: sheet) or style(--picker-style: navigation-link) or
-          style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): wrap ;)
-      );
-      --picker--input-stack-max-width: if(
-        style(--picker-style: sheet) or style(--picker-style: navigation-link) or
-          style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 70% ;)
-      );
+      --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
     }
   }
   @supports not (x: if(else:red)) {
     @container style(--picker-style: menu) {
       :where(picker-view:not([picker-style])) {
         --picker--labelstack-display: grid;
-        --picker--stack-display: flex;
-        --picker--stack-justify-content: space-between;
+        --picker--input-stack-text-align: end;
         --picker--stack-row-gap: var(--labeled-content-row-gap);
         --picker--stack-column-gap: var(--labeled-content-column-gap);
         --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4765,16 +4753,12 @@
         --picker--stack-grid-background: var(--itemface, );
         --picker--stack-grid-color: var(--itemtext, );
         --picker--stack-grid-border: var(--itemborder, );
-        --picker--input-stack-child-place-self: flex-end;
-        --picker--input-stack-flex-shrink: 0;
-        --picker--input-stack-max-width: 70%;
       }
     }
     @container style(--picker-style: navigation-link) {
       :where(picker-view:not([picker-style])) {
         --picker--labelstack-display: grid;
-        --picker--stack-display: flex;
-        --picker--stack-justify-content: space-between;
+        --picker--input-stack-text-align: end;
         --picker--stack-row-gap: var(--labeled-content-row-gap);
         --picker--stack-column-gap: var(--labeled-content-column-gap);
         --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4783,16 +4767,12 @@
         --picker--stack-grid-background: var(--itemface, );
         --picker--stack-grid-color: var(--itemtext, );
         --picker--stack-grid-border: var(--itemborder, );
-        --picker--input-stack-child-place-self: flex-end;
-        --picker--input-stack-flex-shrink: 0;
-        --picker--input-stack-max-width: 70%;
       }
     }
     @container style(--picker-style: sheet) {
       :where(picker-view:not([picker-style])) {
         --picker--labelstack-display: grid;
-        --picker--stack-display: flex;
-        --picker--stack-justify-content: space-between;
+        --picker--input-stack-text-align: end;
         --picker--stack-row-gap: var(--labeled-content-row-gap);
         --picker--stack-column-gap: var(--labeled-content-column-gap);
         --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4801,15 +4781,11 @@
         --picker--stack-grid-background: var(--itemface, );
         --picker--stack-grid-color: var(--itemtext, );
         --picker--stack-grid-border: var(--itemborder, );
-        --picker--input-stack-child-place-self: flex-end;
-        --picker--input-stack-flex-shrink: 0;
-        --picker--input-stack-max-width: 70%;
       }
     }
     :where(form picker-view[picker-style=menu]) {
       --picker--labelstack-display: grid;
-      --picker--stack-display: flex;
-      --picker--stack-justify-content: space-between;
+      --picker--input-stack-text-align: end;
       --picker--stack-row-gap: var(--labeled-content-row-gap);
       --picker--stack-column-gap: var(--labeled-content-column-gap);
       --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4818,14 +4794,10 @@
       --picker--stack-grid-background: var(--itemface, );
       --picker--stack-grid-color: var(--itemtext, );
       --picker--stack-grid-border: var(--itemborder, );
-      --picker--input-stack-child-place-self: flex-end;
-      --picker--input-stack-flex-shrink: 0;
-      --picker--input-stack-max-width: 70%;
     }
     :where(form picker-view[picker-style=navigation-link]) {
       --picker--labelstack-display: grid;
-      --picker--stack-display: flex;
-      --picker--stack-justify-content: space-between;
+      --picker--input-stack-text-align: end;
       --picker--stack-row-gap: var(--labeled-content-row-gap);
       --picker--stack-column-gap: var(--labeled-content-column-gap);
       --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4834,14 +4806,10 @@
       --picker--stack-grid-background: var(--itemface, );
       --picker--stack-grid-color: var(--itemtext, );
       --picker--stack-grid-border: var(--itemborder, );
-      --picker--input-stack-child-place-self: flex-end;
-      --picker--input-stack-flex-shrink: 0;
-      --picker--input-stack-max-width: 70%;
     }
     :where(form picker-view[picker-style=sheet]) {
       --picker--labelstack-display: grid;
-      --picker--stack-display: flex;
-      --picker--stack-justify-content: space-between;
+      --picker--input-stack-text-align: end;
       --picker--stack-row-gap: var(--labeled-content-row-gap);
       --picker--stack-column-gap: var(--labeled-content-column-gap);
       --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4850,43 +4818,32 @@
       --picker--stack-grid-background: var(--itemface, );
       --picker--stack-grid-color: var(--itemtext, );
       --picker--stack-grid-border: var(--itemborder, );
-      --picker--input-stack-child-place-self: flex-end;
-      --picker--input-stack-flex-shrink: 0;
-      --picker--input-stack-max-width: 70%;
     }
   }
 }
 @layer sw-final {
   @supports not (x: attr(x type(*))) {
-    @container style(--label-value-placement: vertical) {
+    @container style(--picker-label-value-placement: vertical) {
       :where(picker-view:not([label-value-placement])) {
-        --label-value-placement: vertical;
+        --picker-label-value-placement: vertical;
       }
     }
-    @container style(--label-value-placement: horizontal) {
+    @container style(--picker-label-value-placement: horizontal) {
       :where(picker-view:not([label-value-placement])) {
-        --label-value-placement: horizontal;
-      }
-    }
-    @container style(--label-value-placement: auto) {
-      :where(picker-view:not([label-value-placement])) {
-        --label-value-placement: auto;
+        --picker-label-value-placement: horizontal;
       }
     }
     :where(picker-view[label-value-placement=vertical]) {
-      --label-value-placement: vertical;
+      --picker-label-value-placement: vertical;
     }
     :where(picker-view[label-value-placement=horizontal]) {
-      --label-value-placement: horizontal;
-    }
-    :where(picker-view[label-value-placement=auto]) {
-      --label-value-placement: auto;
+      --picker-label-value-placement: horizontal;
     }
   }
   @supports (x: attr(x type(*))) {
     :where(picker-view) {
       --picker-style: attr(picker-style type(<custom-ident>), inherit);
-      --label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
+      --picker-label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
     }
   }
 }
@@ -5383,6 +5340,10 @@
     :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]):after {
       background-image: linear-gradient(to top, var(--face) 0, oklch(0% 0 0deg / 0) 100%);
     }
+    :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]) {
+      --toolbaritempadistart: 1rem;
+      --toolbaritempadiend: 1rem;
+    }
     :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view]) {
       margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
       max-inline-size: var(--iphone-tabbar-max-inline-size);
@@ -5393,9 +5354,7 @@
       --label-flow: vertical;
       --label-line-limit: 2;
       --label-truncation-mode: tail;
-      --label--titlestack-font-size: var(--label-caption2-font-size);
-      --label--titlestack-line-height: var(--label-caption2-line-height);
-      --label--titlestack-font-weight: var(--label-caption2-font-weight);
+      --label-font: caption2;
     }
     :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view] button) {
       min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5408,6 +5367,8 @@
     :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]) {
       --tab-bar-width: 100lvw;
       inset: 0 0 auto 0;
+      --toolbaritempadistart: 0.3rem;
+      --toolbaritempadiend: 0.3rem;
     }
     :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view]) {
       grid-auto-columns: minmax(max-content, 1fr);
@@ -5457,6 +5418,10 @@
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]):after {
       background-image: linear-gradient(to top, var(--face) 0, oklch(0% 0 0deg / 0) 100%);
     }
+    :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
+      --toolbaritempadistart: 1rem;
+      --toolbaritempadiend: 1rem;
+    }
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view]) {
       margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
       max-inline-size: var(--iphone-tabbar-max-inline-size);
@@ -5467,9 +5432,7 @@
       --label-flow: vertical;
       --label-line-limit: 2;
       --label-truncation-mode: tail;
-      --label--titlestack-font-size: var(--label-caption2-font-size);
-      --label--titlestack-line-height: var(--label-caption2-line-height);
-      --label--titlestack-font-weight: var(--label-caption2-font-weight);
+      --label-font: caption2;
     }
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view] button) {
       min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5482,6 +5445,8 @@
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
       --tab-bar-width: 100lvw;
       inset: 0 0 auto 0;
+      --toolbaritempadistart: 0.3rem;
+      --toolbaritempadiend: 0.3rem;
     }
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view]) {
       grid-auto-columns: minmax(max-content, 1fr);

package/package.json

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

package/scss/components/_labeled-content.scss

@@ -34,7 +34,7 @@
 
         justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
 
-        word-break: break-all;
+        word-break: break-word;
       }
 
       @media (pointer: fine) {

package/scss/components/_picker-view.scss

@@ -6,9 +6,10 @@
 $picker-ifs: (
   menu: (
     --picker--labelstack-display: grid,
+    --picker--input-stack-text-align: end,
     // copy from labeled-content
-    --picker--stack-display: flex,
-    --picker--stack-justify-content: space-between,
+    // --picker--stack-display: flex,
+    // --picker--stack-justify-content: space-between,
     --picker--stack-row-gap: var(--labeled-content-row-gap),
     --picker--stack-column-gap: var(--labeled-content-column-gap),
     //
@@ -18,17 +19,18 @@ $picker-ifs: (
     --picker--stack-grid-background: var(--itemface,),
     --picker--stack-grid-color: var(--itemtext,),
     --picker--stack-grid-border: var(--itemborder,),
-    --picker--input-stack-child-place-self: flex-end,
+    // --picker--input-stack-child-place-self: end,
     //
     // --picker--stack-flex-wrap: wrap,
-    --picker--input-stack-flex-shrink: 0,
-    --picker--input-stack-max-width: 70%,
+    // --picker--input-stack-flex-shrink: 0,
+     // --picker--input-stack-max-width: 70%,
   ),
   navigation-link: (
     --picker--labelstack-display: grid,
+    --picker--input-stack-text-align: end,
     // copy from labeled-content
-    --picker--stack-display: flex,
-    --picker--stack-justify-content: space-between,
+    // --picker--stack-display: flex,
+    // --picker--stack-justify-content: space-between,
     --picker--stack-row-gap: var(--labeled-content-row-gap),
     --picker--stack-column-gap: var(--labeled-content-column-gap),
     //
@@ -38,17 +40,18 @@ $picker-ifs: (
     --picker--stack-grid-background: var(--itemface,),
     --picker--stack-grid-color: var(--itemtext,),
     --picker--stack-grid-border: var(--itemborder,),
-    --picker--input-stack-child-place-self: flex-end,
+    // --picker--input-stack-child-place-self: end,
     //
     // --picker--stack-flex-wrap: wrap,
-    --picker--input-stack-flex-shrink: 0,
-    --picker--input-stack-max-width: 70%,
+    // --picker--input-stack-flex-shrink: 0,
+     // --picker--input-stack-max-width: 70%,
   ),
   sheet: (
     --picker--labelstack-display: grid,
+    --picker--input-stack-text-align: end,
     // copy from labeled-content
-    --picker--stack-display: flex,
-    --picker--stack-justify-content: space-between,
+    // --picker--stack-display: flex,
+    // --picker--stack-justify-content: space-between,
     --picker--stack-row-gap: var(--labeled-content-row-gap),
     --picker--stack-column-gap: var(--labeled-content-column-gap),
     //
@@ -58,11 +61,11 @@ $picker-ifs: (
     --picker--stack-grid-background: var(--itemface,),
     --picker--stack-grid-color: var(--itemtext,),
     --picker--stack-grid-border: var(--itemborder,),
-    --picker--input-stack-child-place-self: flex-end,
+    // --picker--input-stack-child-place-self: end,
     //
     // --picker--stack-flex-wrap: wrap,
-    --picker--input-stack-flex-shrink: 0,
-    --picker--input-stack-max-width: 70%,
+    // --picker--input-stack-flex-shrink: 0,
+     // --picker--input-stack-max-width: 70%,
   ),
 );
 
@@ -109,21 +112,27 @@ $picker-ifs: (
       color: var(--picker--stack-grid-color,);
     }
 
-    > :not([slot]) {
-      :where(&) {
-        place-self: var(--picker--input-stack-child-place-self,);
-      }
-    }
+    // > :not([slot]) {
+    //   :where(&) {
+    //     place-self: var(--picker--input-stack-child-place-self,);
+    //   }
+    // }
 
     :where(&)::part(picker-stack) {
-      display: var(--picker--stack-display,);
-
-      flex-wrap: var(--picker--stack-flex-wrap,);
-
-      justify-content: var(--picker--stack-justify-content,);
+      // grid-auto-flow: column;
+      grid-template-columns: var(--picker--stack-grid-template-columns,); //minmax(30%, 1fr) auto;
 
+      grid-template-rows: var(--picker--stack-grid-template-rows,); //minmax(0, 1fr);
       row-gap: var(--picker--stack-row-gap,);
+
       column-gap: var(--picker--stack-column-gap,);
+
+      // display: var(--picker--stack-display,);
+
+      // flex-wrap: var(--picker--stack-flex-wrap,);
+
+      // justify-content: var(--picker--stack-justify-content,);
+
       // grid-template-columns: var(--picker--stack-grid-template-columns,);
 
       // grid-template-rows: minmax(0, 1fr);
@@ -140,9 +149,10 @@ $picker-ifs: (
     }
 
     :where(&)::part(picker-input-stack) {
-      flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
+      text-align: var(--picker--input-stack-text-align,);
+      // flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
 
-      max-width: var(--picker--input-stack-max-width,); //70%;
+      // max-width: var(--picker--input-stack-max-width,); //70%;
     }
 
     :where(&)::part(picker-label-stack) {
@@ -155,6 +165,11 @@ $picker-ifs: (
       --label-line-limit: 1;
     }
 
+    :where(&) {
+      --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
+
+      --picker--stack-grid-template-rows: minmax(0, 1fr);
+    }
     // :where(&) {
     // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
     // @include mixins.write-props($picker-elses); NOT Needed for now since all defaults/fallbacks are already the elses
@@ -226,24 +241,25 @@ $picker-ifs: (
         --picker--stack-grid-border: if(
           style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
         );
-        --picker--input-stack-child-place-self: if(style(--picker-style: sheet): flex-end ; style(--picker-style: navigation-link): flex-end ; style(--picker-style: menu): flex-end ;);
+        // --picker--input-stack-child-place-self: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
+        --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
 
         // SECTION experimental only in chrome
-        --picker--input-stack-flex-shrink: if(
-          style(--picker-style: sheet) or style(--picker-style: navigation-link) or
-            style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 1 ; else: 0 ;)
-        );
-        --picker--stack-flex-wrap: if(
-          style(--picker-style: sheet) or style(--picker-style: navigation-link) or
-            style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): wrap ;)
-        );
-        --picker--input-stack-max-width: if(
-          style(--picker-style: sheet) or style(--picker-style: navigation-link) or
-            style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 70% ;)
-        );
         // --picker--input-stack-flex-shrink: if(
-        //   style(--label-value-placement: vertical) or
-        //     style(--label-value-placement: auto): if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 1 ;) ; ;
+        //   style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+        //     style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 1 ; else: 0 ;)
+        // );
+        // --picker--stack-flex-wrap: if(
+        //   style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+        //     style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): wrap ;)
+        // );
+        // --picker--input-stack-max-width: if(
+        //   style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+        //     style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 70% ;)
+        // );
+        // --picker--input-stack-flex-shrink: if(
+        //   style(--picker-label-value-placement: vertical) or
+        //     style(--picker-label-value-placement: auto): if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 1 ;) ; ;
         //     else: if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 0 ;) ; ;
         // );
         // --picker--input-stack-max-width: if(style(--picker-style: sheet): 70% ; style(--picker-style: navigation-link): 70% ; style(--picker-style: menu): 70% ;);
@@ -280,18 +296,18 @@ $picker-ifs: (
 
 @layer #{vars.$final-layer} {
   picker-view {
-    //--label-value-placement
+    //--picker-label-value-placement
     @supports not (x: #{string.unquote('attr(x type(*))')}) {
       :where(&:not([label-value-placement])) {
-        @each $v in vertical, horizontal, auto {
-          @container style(--label-value-placement: #{$v}) {
-            --label-value-placement: #{$v};
+        @each $v in vertical, horizontal {
+          @container style(--picker-label-value-placement: #{$v}) {
+            --picker-label-value-placement: #{$v};
           }
         }
       }
-      @each $v in vertical, horizontal, auto {
+      @each $v in vertical, horizontal {
         :where(&[label-value-placement='#{$v}']) {
-          --label-value-placement: #{$v};
+          --picker-label-value-placement: #{$v};
         }
       }
     }
@@ -300,7 +316,7 @@ $picker-ifs: (
     @supports (x: #{string.unquote('attr(x type(*))')}) {
       :where(&) {
         --picker-style: attr(picker-style type(<custom-ident>), inherit);
-        --label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
+        --picker-label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
       }
     }
   }

package/scss/components/_tab-bar.scss

@@ -40,6 +40,9 @@
       inset: auto 0 0 0;
 
       @include mixins.make-toolbar-pseudos(top);
+
+      --toolbaritempadistart: 1rem;
+      --toolbaritempadiend: 1rem;
     }
 
     > [is='form-view'] {
@@ -64,9 +67,7 @@
         --label-line-limit: 2;
         --label-truncation-mode: tail;
 
-        --label--titlestack-font-size: var(--label-caption2-font-size);
-        --label--titlestack-line-height: var(--label-caption2-line-height);
-        --label--titlestack-font-weight: var(--label-caption2-font-weight);
+        --label-font: caption2;
       }
 
       :where(& button) {
@@ -85,6 +86,9 @@
       --tab-bar-width: 100lvw;
 
       inset: 0 0 auto 0;
+
+      --toolbaritempadistart: 0.3rem;
+      --toolbaritempadiend: 0.3rem;
     }
 
     > [is='form-view'] {

package/scss/components/_text-field.scss

@@ -23,6 +23,8 @@
 
     :where(&)::part(text-field-label-stack) {
       // display: grid;
+
+      color: var(--secondary);
     }
 
     :where(&)::part(text-field-input-stack) {
@@ -43,9 +45,11 @@
 
       outline: 0;
 
-      padding-block: 0.1rem;
+      padding: 0;
+
+      // padding-block: 0.1rem;
 
-      padding-inline-start: 0.3rem;
+      // padding-inline: 0.3rem;
 
       background-color: transparent;
     }