@swiftwc/ui 0.0.0-dev.85 → 0.0.0-dev.87

package/generated/components/scroll-view.js

@@ -3,11 +3,15 @@ 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 { html, render } from '../tpl';
+import { html, queryMorph } from '../morphdom';
 const observers = new ResizeObserverSingleton();
+/**
+ * @slot top-bar-principal
+ * @slot bottom-bar-principal
+ */
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
-        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-bar-title-display-mode'];
+        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-icon', 'navigation-bar-title-display-mode'];
     }
     static #template;
     static get template() {
@@ -51,9 +55,12 @@ export class ScrollView extends HTMLElement {
             case 'navigation-inline-subtitle':
                 this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
                 break;
-            case 'navigation-title':
-                //
+            case 'navigation-title': {
+                if (oldValue === newValue)
+                    return;
+                this.#renderNavTitleComponent(newValue, null, this.getAttribute('navigation-icon'));
                 break;
+            }
             case 'navigation-bar-title-display-mode':
                 if (oldValue === newValue)
                     break;
@@ -193,11 +200,27 @@ export class ScrollView extends HTMLElement {
         //   this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'))
         // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
         // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
-        const container = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"></v-stack>`, '>1'));
-        render(html `
+        // const container = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"></v-stack>`, '>1'))
+        queryMorph('[slot=top-bar-principal]', html `<v-stack spacing="0" alignment="fill" slot="top-bar-principal">
         ${title ? html `<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
         ${subtitle ? html `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
-      `, container);
+      </v-stack>`, this);
+        // render(
+        //   html`
+        //     ${title ? html`<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
+        //     ${subtitle ? html`<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
+        //   `,
+        //   container
+        // )
+    };
+    #renderNavTitleComponent = (title, subtitle, icon) => {
+        if (!title)
+            return this.querySelector(':scope>v-stack>navigation-title:not([slot])')?.remove?.();
+        // const container = ((vs = this.querySelector<HTMLElement>(':scope>v-stack') ?? (this.appendChild($(`<v-stack></v-stack>`, '>1')) as HTMLElement)) =>
+        //   vs.querySelector<HTMLElement>(':scope>navigation-title:not([slot])') ??
+        //   vs.appendChild($(html`<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`.toString(), '>1')))()
+        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(`<v-stack></v-stack>`, '>1'));
+        queryMorph('navigation-title:not([slot])', html `<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`, container);
     };
 }
 _a = ScrollView;

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

@@ -1,3 +1,7 @@
+/**
+ * @slot header
+ * @slot footer
+ */
 export declare class SectionView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/section-view.js

@@ -1,5 +1,9 @@
 import { $, devFlags } from '../internal/utils';
-import { html, render } from '../tpl';
+import { html, queryMorph } from '../morphdom';
+/**
+ * @slot header
+ * @slot footer
+ */
 export class SectionView extends HTMLElement {
     static get observedAttributes() {
         return ['header', 'footer'];
@@ -38,24 +42,40 @@ export class SectionView extends HTMLElement {
         // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'header':
-                if (!newValue) {
-                    this.querySelector(':scope>[slot=header]')?.remove();
-                    break;
-                }
-                const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }));
-                render(html `<label-view line-limit="1" truncation-mode="tail" font="callout">
-            <span>${newValue}</span>
-          </label-view>`, header);
+                // if (!newValue) {
+                //   this.querySelector(':scope>[slot=header]')?.remove()
+                //   break
+                // }
+                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
+                queryMorph('[slot=header]', html `<header slot="header">
+            <label-view line-limit="1" truncation-mode="tail" font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </header>`, this, { removeIf: !newValue });
+                // render(
+                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
+                //     <span>${newValue}</span>
+                //   </label-view>`,
+                //   header
+                // )
                 break;
             case 'footer':
