@swiftwc/ui 0.0.0-dev.84 → 0.0.0-dev.86

package/generated/client/index.d.ts

@@ -5,6 +5,9 @@ import { type NavigationHost, queryInsertPosition, startViewTransition } from '.
 import { type WebComponentCtor } from '../namespace-browser';
 import { Snapshot } from '../snapshot';
 export declare const polyfills: Map<string, WebComponentCtor>;
+/**
+ * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
+ */
 export declare const alert: (title?: string, message?: string, actions?: {
     label?: string;
     image?: string;

package/generated/client/index.js

@@ -187,6 +187,9 @@ if (mediaQueryList.matches)
 // ac.abort() // dialog closes silently, a rejects with AbortError
 // // or still works standalone
 // a.dismiss() // same effect, no signal needed
+/**
+ * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
+ */
 export const alert = (title, message, actions, options) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     let dialog;

package/generated/components/alert-dialog.d.ts

@@ -1,4 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of an alert presentation.
+ * Use it from the client module like `void alert('Save failed.')`.
+ */
 export declare class AlertDialog extends DialogBase {
     #private;
     constructor();

package/generated/components/alert-dialog.js

@@ -2,6 +2,10 @@ import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of an alert presentation.
+ * Use it from the client module like `void alert('Save failed.')`.
+ */
 export class AlertDialog extends DialogBase {
     constructor() {
         super();

package/generated/components/confirmation-dialog.d.ts

@@ -1,4 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of a confirmation presentation.
+ * Use it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.
+ */
 export declare class ConfirmationDialog extends DialogBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/confirmation-dialog.js

@@ -2,6 +2,10 @@ import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of a confirmation presentation.
+ * Use it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.
+ */
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {
         return ['anchor'];

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

@@ -1,10 +1,13 @@
 /**
+ * @summary A view that arranges its subviews in a horizontal line.
+ *
+ * @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 {@blockSet} alignment - The cross-axis alignment
+ * @attr {@inlineSet} distribution - The main-axis alignment
+ * @attr {@inlinePlacementSet} placement - The main-axis alignment
  *
  */
 export declare class HStack extends HTMLElement {

package/generated/components/h-stack.js

@@ -1,11 +1,14 @@
 import { devFlags } from '../internal/utils';
 /**
+ * @summary A view that arranges its subviews in a horizontal line.
+ *
+ * @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 {@blockSet} alignment - The cross-axis alignment
+ * @attr {@inlineSet} distribution - The main-axis alignment
+ * @attr {@inlinePlacementSet} placement - The main-axis alignment
  *
  */
 export class HStack extends HTMLElement {

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

@@ -2,6 +2,8 @@
  *
  * @attr {@fontSet} font - Sets the default font for text in this view.
  *
+ * @slot icon
+ *
  */
 export declare class LabelView extends HTMLElement {
     #private;

package/generated/components/label-view.js

@@ -4,6 +4,8 @@ import { html, render } from '../tpl';
  *
  * @attr {@fontSet} font - Sets the default font for text in this view.
  *
+ * @slot icon
+ *
  */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {

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

@@ -1,5 +1,7 @@
 /**
  * @summary A control for presenting a menu of actions.
+ *
+ * @slot label
  */
 export declare class MenuView extends HTMLElement {
     #private;

package/generated/components/menu-view.js

@@ -3,6 +3,8 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff, renderLabel, touchGlass } from '../internal/utils';
 /**
  * @summary A control for presenting a menu of actions.
+ *
+ * @slot label
  */
 export class MenuView extends HTMLElement {
     static get observedAttributes() {

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

@@ -19,7 +19,9 @@ export type Dictionary = DictEntry[];
  *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @slot label
  * @slot list
+ * @slot validity-options
  */
 export declare class PickerView extends FormAssociatedBase {
     #private;

package/generated/components/picker-view.js

@@ -124,7 +124,9 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
  *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @slot label
  * @slot list
+ * @slot validity-options
  */
 export class PickerView extends FormAssociatedBase {
     static get ATTR() {

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

@@ -1,5 +1,7 @@
 /**
  * @summary A view that shows the progress toward completion of a task.
+ *
+ * @slot current-value
  */
 export declare class ProgressView extends HTMLElement {
     #private;

package/generated/components/progress-view.js

@@ -6,6 +6,8 @@ import { Snapshot } from '../snapshot';
 const progressViewStyles = ['circular', 'linear'];
 /**
  * @summary A view that shows the progress toward completion of a task.
+ *
+ * @slot current-value
  */
 export class ProgressView extends HTMLElement {
     static get observedAttributes() {

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

@@ -1,3 +1,7 @@
+/**
+ * @slot top-bar-principal
+ * @slot bottom-bar-principal
+ */
 export declare class ScrollView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/scroll-view.js

@@ -5,6 +5,10 @@ import { ResizeObserverSingleton } from '../internal/class/resize-observer-singl
 import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
 import { html, render } from '../tpl';
 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'];

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';
+/**
+ * @slot header
+ * @slot footer
+ */
 export class SectionView extends HTMLElement {
     static get observedAttributes() {
         return ['header', 'footer'];

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

@@ -8,6 +8,14 @@ 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;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.84",
+  "version": "0.0.0-dev.86",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -79,6 +79,7 @@
   },
   "devDependencies": {
     "doctrine": "^3.0.0",
+    "gonzales-pe": "^4.3.0",
     "happy-dom": "^20.7.0",
     "sass": "^1.98.0",
     "ts-morph": "^28.0.0",