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

package/generated/components/content-unavailable-view.d.ts

@@ -5,9 +5,9 @@
  *
  * @example <content-unavailable-view search="foo"></content-unavailable-view>
  *
- * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
  *
- * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
  *
  * @slot description
  * @slot actions

package/generated/components/content-unavailable-view.js

@@ -8,9 +8,9 @@ import { $, devFlags, onoff } from '../internal/utils';
  *
  * @example <content-unavailable-view search="foo"></content-unavailable-view>
  *
- * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
  *
- * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
  *
  * @slot description
  * @slot actions
@@ -69,7 +69,7 @@ export class ContentUnavailableView extends HTMLElement {
             console.debug(`${ContentUnavailableView.name} ⚡️ connect`);
     }
     #renderSearch = (search) => {
-        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="image" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
         if (search) {
             const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
             titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));

package/generated/components/date-picker.js

@@ -3,7 +3,7 @@ import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { $, clamp, devFlags, kebabCase, onoff, renderLabel, set } from '../internal/utils';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -89,14 +89,7 @@ export class DatePicker extends FormAssociatedBase {
                     input.setAttribute('placeholder', map[input.name] ?? '');
                 break;
             case 'label':
-                let label = this.querySelector(':scope>label-view[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-                    label.setAttribute('foreground', 'secondary');
-                    label.setAttribute('title', newValue);
-                }
-                else
-                    label?.remove();
+                renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, newValue);
                 // this.#sendValueToForm()
                 break;
             case 'disabled':

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

@@ -0,0 +1,9 @@
+export declare class ImageView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/image-view.js

@@ -0,0 +1,46 @@
+import { $, devFlags } from '../internal/utils';
+export class ImageView extends HTMLElement {
+    static get observedAttributes() {
+        return ['system-name'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `<slot></slot>`));
+    }
+    #shadowRoot;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'system-name':
+                if (oldValue === newValue)
+                    break;
+                // this.innerHTML = `<i style="line-height: 1.05" class="ph ph-${newValue}"></i>`
+                //this.setAttribute('class', `ph ph-${newValue}`)
+                let image = this.querySelector(':scope>:not([slot])');
+                if (newValue) {
+                    const el = image ?? $(`<i style="line-height: 1.05"></i>`, '>1');
+                    el.setAttribute('class', `ph ph-${newValue}`);
+                    image ??= this.appendChild(el);
+                    // image ??= this.appendChild($(`<i style="line-height: 1.05"></i>`, '>1'))
+                    // image.setAttribute('class', `ph ph-${newValue}`)
+                }
+                else
+                    image?.remove();
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ImageView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ImageView.name} ⚡️ connect`);
+    }
+}

package/generated/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './image-view';
 export * from './label-view';
 export * from './list-view';
 export * from './menu-view';

package/generated/components/index.js

@@ -11,6 +11,7 @@ export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './image-view';
 export * from './label-view';
 export * from './list-view';
 export * from './menu-view';

package/generated/components/label-view.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, devFlags, renderLabelIcon, renderLabelTitle } from '../internal/utils';
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
         return ['system-image', 'title', 'line-limit', 'truncation-mode'];
@@ -6,7 +6,7 @@ export class LabelView extends HTMLElement {
     static #template;
     static get template() {
         return (this.#template ??= $(String.raw `
-    <slot name="image"></slot>
+    <slot name="icon"></slot>
     <slot></slot>
     `
         //     String.raw`
@@ -27,24 +27,14 @@ export class LabelView extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
         switch (name) {
             case 'system-image':
-                let image = this.querySelector(':scope>[slot=image]');
-                if (newValue) {
-                    image ??= this.appendChild($(`<i slot="image" style="line-height: 1.05"></i>`, '>1'));
-                    image.setAttribute('class', `ph ph-${newValue}`);
-                }
-                else
-                    image?.remove();
+                renderLabelIcon(this, newValue);
                 break;
             case 'title':
-                let title = this.querySelector(':scope>:not([slot])');
-                if (newValue) {
-                    title ??= this.appendChild($(`<span></span>`, '>1'));
-                    title.textContent = newValue;
-                }
-                else
-                    title?.remove();
+                renderLabelTitle(this, newValue);
                 break;
         }
     }

