@swiftwc/ui 0.0.0-dev.20 → 0.0.0-dev.21

package/generated/internal/class/form-associated-base.js

@@ -12,7 +12,10 @@ export function getInternals(instance) {
 export function makeSlotchangeHandler(t) {
     const handleSlotchange = (evt) => {
         console.debug(`${makeSlotchangeHandler.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
+        const slot = evt.target instanceof HTMLSlotElement && evt.target;
+        if (!slot)
+            return;
+        const assigned = slot.assignedElements({ flatten: true });
         observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label']);
         // for (const el of trackedElements.get(t) ?? [])
         //   if (!assigned.includes(el)) {

package/generated/internal/class/navigation-view.js

@@ -1,6 +1,6 @@
 var _a;
+import { lifecycleObserver } from '../../buses';
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { LifecycleObserver } from '../../lifecycle-observer';
 import { frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
@@ -16,7 +16,7 @@ export class NavigationView extends HTMLElement {
         this.#recentBefore = undefined;
         // this.removeEventListener('tabreveal', this.#handleTabReveal)
         if (this.closest('tab-view'))
-            frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
+            frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
     }
     connectedCallback() {
         if (this.closest('tab-view')) {
@@ -32,7 +32,7 @@ export class NavigationView extends HTMLElement {
         if (this.closest('tab-view'))
             frame(this).then(() => {
                 // if (!r) return
-                LifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
+                lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
             });
     }
     attributeChangedCallback(name, oldValue, newValue) {
@@ -42,7 +42,7 @@ export class NavigationView extends HTMLElement {
                     break;
                 if (!this.closest('tab-view'))
                     break; // tabview stuff
-                let eventType = this.hasAttribute(name) ? 'tabhide' : 'tabshow', target = LifecycleObserver;
+                let eventType = this.hasAttribute(name) ? 'tabhide' : 'tabshow', target = lifecycleObserver;
                 // isRecent by 100ms window
                 if (this.#recentBefore && performance.now() - this.#recentBefore.time <= 100) {
                     if (this.#recentBefore.type === 'beforetabreveal') {

package/generated/internal/utils/button-role.d.ts

@@ -0,0 +1 @@
+export default function (target: HTMLElement, attributeName: string | null): void;

package/generated/internal/utils/button-role.js

@@ -0,0 +1,19 @@
+import { I18n } from '../../i18n';
+import { CleanupRegistry } from '../class/cleanup-registry';
+import { default as $ } from './cash';
+import onoff from './onoff';
+function renderPlaceholder(el, role) {
+    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view system-image="magnifying-glass" slot="placeholder"></label-view>`, '>1'));
+    if (role) {
+        label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
+    }
+    else
+        label?.remove();
+}
+export default function (target, attributeName) {
+    renderPlaceholder(target, target.getAttribute(attributeName ?? ''));
+    CleanupRegistry.unregister(target, 'i18n');
+    CleanupRegistry.register(target, onoff('localechange', () => {
+        renderPlaceholder(target, target.getAttribute(attributeName ?? ''));
+    }, I18n.on).on(), 'i18n');
+}

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

@@ -5,10 +5,11 @@ import prev from './prev';
 import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
-declare const DEFAULT: ":scope>:first-child";
+declare const DEFAULT: ">1";
 interface CashFn {
-    (innerHTML: string, selector?: typeof DEFAULT): Element;
-    (innerHTML: string, selector: string): DocumentFragment;
+    (innerHTML: string): DocumentFragment;
+    <T extends Element = Element>(innerHTML: string, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(innerHTML: string, selector: string): T;
     prop: typeof prop;
     nextAll: typeof nextAll;
     prevAll: typeof prevAll;

package/generated/internal/utils/cash/index.js

@@ -5,12 +5,14 @@ import prev from './prev';
 import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
-const DEFAULT = ':scope>:first-child';
-const cash = ((innerHTML, selector = DEFAULT) => {
+const DEFAULT = '>1';
+const cash = ((innerHTML, selector) => {
     const template = Object.assign(document.createElement('template'), { innerHTML });
+    if (!selector)
+        return template.content;
     if (selector === DEFAULT)
-        return template.content.firstElementChild;
-    return template.content;
+        return template.content.firstElementChild; // OVERKILL
+    return template.content.querySelector('>1' === selector ? ':first-child' : selector);
 });
 cash.prop = prop;
 cash.nextAll = nextAll;

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

@@ -1,10 +1,12 @@
 import cash from './cash';
 export { default as add } from './add';
+export { default as buttonRole } from './button-role';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
 export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';
@@ -14,4 +16,5 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
+export { default as toolbarRepositioner } from './toolbar-repositioner';
 export declare const $: typeof cash;

package/generated/internal/utils/index.js

@@ -1,11 +1,13 @@
 // import * as _intl from './intl'
 import cash from './cash';
 export { default as add } from './add';
+export { default as buttonRole } from './button-role';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
 export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';
@@ -15,4 +17,5 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
+export { default as toolbarRepositioner } from './toolbar-repositioner';
 export const $ = cash;

package/generated/internal/utils/is-inside.d.ts

@@ -0,0 +1 @@
+export default function (x: number, y: number, rect: DOMRect): boolean;

package/generated/internal/utils/is-inside.js

@@ -0,0 +1,4 @@
+export default function (x, y, rect) {
+    const { left, right, top, bottom } = rect;
+    return x >= left && x <= right && y >= top && y <= bottom;
+}

package/generated/internal/utils/list-active.js

@@ -1,6 +1,8 @@
 const touchList = new WeakMap();
 function onDown({ target }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     touchList.set(el, setTimeout(() => {
@@ -12,7 +14,9 @@ function onDown({ target }) {
     el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
 }
 function onOver({ target, buttons }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     if (0 === buttons)
@@ -22,7 +26,9 @@ function onOver({ target, buttons }) {
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
 function onLeave({ target }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     el.addEventListener('pointerover', onOver, { once: true, passive: true });
@@ -36,7 +42,9 @@ function onLeave({ target }) {
     // })
 }
 function onCancel({ target }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     // self.requestAnimationFrame(() => {
@@ -50,7 +58,9 @@ function onCancel({ target }) {
     // })
 }
 function onScroll({ target }) {
-    for (const el of target?.querySelectorAll('button,summary') ?? []) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    for (const el of target.querySelectorAll('button,summary') ?? []) {
         el.classList.remove('active');
         if (touchList.has(el))
             clearTimeout(touchList.get(el));

package/generated/internal/utils/toolbar-repositioner.d.ts

@@ -0,0 +1 @@
+export default function (el: HTMLElement, evt: MediaQueryListEvent): void;

package/generated/internal/utils/toolbar-repositioner.js

@@ -0,0 +1,12 @@
+export default function (el, evt) {
+    if (evt.matches) {
+        const newSlot = el.getAttribute('preferred-fine-modal-placement') ?? 'bottom-bar-trailing';
+        if (el.slot !== newSlot)
+            el.dataset.previousSlot = el.slot; // save for later restoration if diff
+        el.slot = el.getAttribute('preferred-fine-modal-placement') ?? 'bottom-bar-trailing';
+    }
+    else if (el.dataset.previousSlot) {
+        el.slot = el.dataset.previousSlot ?? '';
+        delete el.dataset.previousSlot;
+    }
+}

package/generated/snapshot/index.d.ts

@@ -1,5 +1,7 @@
 export declare class Snapshot {
     #private;
+    static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
+    static on: EventTarget;
     static readonly waitReady: Promise<[unknown, void]>;
     static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
     static get config(): Record<string, string> | undefined;

package/generated/snapshot/index.js

@@ -1,6 +1,13 @@
+import { onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
     static waitReady = Promise.all([
         'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', r, { once: true })),
         (async () => {
@@ -32,6 +39,20 @@ export class Snapshot {
         catch {
             console.error('could-not-parse-config');
         }
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
+        this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
+        this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
         console.debug(this.#config);
     }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.20",
+  "version": "0.0.0-dev.21",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -57,19 +57,22 @@
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels && npm run build:barrels:i18n",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
     "postbuild": "npm run format:write",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts",
-    "build:barrels": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n",
+    "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
     "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",
     "predeploy": "rm -rf generated",
-    "deploy":"npm run build:ts && npm run build:scss",
+    "deploy": "npm run build:ts && npm run build:scss",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {

package/scss/_components.scss

@@ -18,12 +18,14 @@
 @forward 'components/content-unavailable-view';
 
 @forward 'components/confirmation-dialog';
+@forward 'components/alert-dialog';
 
 @forward 'components/scroll-view';
 @forward 'components/scroll-view-proxy';
 
 @forward 'components/h-stack';
 @forward 'components/v-stack';
+@forward 'components/h-flex-stack';
 @forward 'components/v-flex-stack';
 
 @forward 'components/scroll-view-toolbars';

package/scss/_functions.scss

@@ -19,3 +19,13 @@
   }
   @return string.slice($parts, 2);
 }
+
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/_transitions.scss

@@ -17,6 +17,7 @@
 @forward 'transitions/glass-prominent-button';
 
 @forward 'transitions/confirmation-dialog';
+@forward 'transitions/alert-dialog';
 
 @forward 'transitions/navigation-split-view';
 

package/scss/colors/_index.scss

@@ -439,7 +439,7 @@ $colors: map.merge(
   //   --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
   // }
 
-  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog']) {
+  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
     // modify background/secondarybg/tertiarybg etc for ELEVATED STYLES!!
     // ANCHOR: level 1
     --face: var(--background); // IMPORTANT: redeclare references scope or it WONT pick up!
@@ -536,7 +536,7 @@ $colors: map.merge(
     }
   }
 
-  :where([is='confirmation-dialog']) {
+  :where([is='confirmation-dialog'], [is='alert-dialog']) {
     --dialogbtnface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --dialogbtnhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --dialogbtnactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));

package/scss/components/_alert-dialog.scss

@@ -0,0 +1,106 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='alert-dialog'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      color: var(--text,);
+
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: fit-content;
+      block-size: fit-content;
+      height: auto; // safari
+      max-inline-size: min(20rem, 80vw);
+      max-block-size: 80vh;
+
+      margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+      margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+      transform: var(--alert--dialog-scale,);
+      opacity: var(--alert--dialog-opacity,);
+
+      position-anchor: --alert-dialog; // overriden
+      position-area: center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+
+      padding-block: 1rem;
+      padding-inline: 1em;
+      gap: 1rem;
+
+      // finally
+      --alert--dialog-scale: scale(1.2);
+      --alert--dialog-opacity: 0.8;
+    }
+
+    &[open] {
+      :where(&) {
+        --alert--dialog-scale: scale(1);
+        --alert--dialog-opacity: 1;
+
+        @starting-style {
+          --alert--dialog-scale: scale(1.2);
+          --alert--dialog-opacity: 0.8;
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        --alert--dialog-scale: scale(0.98);
+        --alert--dialog-opacity: 0;
+      }
+    }
+
+    // SECTION: componentize
+    // > button {
+    //   :where(&) {
+    // @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
+  }
+}
+
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_confirmation-dialog.scss

@@ -66,45 +66,45 @@
     }
 
     // SECTION: componentize
-    > button {
-      :where(&) {
-        @include mixins.componentize(dialogbtn);
-      }
-    }
-
-    :where(&) {
-      --dialogbtnpadistart: 0.6rem;
-      --dialogbtnpadiend: 0.6rem;
-      --dialogbtnpadbstart: 0.6rem;
-      --dialogbtnpadbend: 0.6rem;
-      --dialogbtnradiustl: 1rem;
-      --dialogbtnradiustr: 1rem;
-      --dialogbtnradiusbl: 1rem;
-      --dialogbtnradiusbr: 1rem;
-    }
+    // > button {
+    //   :where(&) {
+    //     @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
   }
 }
 
-@layer #{vars.$colors-layer} {
-  // SECTION: componentize
-  [is='confirmation-dialog'] {
-    > button {
-      @include mixins.add-focus-visible-state {
-        --dialogbtnface: var(--dialogbtnhighlightface,);
-        --dialogbtntext: var(--dialogbtnhighlighttext,);
-      }
-    }
-  }
-}
-
-@layer #{vars.$ui-layer} {
-  // SECTION: componentize
-  [is='confirmation-dialog'] {
-    > button {
-      @include mixins.add-active-state {
-        --dialogbtnface: var(--dialogbtnactiveface,);
-        --dialogbtntext: var(--dialogbtnactivetext,);
-      }
-    }
-  }
-}
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='confirmation-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='confirmation-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_h-stack.scss

@@ -1,8 +1,9 @@
 @use '../vars';
+@use '../mixins';
 @use 'sass:string';
 @use 'sass:list';
 
-$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
 
 @layer #{vars.$components-layer} {
   h-stack {
@@ -23,17 +24,6 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
     //   }
     // }
 
-    @each $template in $h-stack-templates {
-      $parts: string.split('#{$template}', ', ');
-      $result: '';
-      @each $part in $parts {
-        $result: $result + '#{$part},';
-      }
-      $result: string.slice($result, 1, string.length($result) - 1);
-      @debug $result, $template;
-      :where(&[template='#{$result}']) {
-        grid-template-columns: $template;
-      }
-    }
+    @include mixins.make-template($h-stack-templates, grid-template-columns);
   }
 }

package/scss/components/_index.scss

@@ -14,6 +14,7 @@
   [is='tab-bar'],
   [is='full-screen'],
   [is='confirmation-dialog'],
+  [is='alert-dialog'],
   [is='sheet-view'],
   [is='form-view'],
   [is='disclosure-group'],

package/scss/components/_sheet-view.scss

@@ -15,10 +15,20 @@
 
       --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
 
-      :where(&[fine-presentation-large-adaptation='bottom-bar'] > tool-bar > [slot^='top-bar-']) {
+      // :where(&[fine-presentation-large-adaptation='bottom-bar'] > tool-bar > [slot^='top-bar-']) {
+      // FIXME: Add live tooltip
+      // NOTE: By default toolbars items dialogs have only icons, (except if they define/force w/ labelStyle)
+      :where(& > tool-bar > [slot='top-bar-leading'], & > tool-bar > [slot='top-bar-trailing']) {
         --label-style: icon-only;
       }
 
+      // NOTE: By default bottombar items dialogs on iphone have only icons, (except if they define/force w/ labelStyle)
+      @media (pointer: coarse) {
+        :where(& > tool-bar > [slot^='bottom-bar-']) {
+          --label-style: icon-only;
+        }
+      }
+
       @media (pointer: coarse) and (orientation: portrait) {
         clip-path: inset(var(--safe-area-inset-top) 0 0 0 round 2rem 2rem 0 0);
       }

package/scss/components/_v-stack.scss

@@ -1,8 +1,9 @@
 @use '../vars';
 @use 'sass:string';
 @use 'sass:list';
+@use '../mixins';
 
-$v-stack-templates: ((auto auto minmax(0, 1fr)), (auto minmax(0, 1fr)), (auto auto autominmax(0, 1fr)));
+$v-stack-templates: ((auto minmax(0, 1fr)), (auto auto minmax(0, 1fr)), (auto auto auto minmax(0, 1fr)), (auto auto auto auto minmax(0, 1fr)));
 
 @layer #{vars.$components-layer} {
   v-stack {
@@ -19,17 +20,6 @@ $v-stack-templates: ((auto auto minmax(0, 1fr)), (auto minmax(0, 1fr)), (auto au
     // max-width: 100%;
     // }
 
-    @each $template in $v-stack-templates {
-      $parts: string.split('#{$template}', ', ');
-      $result: '';
-      @each $part in $parts {
-        $result: $result + '#{$part},';
-      }
-      $result: string.slice($result, 1, string.length($result) - 1);
-      @debug $result, $template;
-      :where(&[template='#{$result}']) {
-        grid-template-rows: $template;
-      }
-    }
+    @include mixins.make-template($v-stack-templates, grid-template-rows);
   }
 }