-                if (!newValue) {
-                    this.querySelector(':scope>[slot=footer]')?.remove();
-                    break;
-                }
-                const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }));
-                render(html `<label-view line-limit="1" truncation-mode="tail" font="callout">
-            <span>${newValue}</span>
-          </label-view>`, footer);
+                // if (!newValue) {
+                //   this.querySelector(':scope>[slot=footer]')?.remove()
+                //   break
+                // }
+                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
+                queryMorph('[slot=footer]', html `<footer slot="footer">
+            <label-view line-limit="1" truncation-mode="tail" font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </footer>`, this, { removeIf: !newValue });
+                // render(
+                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
+                //     <span>${newValue}</span>
+                //   </label-view>`,
+                //   footer
+                // )
                 break;
         }
         // })

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

@@ -2,6 +2,14 @@
  * @summary Display selectable, sortable data arranged in rows and columns.
  *
  * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ *
+ * @slot header-leading
+ * @slot header-principal
+ * @slot header-trailing
+ * @slot column
+ * @slot footer-leading
+ * @slot footer-principal
+ * @slot footer-trailing
  */
 export declare class TableView extends HTMLElement {
     #private;

package/generated/components/table-view.js

@@ -2,12 +2,21 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, devFlags, listActive, onoff, renderLabelTitle } from '../internal/utils';
+import { $, devFlags, listActive, onoff } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 /**
  * @summary Display selectable, sortable data arranged in rows and columns.
  *
  * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ *
+ * @slot header-leading
+ * @slot header-principal
+ * @slot header-trailing
+ * @slot column
+ * @slot footer-leading
+ * @slot footer-principal
+ * @slot footer-trailing
  */
 export class TableView extends HTMLElement {
     #styleObserver;
@@ -105,11 +114,9 @@ export class TableView extends HTMLElement {
           <label-view></label-view>
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
-      </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
-            if (title)
-                renderLabelTitle(title, node.textContent.trim()); //title?.setAttribute('title', node.textContent.trim())
-            if (subTitle)
-                renderLabelTitle(subTitle, node.ariaSort ?? ''); //subTitle?.setAttribute('title', node.ariaSort ?? '')
+      </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
+            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() }); //renderLabelTitle(title, node.textContent.trim()) //title?.setAttribute('title', node.textContent.trim())
+            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') }); //renderLabelTitle(subTitle, node.ariaSort ?? '') //subTitle?.setAttribute('title', node.ariaSort ?? '')
             this.#compactToolbarItem.appendChild(btn);
         }
     };

package/generated/components/text-field.js

@@ -3,7 +3,8 @@ 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, renderLabel, set } from '../internal/utils';
+import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @slot label
@@ -137,7 +138,7 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue)
                 // this.#sendValueToForm()
                 break;
             case 'disabled':

package/generated/components/toggle-view.js

@@ -2,7 +2,8 @@ var _a;
 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 { $, devFlags, kebabCase, onoff, renderLabel } from '../internal/utils';