package/generated/components/menu-view.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff, touchGlass } from '../internal/utils';
+import { $, devFlags, onoff, renderLabel, touchGlass } from '../internal/utils';
 /**
  * @summary A control for presenting a menu of actions.
  */
@@ -58,13 +58,7 @@ export class MenuView extends HTMLElement {
                 }
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-                    label.setAttribute('title', newValue);
-                }
-                else
-                    label?.remove();
+                renderLabel(this, ':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, newValue);
                 break;
         }
     }

package/generated/components/navigation-title.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
-import { $, devFlags } from '../internal/utils';
+import { $, devFlags, renderLabel } from '../internal/utils';
 let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'subtitle'];
@@ -28,18 +28,10 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
             console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
     #render = (title, subtitle) => {
-        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"></label-view>`, vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`;
+        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`, vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`;
         const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'));
-        const titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)') ?? vStack.appendChild($(titleTemplate, '>1'));
-        if (title)
-            titleLabel.setAttribute('title', title);
-        else
-            titleLabel?.removeAttribute('title');
-        const subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)') ?? vStack.appendChild($(subtitleTemplate, '>1'));
-        if (subtitle)
-            subtitleLabel.setAttribute('title', subtitle);
-        else
-            subtitleLabel?.removeAttribute('title');
+        renderLabel(vStack, ':scope>label-view:nth-child(1)', titleTemplate, title);
+        renderLabel(vStack, ':scope>label-view:nth-child(2)', subtitleTemplate, subtitle);
     };
 };
 NavigationTitle = NavigationTitle_1 = __decorate([

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

@@ -12,6 +12,8 @@ export declare class PickerView extends FormAssociatedBase {
         CURRENT_VALUE_LABEL: string;
     };
     static get observedAttributes(): string[];
+    get selection(): string;
+    set selection(v: string);
     get template(): DocumentFragment;
     constructor();
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

package/generated/components/picker-view.js

@@ -5,9 +5,11 @@ import { FormAssociatedBase, getInternals } from '../internal/class/form-associa
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { $, devFlags, kebabCase, onoff, renderLabel, renderLabelIcon, renderLabelTitle } from '../internal/utils';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
+    if (devFlags.debug)
+        console.debug(`PickerView: update`);
     if (!(path instanceof NavigationPath))
         throw new Error('invalid view');
     const { component, page } = path;
@@ -19,6 +21,8 @@ const update = (path, node, overwrite = true) => {
         page.insertAdjacentElement(position, node);
 };
 const reflectSpawnedElement = (current, source) => {
+    if (devFlags.debug)
+        console.debug(`PickerView: reflectSpawnedElement`);
     const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
     const oldList = oldSv?.querySelector('list-view'), newList = newSv?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
     // pre replace list (always exists)
@@ -56,9 +60,13 @@ const reflectSpawnedElement = (current, source) => {
         oldSearch?.remove();
 };
 const extractTagFromOption = (node) => {
+    if (devFlags.debug)
+        console.debug(`PickerView: extractTagFromOption`);
     return ((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '';
 };
 const extractCurrentValueFromOption = (node) => {
+    if (devFlags.debug)
+        console.debug(`PickerView: extractCurrentValueFromOption`);
     return (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || '';
 };
 export class PickerView extends FormAssociatedBase {
@@ -78,6 +86,8 @@ export class PickerView extends FormAssociatedBase {
     static #templates = new Map();
     #spawn;
     #spawnPage = (tag, searchable = false, title, node) => {
+        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');
         if (title)
             sv?.setAttribute('navigation-inline-title', title);
@@ -181,8 +191,10 @@ export class PickerView extends FormAssociatedBase {
                 // current value label only
                 const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
                 // reset state
-                currentValueLabel.setAttribute('system-image', 'dots-three'); // overwritten
-                currentValueLabel.setAttribute('title', this.#currentValueLabel); // overwritten
+                if (currentValueLabel) {
+                    renderLabelIcon(currentValueLabel, 'dots-three'); // overwritten
+                    renderLabelTitle(currentValueLabel, this.#currentValueLabel); // overwritten
+                }
                 // clear all siblings
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     if (currentValueLabel !== el)
@@ -217,8 +229,10 @@ export class PickerView extends FormAssociatedBase {
                     if (menu !== el)
                         el.remove();
                 const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-                currentValueLabel.setAttribute('system-image', 'dots-three'); // overwritten
-                currentValueLabel.setAttribute('title', this.#currentValueLabel); // overwritten
+                if (currentValueLabel) {
+                    renderLabelIcon(currentValueLabel, 'dots-three'); // overwritten
+                    renderLabelTitle(currentValueLabel, this.#currentValueLabel); // overwritten
+                }
                 _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
                 break;
             }
@@ -257,6 +271,17 @@ export class PickerView extends FormAssociatedBase {
     #observers = new MutationObserverSet(this.#renderSlotted);
     #customValidity = '';
     #selection = '';
+    get selection() {
+        return this.#selection;
+    }
+    set selection(v) {
+        if (Object.is(this.#selection, v))
+            return;
+        this.#selection = v;
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+        this.#sendValueToForm();
+    }
     get #internals() {
         return getInternals(this);
     }
@@ -530,16 +555,20 @@ export class PickerView extends FormAssociatedBase {
         this.#renderSlotted([]);
     };
     static #wrapOptionTag(node) {
-        const btn = $(`<button type="button" tabindex="0"><h-stack distribution="leading" template="auto spacer"><label-view system-image="check"></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack');
+        if (devFlags.debug)
+            console.debug(`${_a.name} #wrapOptionTag`);
+        const btn = $(`<button type="button" tabindex="0"><h-stack distribution="leading" template="auto spacer"><label-view data-role="check"><image-view slot="icon" system-name="check"></image-view></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack');
         // chevron = hStack?.querySelector<HTMLElement>(':scope>label-view')
         btn.setAttribute('value', extractTagFromOption(node));
         // if (selection !== btn.getAttribute('value')) chevron?.style.setProperty('visibility', 'hidden')
-        const label = $(`<label-view></label-view>`, '>1');
-        label.setAttribute('title', extractCurrentValueFromOption(node));
+        const label = $(`<label-view><span></span></label-view>`, '>1');
+        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'))
@@ -549,6 +578,8 @@ export class PickerView extends FormAssociatedBase {
         return group;
     }
     static #reflectButtons(nodes, container) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} #reflectButtons`);
         for (const node of nodes)
             switch (node.tagName) {
                 case 'DATALIST': {
@@ -575,6 +606,8 @@ export class PickerView extends FormAssociatedBase {
             }
     }
     #reflectPlaceholder(value) {
+        if (devFlags.debug)
+            console.debug(`#reflectPlaceholder`);
         const input = this.#shadowRoot.querySelector('input');
         if (input) {
             if (value)
@@ -584,24 +617,21 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     #reflectLabel(value) {
-        let label = this.querySelector(':scope>label-view[slot=label]');
-        if (value) {
-            label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-            label.setAttribute('foreground', 'secondary');
-            label.setAttribute('title', value);
-        }
-        else
-            label?.remove();
+        if (devFlags.debug)
+            console.debug(`${_a.name} #reflectLabel`);
+        renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, value);
         this.#renderSlotted([]);
     }
     #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[system-image="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
+            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])'))
-                el.querySelector('label-view[system-image="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
+                el.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
     }
     get #currentTag() {
         return this.#slots
@@ -615,18 +645,24 @@ export class PickerView extends FormAssociatedBase {
         return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl || this.#selection;
     }
     #reflectCurrentValueLabel() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} #reflectCurrentValueLabel`);
         switch (this.pickerStyle) {
             case 'sheet':
             case 'navigation-link': {
                 const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
-                currentValueLabel?.setAttribute('system-image', 'dots-three');
-                currentValueLabel?.setAttribute('title', this.#currentValueLabel);
+                if (!currentValueLabel)
+                    break;
+                renderLabelTitle(currentValueLabel, this.#currentValueLabel);
+                renderLabelIcon(currentValueLabel, 'dots-three');
                 break;
             }
             case 'menu': {
                 const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
-                currentValueLabel?.setAttribute('system-image', 'dots-three');
-                currentValueLabel?.setAttribute('title', this.#currentValueLabel);
+                if (!currentValueLabel)
+                    break;
+                renderLabelTitle(currentValueLabel, this.#currentValueLabel);
+                renderLabelIcon(currentValueLabel, 'dots-three');
                 break;
             }
             case 'inline':

package/generated/components/progress-view.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { $, devFlags } from '../internal/utils';
+import { $, devFlags, renderLabel } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const progressViewStyles = ['circular', 'linear'];
 /**
@@ -68,13 +68,7 @@ export class ProgressView extends HTMLElement {
                 break;
             }
             case 'current-value-label': {
-                let label = this.querySelector(':scope>[slot=current-value]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="current-value" font="callout" foreground="secondary"></label-view>`, '>1'));
-                    label.setAttribute('title', newValue);
-                }
-                else
-                    label?.remove();
+                renderLabel(this, ':scope>[slot=current-value]', `<label-view slot="current-value" font="callout" foreground="secondary"><span></span></label-view>`, newValue);
                 break;
             }
         }

package/generated/components/scroll-view.js

@@ -2,7 +2,7 @@ var _a;
 import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
+import { $, devFlags, frame, onoff, renderLabel, slowHideShow } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
@@ -186,18 +186,10 @@ export class ScrollView extends HTMLElement {
         });
     }
     #renderNavTitle = (title, subtitle) => {
-        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"></label-view>`;
+        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`;
         const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'));
-        const titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)') ?? vStack.appendChild($(titleTemplate, '>1'));
-        if (title)
-            titleLabel.setAttribute('title', title);
-        else
-            titleLabel?.removeAttribute('title');
-        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)') ?? vStack.appendChild($(subtitleTemplate, '>1'));
-        if (subtitle)
-            subtitleLabel.setAttribute('title', subtitle);
-        else
-            subtitleLabel?.removeAttribute('title');
+        renderLabel(vStack, ':scope>label-view:nth-child(1)', titleTemplate, title);
+        renderLabel(vStack, ':scope>label-view:nth-child(2)', subtitleTemplate, subtitle);
     };
 }
 _a = ScrollView;

package/generated/components/section-view.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, devFlags, renderLabel } from '../internal/utils';
 export class SectionView extends HTMLElement {
     static get observedAttributes() {
         return ['header', 'footer'];
@@ -39,8 +39,9 @@ export class SectionView extends HTMLElement {
             case 'header':
                 let header = this.querySelector(':scope>[slot=header]');
                 if (newValue) {
-                    header ??= this.appendChild($(`<header slot="header"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></header>`, '>1'));
-                    header.querySelector('label-view')?.setAttribute('title', newValue);
+                    const el = header ?? $(`<header slot="header"></header>`, '>1');
+                    renderLabel(el, ':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, newValue);
+                    header ??= this.appendChild(el);
                 }
                 else
                     header?.remove();
@@ -48,8 +49,9 @@ export class SectionView extends HTMLElement {
             case 'footer':
                 let footer = this.querySelector(':scope>[slot=footer]');
                 if (newValue) {
-                    footer ??= this.appendChild($(`<footer slot="footer"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></footer>`, '>1'));
-                    footer.querySelector('label-view')?.setAttribute('title', newValue);
+                    const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
+                    renderLabel(el, ':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, newValue);
+                    footer ??= this.appendChild(el);
                 }
                 else
                     footer?.remove();

package/generated/components/text-field.js

@@ -3,7 +3,7 @@ import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { $, compareBigDecimals, devFlags, kebabCase, onoff, renderLabel, set } from '../internal/utils';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @slot label
@@ -137,14 +137,7 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                let label = this.querySelector(':scope>label-view[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-                    label.setAttribute('foreground', 'secondary');
-                    label.setAttribute('title', newValue);
-                }
-                else
-                    label?.remove();
+                renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, newValue);
                 // this.#sendValueToForm()
                 break;
             case 'disabled':

package/generated/css/index.css

@@ -792,13 +792,13 @@
     background-color: var(--quaternary);
     transform: translateY(-50%) translateX(120%);
   }
-  :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(label-view[list-item-tint])[list-item-tint] > [slot=image], [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(label-view[list-item-tint])[list-item-tint] > [slot=image], 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(label-view[list-item-tint])[list-item-tint] > [slot=image],
-  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(label-view[list-item-tint])[list-item-tint] > [slot=image],
-  [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(label-view[list-item-tint])[list-item-tint] > [slot=image],
-  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(label-view[list-item-tint])[list-item-tint] > [slot=image],
-  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(label-view[list-item-tint])[list-item-tint] > [slot=image],
-  [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(label-view[list-item-tint])[list-item-tint] > [slot=image],
-  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(label-view[list-item-tint])[list-item-tint] > [slot=image]) {
+  :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(label-view[list-item-tint])[list-item-tint] > [slot=icon], [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(label-view[list-item-tint])[list-item-tint] > [slot=icon], 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(label-view[list-item-tint])[list-item-tint] > [slot=icon],
+  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(label-view[list-item-tint])[list-item-tint] > [slot=icon],
+  [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(label-view[list-item-tint])[list-item-tint] > [slot=icon],
+  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(label-view[list-item-tint])[list-item-tint] > [slot=icon],
+  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(label-view[list-item-tint])[list-item-tint] > [slot=icon],
+  [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(label-view[list-item-tint])[list-item-tint] > [slot=icon],
+  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(label-view[list-item-tint])[list-item-tint] > [slot=icon]) {
     color: var(--accentColor);
   }
 }
@@ -1062,6 +1062,7 @@
   scroll-view:not([hidden]),
   body-view:not([hidden]),
   tab-view:not([hidden]),
+  image-view:not([hidden]),
   [is=search-view]:not([hidden]),
   [is=sidebar-view]:not([hidden]),
   [is=tab-bar]:not([hidden]),
@@ -2578,15 +2579,15 @@
       --safe-area-inset-bottom: 0px;
     }
   }
-  :where(tool-bar > [slot^=top-bar-] > button:has(> label-view > [slot=image]),
-  tool-bar > [slot=cancellation-action] > button:has(> label-view > [slot=image]),
-  tool-bar > [slot=primary-action] > button:has(> label-view > [slot=image]),
-  tool-bar > [slot=confirmation-action] > button:has(> label-view > [slot=image]),
-  tool-bar > [slot=destructive-action] > button:has(> label-view > [slot=image])) {
+  :where(tool-bar > [slot^=top-bar-] > button:has(> label-view > [slot=icon]),
+  tool-bar > [slot=cancellation-action] > button:has(> label-view > [slot=icon]),
+  tool-bar > [slot=primary-action] > button:has(> label-view > [slot=icon]),
+  tool-bar > [slot=confirmation-action] > button:has(> label-view > [slot=icon]),
+  tool-bar > [slot=destructive-action] > button:has(> label-view > [slot=icon])) {
     --label-style: icon-only;
   }
   @media (pointer: coarse) {
-    :where(tool-bar > [slot^=bottom-bar-] > button:has(> label-view > [slot=image])) {
+    :where(tool-bar > [slot^=bottom-bar-] > button:has(> label-view > [slot=icon])) {
       --label-style: icon-only;
     }
   }
@@ -2617,7 +2618,7 @@
     --label-imagestack-fontsize: calc(var(--label-image-size) * 1rem);
     white-space: var(--label--host-white-space, );
   }
-  :where(label-view:has(> [slot=image])) {
+  :where(label-view:has(> [slot=icon])) {
     --label--has-icon: yes;
   }
   :where(label-view:has(> :not([slot]))) {
@@ -2636,7 +2637,7 @@
     font-weight: var(--label--titlestack-font-weight, );
     display: var(--label--titlestack-display, none);
   }
-  label-view > [slot=image] {
+  label-view > [slot=icon] {
     aspect-ratio: 1/1;
     inline-size: var(--label-imagestack-fontsize);
     block-size: var(--label-imagestack-fontsize);
@@ -2724,7 +2725,7 @@
       --label--titlestack-display: grid;
     }
     @container not style(--label-style) {
-      :where(label-view:not([label-style]):has(> [slot=image]):has(> :not([slot]))) {
+      :where(label-view:not([label-style]):has(> [slot=icon]):has(> :not([slot]))) {
         --label-style: title-and-icon;
         --label--host-grid-template-columns: auto minmax(0, 1fr);
         --label--host-grid-template-rows: minmax(0, 1fr);
@@ -2733,13 +2734,13 @@
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
-      :where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
+      :where(label-view:not([label-style]):has(> [slot=icon]):not(:has(> :not([slot])))) {
         --label-style: icon-only;
         --label--host-align-items: center;
         --label--host-justify-items: normal;
         --label--iconstack-display: grid;
       }
-      :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
+      :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=icon]))) {
         --label-style: title-only;
         --label--host-align-items: center;
         --label--host-justify-items: normal;
@@ -2797,7 +2798,7 @@
       }
     }
     @container (not style(--label-style)) and style(--label-flow: vertical) {
-      :where(label-view:not([label-style]):has(> [slot=image]):has(> :not([slot]))) {
+      :where(label-view:not([label-style]):has(> [slot=icon]):has(> :not([slot]))) {
         --label-style: title-and-icon;
         --label--host-grid-template-columns: minmax(0, 1fr);
         --label--host-grid-template-rows: auto minmax(0, 1fr);
@@ -2806,13 +2807,13 @@
         --label--iconstack-display: grid;
         --label--titlestack-display: grid;
       }
-      :where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
+      :where(label-view:not([label-style]):has(> [slot=icon]):not(:has(> :not([slot])))) {
         --label-style: icon-only;
         --label--host-align-items: normal;
         --label--host-justify-items: center;
         --label--iconstack-display: grid;
       }
-      :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
+      :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=icon]))) {
         --label-style: title-only;
         --label--host-align-items: normal;
         --label--host-justify-items: center;
@@ -5253,9 +5254,63 @@
   :where([foreground=blue]) {
     color: var(--blue);
   }
+  :where([foreground=red]) {
+    color: var(--red);
+  }
+  :where([foreground=green]) {
+    color: var(--green);
+  }
+  :where([foreground=orange]) {
+    color: var(--orange);
+  }
   :where([foreground="blue.secondary"]) {
     color: var(--blue2);
   }
+  :where([foreground="red.secondary"]) {
+    color: var(--red2);
+  }
+  :where([foreground="green.secondary"]) {
+    color: var(--green2);
+  }
+  :where([foreground="orange.secondary"]) {
+    color: var(--orange2);
+  }
+  :where([foreground="blue.tertiary"]) {
+    color: var(--blue3);
+  }
+  :where([foreground="red.tertiary"]) {
+    color: var(--red3);
+  }
+  :where([foreground="green.tertiary"]) {
+    color: var(--green3);
+  }
+  :where([foreground="orange.tertiary"]) {
+    color: var(--orange3);
+  }
+  :where([foreground="blue.quaternary"]) {
+    color: var(--blue4);
+  }
+  :where([foreground="red.quaternary"]) {
+    color: var(--red4);
+  }
+  :where([foreground="green.quaternary"]) {
+    color: var(--green4);
+  }
+  :where([foreground="orange.quaternary"]) {
+    color: var(--orange4);
+  }
+  :where([foreground="blue.quinary"]) {
+    color: var(--blue5);
+  }
+  :where([foreground="red.quinary"]) {
+    color: var(--red5);
+  }
+  :where([foreground="green.quinary"]) {
+    color: var(--green5);
+  }
+  :where([foreground="orange.quinary"]) {
+    color: var(--orange5);
+  }
   :where([tint=gray],
   [list-item-tint=gray]) {
     --accentColorEffective: var(--gray);

package/generated/internal/utils/dev-flags.js

@@ -1,5 +1,5 @@
 export default class {
     static get debug() {
-        return false;
+        return true;
     }
 }

package/generated/internal/utils/index.d.ts

@@ -12,6 +12,9 @@ export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';
 export { default as onoff } from './onoff';
+export { default as renderLabel } from './render-label';
+export { default as renderLabelIcon } from './render-label-icon';
+export { default as renderLabelTitle } from './render-label-title';
 export { default as set } from './set';
 export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';

package/generated/internal/utils/index.js

@@ -14,6 +14,9 @@ export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';
 export { default as onoff } from './onoff';
+export { default as renderLabel } from './render-label';
+export { default as renderLabelIcon } from './render-label-icon';
+export { default as renderLabelTitle } from './render-label-title';
 export { default as set } from './set';
 export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';

package/generated/internal/utils/render-label-icon.d.ts

@@ -0,0 +1,2 @@
+import type { LabelView } from '../../components';
+export default function (label: LabelView, systemImage: string | null): void;

package/generated/internal/utils/render-label-icon.js

@@ -0,0 +1,19 @@
+import $ from './cash';
+export default function (label, systemImage) {
+    const img = label.querySelector(':scope>[slot=icon]');
+    // image ??= this.appendChild($(`<i slot="icon" style="line-height: 1.05"></i>`, '>1'))
+    // image.setAttribute('class', `ph ph-${newValue}`)
+    if (systemImage) {
+        if (!img) {
+            const newImg = $(`<i slot="icon" style="line-height: 1.05" class="ph ph-${systemImage}"></i>`, '>1');
+            // const newImg = $(`<image-view slot="icon"></image-view>`, '>1')
+            // newImg.setAttribute('system-name', systemImage)
+            // DOM manipulation last
+            label.appendChild(newImg);
+        }
+        else if (systemImage !== img.getAttribute('system-name'))
+            img.setAttribute('system-name', systemImage);
+    }
+    else
+        img?.remove();
+}

package/generated/internal/utils/render-label-title.d.ts

@@ -0,0 +1,2 @@
+import type { LabelView } from '../../components';
+export default function (label: LabelView, title: string | null): void;

package/generated/internal/utils/render-label-title.js

@@ -0,0 +1,16 @@
+import $ from './cash';
+export default function (label, title) {
+    const span = label.querySelector(':scope>:not([slot])');
+    if (title) {
+        if (!span) {
+            const newSpan = $(`<span></span>`, '>1');
+            newSpan.textContent = title;
+            // DOM manipulation last
+            label.appendChild(newSpan);
+        }
+        else if (title !== span.textContent)
+            span.textContent = title;
+    }
+    else
+        span?.remove();
+}

package/generated/internal/utils/render-label.d.ts

@@ -0,0 +1 @@
+export default function (container: Element, selector: string, template: string, title?: string | null, systemImage?: string | null): void;

package/generated/internal/utils/render-label.js

@@ -0,0 +1,19 @@
+import $ from './cash';
+import renderLabelIcon from './render-label-icon';
+import renderLabelTitle from './render-label-title';
+export default function (container, selector, template, title, systemImage) {
+    const existing = container.querySelector(selector);
+    if (existing) {
+        for (const { name, value } of $(template, '>1').attributes)
+            if (!existing.hasAttribute(name))
+                existing.setAttribute(name, value);
+        renderLabelIcon(existing, systemImage ?? null);
+        renderLabelTitle(existing, title ?? null);
+    }
+    else {
+        const newLabel = $(template, '>1');
+        renderLabelIcon(newLabel, systemImage ?? null);
+        renderLabelTitle(newLabel, title ?? null);
+        container.appendChild(newLabel);
+    }
+}

package/package.json

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

package/scss/components/_image-view.scss

@@ -0,0 +1,9 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  // body-view {
+  //   :where(&) {
+  //   }
+  // }
+}

package/scss/components/_index.scss

@@ -10,6 +10,7 @@
   scroll-view,
   body-view,
   tab-view,
+  image-view,
   [is='search-view'],
   [is='sidebar-view'],
   [is='tab-bar'],

package/scss/components/_label-view.scss

@@ -174,7 +174,7 @@ $label-line-ifs: (
       white-space: var(--label--host-white-space,);
     }
 
-    &:has(> [slot='image']) {
+    &:has(> [slot='icon']) {
       :where(&) {
         --label--has-icon: yes;
         // background-color: green;
@@ -213,7 +213,7 @@ $label-line-ifs: (
       }
     }
 
-    > [slot='image'] {
+    > [slot='icon'] {
       aspect-ratio: 1 / 1;
 
       inline-size: var(--label-imagestack-fontsize);
@@ -286,13 +286,13 @@ $label-line-ifs: (
       }
       @container not style(--label-style) {
         &:not([label-style]) {
-          :where(&:has(> [slot='image']):has(> :not([slot]))) {
+          :where(&:has(> [slot='icon']):has(> :not([slot]))) {
             @include set-label-style(h-title-and-icon);
           }
-          :where(&:has(> [slot='image']):not(:has(> :not([slot])))) {
+          :where(&:has(> [slot='icon']):not(:has(> :not([slot])))) {
             @include set-label-style(h-icon-only);
           }
-          :where(&:has(> :not([slot])):not(:has(> [slot='image']))) {
+          :where(&:has(> :not([slot])):not(:has(> [slot='icon']))) {
             @include set-label-style(h-title-only);
           }
         }
@@ -314,13 +314,13 @@ $label-line-ifs: (
       }
       @container (not style(--label-style)) and style(--label-flow: vertical) {
         &:not([label-style]) {
-          :where(&:has(> [slot='image']):has(> :not([slot]))) {
+          :where(&:has(> [slot='icon']):has(> :not([slot]))) {
             @include set-label-style(v-title-and-icon);
           }
-          :where(&:has(> [slot='image']):not(:has(> :not([slot])))) {
+          :where(&:has(> [slot='icon']):not(:has(> :not([slot])))) {
             @include set-label-style(v-icon-only);
           }
-          :where(&:has(> :not([slot])):not(:has(> [slot='image']))) {
+          :where(&:has(> :not([slot])):not(:has(> [slot='icon']))) {
             @include set-label-style(v-title-only);
           }
         }

package/scss/components/_tool-bar.scss

@@ -117,7 +117,7 @@
     > [slot='confirmation-action'],
     > [slot='destructive-action'] {
       // > label-view,
-      > button:has(> label-view > [slot='image']) {
+      > button:has(> label-view > [slot='icon']) {
         :where(&) {
           --label-style: icon-only;
         }
@@ -126,7 +126,7 @@
     // NOTE: By default bottom bar items with icons on iphone, prefer only icon to be shown, (except if they define/force w/ labelStyle)
     @media (pointer: coarse) {
       > [slot^='bottom-bar-'] {
-        > button:has(> label-view > [slot='image']) {
+        > button:has(> label-view > [slot='icon']) {
           :where(&) {
             --label-style: icon-only;
           }

package/scss/placeholders/_lists.scss

@@ -505,7 +505,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
       //   }
       // }
       &:is(label-view[list-item-tint]) {
-        :where(&[list-item-tint] > [slot='image']) {
+        :where(&[list-item-tint] > [slot='icon']) {
           color: var(--accentColor);
         }
       }

package/scss/utils/_index.scss

@@ -25,16 +25,35 @@
     }
   }
 
-  :where([foreground='secondary']) {
-    color: var(--secondary);
-  }
-
-  :where([foreground='blue']) {
-    color: var(--blue);
-  }
-
-  :where([foreground='blue.secondary']) {
-    color: var(--blue2);
+  @each $k,
+    $v
+      in (
+        secondary: --secondary,
+        blue: --blue,
+        red: --red,
+        green: --green,
+        orange: --orange,
+        'blue.secondary': --blue2,
+        'red.secondary': --red2,
+        'green.secondary': --green2,
+        'orange.secondary': --orange2,
+        'blue.tertiary': --blue3,
+        'red.tertiary': --red3,
+        'green.tertiary': --green3,
+        'orange.tertiary': --orange3,
+        'blue.quaternary': --blue4,
+        'red.quaternary': --red4,
+        'green.quaternary': --green4,
+        'orange.quaternary': --orange4,
+        'blue.quinary': --blue5,
+        'red.quinary': --red5,
+        'green.quinary': --green5,
+        'orange.quinary': --orange5
+      )
+  {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
+    }
   }
 
   @each $tint in gray, blue, red, green, orange {

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

@@ -166,6 +166,14 @@
         }
       ]
     },
+    {
+      "name": "image-view",
+      "attributes": [
+        {
+          "name": "system-name"
+        }
+      ]
+    },
     {
       "name": "label-view",
       "attributes": [
@@ -230,7 +238,6 @@
     },
     {
       "name": "navigation-title",
-      "description": "// const _sync = Symbol('sync')",
       "attributes": [
         {
           "name": "value"