+import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 const toggleStyles = ['switch', 'button'];
 /**
  * @slot label
@@ -84,7 +85,7 @@ export class ToggleView extends FormAssociatedBase {
                 this.#sendValueToForm(this.#connected);
                 break;
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))

package/generated/components/tool-bar-item.js

@@ -28,11 +28,11 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
                 const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
                 if (['confirmation-action', 'cancellation-action'].includes(role))
                     Snapshot.waitReady.then(() => {
-                        ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        ensurePlaceholder(this.querySelector(':scope>button'), role, tKey, Snapshot.config);
                         this.#mutationObserver = new MutationObserver((mutations) => {
                             for (const { target } of mutations)
                                 if (target instanceof HTMLElement)
-                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey, Snapshot.config);
                         });
                         this.#mutationObserver.observe(this, {
                             childList: true,

package/generated/components/v-stack.d.ts

@@ -1,13 +1,15 @@
 /**
+ * @summary A view that arranges its subviews in a vertical line.
+ *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
  *
- * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ * @attr {@templateSet} template - The main-axis grid template
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
- * @attr {@alignmentSet} alignment - The cross-axis alignment
- * @attr {@distributionSet} distribution - The main-axis alignment
- * @attr {@placementSet} placement - The main-axis alignment
+ * @attr {@inlineSet} alignment - The cross-axis alignment
+ * @attr {@blockSet} distribution - The main-axis alignment
+ * @attr {@blockPlacementSet} placement - The main-axis alignment
  *
  */
 export declare class VStack extends HTMLElement {

package/generated/components/v-stack.js

@@ -1,14 +1,16 @@
 import { devFlags } from '../internal/utils';
 /**
+ * @summary A view that arranges its subviews in a vertical line.
+ *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
  *
- * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ * @attr {@templateSet} template - The main-axis grid template
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
- * @attr {@alignmentSet} alignment - The cross-axis alignment
- * @attr {@distributionSet} distribution - The main-axis alignment
- * @attr {@placementSet} placement - The main-axis alignment
+ * @attr {@inlineSet} alignment - The cross-axis alignment
+ * @attr {@blockSet} distribution - The main-axis alignment
+ * @attr {@blockPlacementSet} placement - The main-axis alignment
  *
  */
 export class VStack extends HTMLElement {

package/generated/css/index.css

@@ -2055,17 +2055,8 @@
     place-content: safe center;
     gap: 1rem;
   }
-  :where(h-stack[template="auto spacer"]) {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
-  :where(h-stack[template="spacer auto"]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-  :where(h-stack[template="auto spacer auto auto"]) {
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-  }
-  :where(h-stack[template="auto spacer auto"]) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
+  :where(h-stack[template=spacer]) {
+    grid-template-columns: minmax(0, 1fr);
   }
   :where(h-stack[template="repeat(1,spacer)"]) {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -2097,9 +2088,117 @@
   :where(h-stack[template="repeat(10,spacer)"]) {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
+  :where(h-stack[template="spacer auto"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  :where(h-stack[template="repeat(1,spacer) auto"]) {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
+  }
   :where(h-stack[template="repeat(2,spacer) auto"]) {
     grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   }
+  :where(h-stack[template="repeat(3,spacer) auto"]) {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(4,spacer) auto"]) {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(5,spacer) auto"]) {
+    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(6,spacer) auto"]) {
+    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(7,spacer) auto"]) {
+    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(8,spacer) auto"]) {
+    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(9,spacer) auto"]) {
+    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="repeat(10,spacer) auto"]) {
+    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
+  }
+  :where(h-stack[template="auto spacer"]) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(1,auto) spacer"]) {
+    grid-template-columns: repeat(1, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(2,auto) spacer"]) {
+    grid-template-columns: repeat(2, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(3,auto) spacer"]) {
+    grid-template-columns: repeat(3, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(4,auto) spacer"]) {
+    grid-template-columns: repeat(4, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(5,auto) spacer"]) {
+    grid-template-columns: repeat(5, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(6,auto) spacer"]) {
+    grid-template-columns: repeat(6, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(7,auto) spacer"]) {
+    grid-template-columns: repeat(7, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(8,auto) spacer"]) {
+    grid-template-columns: repeat(8, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(9,auto) spacer"]) {
+    grid-template-columns: repeat(9, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="repeat(10,auto) spacer"]) {
+    grid-template-columns: repeat(10, auto) minmax(0, 1fr);
+  }
+  :where(h-stack[template="auto auto spacer"]) {
+    grid-template-columns: auto auto minmax(0, 1fr);
+  }
+  :where(h-stack[template="auto auto auto spacer"]) {
+    grid-template-columns: auto auto auto minmax(0, 1fr);
+  }
+  :where(h-stack[template="auto auto auto auto spacer"]) {
+    grid-template-columns: auto auto auto auto minmax(0, 1fr);
+  }
+  :where(h-stack[template="auto spacer auto"]) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  :where(h-stack[template="repeat(1,auto) spacer repeat(1,auto)"]) {
+    grid-template-columns: repeat(1, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(h-stack[template="repeat(1,auto) spacer repeat(2,auto)"]) {
+    grid-template-columns: repeat(1, auto) minmax(0, 1fr) repeat(2, auto);
+  }
+  :where(h-stack[template="repeat(1,auto) spacer repeat(3,auto)"]) {
+    grid-template-columns: repeat(1, auto) minmax(0, 1fr) repeat(3, auto);
+  }
+  :where(h-stack[template="repeat(1,auto) spacer repeat(4,auto)"]) {
+    grid-template-columns: repeat(1, auto) minmax(0, 1fr) repeat(4, auto);
+  }
+  :where(h-stack[template="repeat(1,auto) spacer repeat(5,auto)"]) {
+    grid-template-columns: repeat(1, auto) minmax(0, 1fr) repeat(5, auto);
+  }
+  :where(h-stack[template="repeat(2,auto) spacer repeat(1,auto)"]) {
+    grid-template-columns: repeat(2, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(h-stack[template="repeat(3,auto) spacer repeat(1,auto)"]) {
+    grid-template-columns: repeat(3, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(h-stack[template="repeat(4,auto) spacer repeat(1,auto)"]) {
+    grid-template-columns: repeat(4, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(h-stack[template="repeat(5,auto) spacer repeat(1,auto)"]) {
+    grid-template-columns: repeat(5, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(h-stack[template="repeat(2,auto) spacer repeat(2,auto)"]) {
+    grid-template-columns: repeat(2, auto) minmax(0, 1fr) repeat(2, auto);
+  }
+  :where(h-stack[template="auto spacer auto auto"]) {
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+  }
 }
 @layer sw-components {
   :where(v-stack) {
@@ -2108,9 +2207,105 @@
     place-content: safe center;
     gap: 1rem;
   }
+  :where(v-stack[template=spacer]) {
+    grid-template-rows: minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(1,spacer)"]) {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(2,spacer)"]) {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(3,spacer)"]) {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(4,spacer)"]) {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(5,spacer)"]) {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(6,spacer)"]) {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(7,spacer)"]) {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(8,spacer)"]) {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(9,spacer)"]) {
+    grid-template-rows: repeat(9, minmax(0, 1fr));
+  }
+  :where(v-stack[template="repeat(10,spacer)"]) {
+    grid-template-rows: repeat(10, minmax(0, 1fr));
+  }
+  :where(v-stack[template="spacer auto"]) {
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+  :where(v-stack[template="repeat(1,spacer) auto"]) {
+    grid-template-rows: repeat(1, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(2,spacer) auto"]) {
+    grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(3,spacer) auto"]) {
+    grid-template-rows: repeat(3, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(4,spacer) auto"]) {
+    grid-template-rows: repeat(4, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(5,spacer) auto"]) {
+    grid-template-rows: repeat(5, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(6,spacer) auto"]) {
+    grid-template-rows: repeat(6, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(7,spacer) auto"]) {
+    grid-template-rows: repeat(7, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(8,spacer) auto"]) {
+    grid-template-rows: repeat(8, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(9,spacer) auto"]) {
+    grid-template-rows: repeat(9, minmax(0, 1fr)) auto;
+  }
+  :where(v-stack[template="repeat(10,spacer) auto"]) {
+    grid-template-rows: repeat(10, minmax(0, 1fr)) auto;
+  }
   :where(v-stack[template="auto spacer"]) {
     grid-template-rows: auto minmax(0, 1fr);
   }
+  :where(v-stack[template="repeat(1,auto) spacer"]) {
+    grid-template-rows: repeat(1, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(2,auto) spacer"]) {
+    grid-template-rows: repeat(2, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(3,auto) spacer"]) {
+    grid-template-rows: repeat(3, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(4,auto) spacer"]) {
+    grid-template-rows: repeat(4, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(5,auto) spacer"]) {
+    grid-template-rows: repeat(5, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(6,auto) spacer"]) {
+    grid-template-rows: repeat(6, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(7,auto) spacer"]) {
+    grid-template-rows: repeat(7, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(8,auto) spacer"]) {
+    grid-template-rows: repeat(8, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(9,auto) spacer"]) {
+    grid-template-rows: repeat(9, auto) minmax(0, 1fr);
+  }
+  :where(v-stack[template="repeat(10,auto) spacer"]) {
+    grid-template-rows: repeat(10, auto) minmax(0, 1fr);
+  }
   :where(v-stack[template="auto auto spacer"]) {
     grid-template-rows: auto auto minmax(0, 1fr);
   }
@@ -2120,6 +2315,42 @@
   :where(v-stack[template="auto auto auto auto spacer"]) {
     grid-template-rows: auto auto auto auto minmax(0, 1fr);
   }
+  :where(v-stack[template="auto spacer auto"]) {
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+  :where(v-stack[template="repeat(1,auto) spacer repeat(1,auto)"]) {
+    grid-template-rows: repeat(1, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(v-stack[template="repeat(1,auto) spacer repeat(2,auto)"]) {
+    grid-template-rows: repeat(1, auto) minmax(0, 1fr) repeat(2, auto);
+  }
+  :where(v-stack[template="repeat(1,auto) spacer repeat(3,auto)"]) {
+    grid-template-rows: repeat(1, auto) minmax(0, 1fr) repeat(3, auto);
+  }
+  :where(v-stack[template="repeat(1,auto) spacer repeat(4,auto)"]) {
+    grid-template-rows: repeat(1, auto) minmax(0, 1fr) repeat(4, auto);
+  }
+  :where(v-stack[template="repeat(1,auto) spacer repeat(5,auto)"]) {
+    grid-template-rows: repeat(1, auto) minmax(0, 1fr) repeat(5, auto);
+  }
+  :where(v-stack[template="repeat(2,auto) spacer repeat(1,auto)"]) {
+    grid-template-rows: repeat(2, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(v-stack[template="repeat(3,auto) spacer repeat(1,auto)"]) {
+    grid-template-rows: repeat(3, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(v-stack[template="repeat(4,auto) spacer repeat(1,auto)"]) {
+    grid-template-rows: repeat(4, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(v-stack[template="repeat(5,auto) spacer repeat(1,auto)"]) {
+    grid-template-rows: repeat(5, auto) minmax(0, 1fr) repeat(1, auto);
+  }
+  :where(v-stack[template="repeat(2,auto) spacer repeat(2,auto)"]) {
+    grid-template-rows: repeat(2, auto) minmax(0, 1fr) repeat(2, auto);
+  }
+  :where(v-stack[template="auto spacer auto auto"]) {
+    grid-template-rows: auto minmax(0, 1fr) auto auto;
+  }
 }
 @layer sw-components {
   :where(h-flex-stack) {

package/generated/internal/utils/ensure-placeholder.d.ts

@@ -1 +1 @@
-export default function (target: HTMLElement | null, role: string | null, titleKey?: string | null): void;
+export default function (target: HTMLElement | null, role: string | null, titleKey?: string | null, config?: Record<string, string>): void;

package/generated/internal/utils/ensure-placeholder.js

@@ -1,7 +1,6 @@
 import { I18n } from '../../i18n';
-import { Snapshot } from '../../snapshot';
 import { default as $ } from './cash';
-function renderPlaceholder(el, role, titleKey) {
+function renderPlaceholder(el, role, titleKey, config) {
     // if (!el.isConnected) return
     // self.requestAnimationFrame(() => {
     //   if (!el.isConnected) return
@@ -9,7 +8,7 @@ function renderPlaceholder(el, role, titleKey) {
     switch (role) {
         case 'cancel':
             label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
-            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+            label.setAttribute('system-image', config['cancel-button-icon']);
             break;
         case 'close':
             if (label.closest('[is=alert-dialog]')) {
@@ -17,24 +16,24 @@ function renderPlaceholder(el, role, titleKey) {
             }
             else {
                 label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close);
-                label.setAttribute('system-image', Snapshot.config['close-button-icon']);
+                label.setAttribute('system-image', config['close-button-icon']);
             }
             break;
         case 'confirm':
             label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
-            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            label.setAttribute('system-image', config['confirm-button-icon']);
             break;
         case 'confirmation-action':
             label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
-            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            label.setAttribute('system-image', config['confirm-button-icon']);
             break;
         case 'cancellation-action':
             label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
-            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+            label.setAttribute('system-image', config['cancel-button-icon']);
             break;
         case 'destructive':
             label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive);
-            label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
+            label.setAttribute('system-image', config['delete-button-icon']);
             break;
         default:
             label?.remove();
@@ -45,7 +44,7 @@ function renderPlaceholder(el, role, titleKey) {
     // } else label?.remove()
     // })
 }
-export default function (target, role, titleKey) {
+export default function (target, role, titleKey, config) {
     if (!target)
         return;
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;

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

@@ -13,9 +13,6 @@ 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';