@swiftwc/ui 0.0.0-dev.18 → 0.0.0-dev.19

package/generated/i18n/index.js

@@ -1,3 +1,10 @@
+import { el, en } from './locales';
+export function defineTranslations(factory) {
+    return factory;
+}
+/**
+ * @fires localechange - On html[lang] change!
+ */
 export class I18n {
     static #readyCalled = false;
     static #tag = 'en';
@@ -7,8 +14,30 @@ export class I18n {
     static #decimalSeparator = '.';
     static #dateSeparator = '/';
     static #dateOrder = ['month', 'day', 'year'];
+    static #lang = 'en';
+    /** Registry: language code → factory. Pre-seeded with 'en'. */
+    static #factories = new Map([
+        ['en', en],
+        ['el', el],
+    ]);
+    /** Cache: language code → resolved translation object. */
+    static #strings = new Map();
     static on = new EventTarget();
     // ----------------------------
+    // Public registration API
+    // ----------------------------
+    /**
+     * Register a translation factory for a language.
+     * Call this before the language is first needed.
+     *
+     * @example
+     * I18n.register('el', () => ({ SearchUnavailableContent: { … } }))
+     */
+    static register(lang, factory) {
+        this.#factories.set(lang, factory);
+        this.#strings.delete(lang); // bust cache so next t() re-resolves
+    }
+    // ----------------------------
     // Lazy init
     // ----------------------------
     static #ensureReady() {
@@ -16,72 +45,42 @@ export class I18n {
             this.setOwnConfig();
     }
     // ----------------------------
-    // Proxy with typed target
-    // ----------------------------
-    static _props = new Proxy({}, {
-        get: (_, prop) => {
-            this.#ensureReady();
-            switch (prop) {
-                case 'tag':
-                    return this.#tag;
-                case 'options':
-                    return this.#options;
-                case 'locale':
-                    return this.#locale;
-                case 'decimalSeparator':
-                    return this.#decimalSeparator;
-                case 'dateSeparator':
-                    return this.#dateSeparator;
-                case 'dateOrder':
-                    return this.#dateOrder;
-            }
-        },
-        set: (_, prop, value) => {
-            switch (prop) {
-                case 'tag':
-                    this.#observer?.disconnect();
-                    this.#observer = undefined;
-                    this.#tag = value;
-                    this.#getOwnConfig();
-                    break;
-                case 'options':
-                    this.#options = value;
-                    this.#getOwnConfig();
-                    break;
-            }
-            return true;
-        },
-    });
-    // ----------------------------
     // Accessors
     // ----------------------------
     static get tag() {
-        return this._props.tag;
+        this.#ensureReady();
+        return this.#tag;
     }
     static set tag(val) {
-        this._props.tag = val;
+        this.#observer?.disconnect();
+        this.#observer = undefined;
+        this.#tag = val;
+        this.#getOwnConfig();
     }
     static get options() {
-        return this._props.options;
+        this.#ensureReady();
+        return this.#options;
     }
     static set options(val) {
-        this._props.options = val;
+        this.#options = val;
+        this.#getOwnConfig();
     }
     static get locale() {
-        return this._props.locale;
+        this.#ensureReady();
+        return this.#locale;
     }
     static get decimalSeparator() {
-        return this._props.decimalSeparator;
+        this.#ensureReady();
+        return this.#decimalSeparator;
     }
     static get dateSeparator() {
-        return this._props.dateSeparator;
+        this.#ensureReady();
+        return this.#dateSeparator;
     }
     static get dateOrder() {
-        return this._props.dateOrder;
+        this.#ensureReady();
+        return this.#dateOrder;
     }
-    // ----------------------------
-    // Core logic
-    // ----------------------------
     static setOwnConfig(options) {
         if (!this.#readyCalled)
             this.#readyCalled = true;
@@ -100,7 +99,7 @@ export class I18n {
             return;
         this.#tag = document.documentElement.lang;
         this.#getOwnConfig();
-        this.on.dispatchEvent(new CustomEvent('change'));
+        this.on.dispatchEvent(new CustomEvent('localechange', { detail: { lang: this.#tag } }));
     }
     static #getOwnConfig() {
         try {
@@ -109,7 +108,6 @@ export class I18n {
         catch {
             this.#locale = new Intl.Locale('en');
         }
-        console.debug(this.#locale);
         try {
             const nf = new Intl.NumberFormat(this.#locale);
             const parts = nf.formatToParts(1.1);
@@ -118,11 +116,10 @@ export class I18n {
         catch {
             this.#decimalSeparator = '.';
         }
-        console.debug(this.#decimalSeparator);
         try {
             const df = new Intl.DateTimeFormat(this.#locale);
             const parts = df.formatToParts(new Date(2000, 11, 31));
-            this.#dateOrder = parts.filter(({ type }) => type !== 'literal')?.map(({ type }) => type) ?? ['month', 'day', 'year'];
+            this.#dateOrder = parts.filter(({ type }) => type !== 'literal').map(({ type }) => type) ?? ['month', 'day', 'year'];
             this.#dateSeparator =
                 parts
                     .filter(({ type }) => type === 'literal')
@@ -133,7 +130,38 @@ export class I18n {
             this.#dateOrder = ['month', 'day', 'year'];
             this.#dateSeparator = '/';
         }
-        console.debug(`${I18n.name} ${this.#dateSeparator}`);
-        console.debug(`${I18n.name} ${this.#dateOrder}`);
+        try {
+            this.#lang = this.#resolveLanguage(this.#tag);
+        }
+        catch {
+            this.#lang = 'en';
+        }
+    }
+    /**
+     * Resolve the best available language for a given BCP 47 tag.
+     * Tries the full tag, then just the base language, then falls back to 'en'.
+     */
+    static #resolveLanguage(tag) {
+        const lang = tag instanceof Intl.Locale ? tag.language : new Intl.Locale(tag || 'en').language;
+        if (this.#factories.has(String(tag)))
+            return String(tag);
+        if (this.#factories.has(lang))
+            return lang;
+        return 'en';
+    }
+    /** Look up a top-level translation key for the current language, falling back to 'en'. */
+    static t(key) {
+        this.#ensureReady();
+        if (!this.#strings.has(this.#lang)) {
+            const factory = this.#factories.get(this.#lang) ?? en;
+            this.#strings.set(this.#lang, factory());
+        }
+        const current = this.#strings.get(this.#lang);
+        if (key in current)
+            return current[key];
+        // Key missing from current language — fall back to en
+        if (!this.#strings.has('en'))
+            this.#strings.set('en', en());
+        return this.#strings.get('en')[key];
     }
 }

package/generated/i18n/locales/el.d.ts

@@ -0,0 +1,8 @@
+declare const _default: () => {
+    readonly SearchUnavailableContent: {
+        readonly NoLabel: "Κανένα αποτέλεσμα";
+        readonly Label: "Κανένα αποτέλεσμα για «{search}»";
+        readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
+    };
+};
+export default _default;

package/generated/i18n/locales/el.js

@@ -0,0 +1,8 @@
+import { defineTranslations } from '../index';
+export default defineTranslations(() => ({
+    SearchUnavailableContent: {
+        NoLabel: 'Κανένα αποτέλεσμα',
+        Label: 'Κανένα αποτέλεσμα για «{search}»',
+        Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
+    },
+}));

package/generated/i18n/locales/en.d.ts

@@ -0,0 +1,8 @@
+declare const _default: () => {
+    readonly SearchUnavailableContent: {
+        readonly NoLabel: "No Results";
+        readonly Label: "No Results for ”{search}”";
+        readonly Description: "Check the spelling or try a new search.";
+    };
+};
+export default _default;

package/generated/i18n/locales/en.js

@@ -0,0 +1,8 @@
+import { defineTranslations } from '../index';
+export default defineTranslations(() => ({
+    SearchUnavailableContent: {
+        NoLabel: 'No Results',
+        Label: 'No Results for ”{search}”',
+        Description: 'Check the spelling or try a new search.',
+    },
+}));

package/generated/i18n/locales/index.d.ts

@@ -0,0 +1,4 @@
+export { default as el } from './el';
+export * from './el';
+export { default as en } from './en';
+export * from './en';

package/generated/i18n/locales/index.js

@@ -0,0 +1,4 @@
+export { default as el } from './el';
+export * from './el';
+export { default as en } from './en';
+export * from './en';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.18",
+  "version": "0.0.0-dev.19",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -57,12 +57,13 @@
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels && npm run build:barrels:i18n",
     "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 -D -q -S -d ./js/components -e \".\\.test\\.ts\"",
+    "build:barrels": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "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",
@@ -76,5 +77,8 @@
     "tsx": "^4.21.0",
     "vitest": "^4.0.18"
   },
-  "customElements": "custom-elements/en.json"
+  "customElements": "custom-elements/en.json",
+  "imports": {
+    "#internal/*": "./js/internal/*"
+  }
 }

package/scss/_components.scss

@@ -15,6 +15,8 @@
 
 @forward 'components/sheet-view';
 
+@forward 'components/content-unavailable-view';
+
 @forward 'components/confirmation-dialog';
 
 @forward 'components/scroll-view';

package/scss/components/_bordered-button.scss

@@ -20,3 +20,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_bordered-prominent-button.scss

@@ -17,3 +17,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_borderless-button.scss

@@ -17,3 +17,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='borderless-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_content-unavailable-view.scss

@@ -0,0 +1,45 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  content-unavailable-view {
+    :where(&) {
+      place-content: center;
+      place-items: center;
+
+      text-align: center;
+
+      row-gap: 1rem;
+
+      &::part(content-unavailable-actions-stack) {
+        row-gap: 0.2rem;
+      }
+
+      &::part(content-unavailable-title-stack) {
+        --label-flow: vertical;
+
+        --label-font: title3; // NOTE: Safari fix
+      }
+    }
+
+    > :not([slot]) {
+      --label-image-size: 5rem;
+
+      --label-gap: 1rem;
+
+      // --label-font: title3;
+    }
+
+    &:not(:has(> [slot='description'])) {
+      :where(&)::part(content-unavailable-description-stack) {
+        display: none;
+      }
+    }
+
+    &:not(:has(> [slot='actions'])) {
+      :where(&)::part(content-unavailable-actions-stack) {
+        display: none;
+      }
+    }
+  }
+}

package/scss/components/_glass-button.scss

@@ -22,3 +22,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='glass-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_glass-prominent-button.scss

@@ -22,3 +22,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='glass-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_index.scss

@@ -27,6 +27,7 @@
   [is='glass-prominent-button'],
   list-view,
   table-view,
+  content-unavailable-view,
   tool-bar-item,
   tool-bar-item-group,
   sidebar-toggle,
@@ -45,6 +46,9 @@
     }
   }
 
+  :where(content-unavailable-view)::part(content-unavailable-title-stack),
+  :where(content-unavailable-view)::part(content-unavailable-description-stack),
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),

package/scss/components/_label-view.scss

@@ -3,6 +3,19 @@
 @use 'sass:string';
 @use 'sass:map';
 
+// scalpel precision
+@property --label-gap {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --label-image-size {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
 // @property --label-style {
 //   syntax: 'title-and-icon | icon-only | title-only | automatic';
 //   inherits: true;
@@ -55,7 +68,8 @@ $label-line-ifs: (
     --label--host-align-items: center;
     --label--host-justify-items: normal;
 
-    --label--host-gap: 0.3rem;
+    --label-gap: 0.3rem;
+    --label--host-gap: var(--label-gap);
 
     --label--iconstack-display: grid;
     --label--titlestack-display: grid;
@@ -75,7 +89,8 @@ $label-line-ifs: (
     --label--host-align-items: normal;
     --label--host-justify-items: center;
 
-    --label--host-gap: 0.3rem;
+    --label-gap: 0.3rem;
+    --label--host-gap: var(--label-gap);
 
     --label--iconstack-display: grid;
     --label--titlestack-display: grid;
@@ -158,7 +173,10 @@ $label-line-ifs: (
       grid-template-rows: var(--label--host-grid-template-rows,);
       // grid-template-areas: 'label-image-stack label-title-stack';
 
-      gap: var(--label--host-gap,);
+      gap: var(--label--host-gap,); //;
+
+      --label-image-size: 2rem;
+      --label-imagestack-fontsize: var(--label-image-size);
       // gap: 0;
 
       white-space: var(--label--host-white-space,);
@@ -184,8 +202,8 @@ $label-line-ifs: (
       &::part(label-image-stack) {
         aspect-ratio: 1 / 1;
 
-        inline-size: var(--label-image-size, 2rem);
-        font-size: var(--label-image-size, 2rem);
+        inline-size: var(--label-imagestack-fontsize);
+        font-size: var(--label-imagestack-fontsize);
 
         // line-height: 1;
 
@@ -255,34 +273,23 @@ $label-line-ifs: (
         --label--host-grid-template-columns: if(
           style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
             style(--label-style: title-and-icon): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ;
-            else: if(
-              style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;)
-                ; else: minmax(0, 1fr) ;
-            )
-            ;
+            else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
         );
         --label--host-grid-template-rows: if(
           style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
             style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
-            else: if(
-              style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;)
-                ; else: minmax(0, 1fr) ;
-            )
-            ;
+            else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
         );
 
-        --label--host-gap: if(
-          style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;
-        );
+        --label-gap: if(style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;);
+        --label--host-gap: if(style(--label-style: title-and-icon): var(--label-gap) ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): var(--label-gap) ;) ;);
 
         --label--iconstack-display: if(
-          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ;
-            else: if(style(--label--has-icon: yes): grid ; else: none;) ;
+          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
         );
 
         --label--titlestack-display: if(
-          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ;
-            else: if(style(--label--has-title: yes): grid ; else: none;) ;
+          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
         );
       }
     }

package/scss/components/_plain-button.scss

@@ -9,3 +9,10 @@
     }
   }
 }
+@layer #{vars.$utils-layer} {
+  [is='plain-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_v-stack.scss

@@ -1,4 +1,8 @@
 @use '../vars';
+@use 'sass:string';
+@use 'sass:list';
+
+$v-stack-templates: ((auto auto minmax(0, 1fr)), (auto minmax(0, 1fr)), (auto auto autominmax(0, 1fr)));
 
 @layer #{vars.$components-layer} {
   v-stack {
@@ -14,5 +18,18 @@
     // :where(& > *) {
     // 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;
+      }
+    }
   }
 }

package/scss/placeholders/_lists.scss

@@ -144,10 +144,7 @@
       > :not(summary) {
         :where(&) {
           --itemface: var(--list--details-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selecteddetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
           --itemactiveface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--details-color, var(--list--item-color,));
@@ -158,14 +155,8 @@
       > summary {
         :where([is='disclosure-group'][open] &) {
           --itemface: var(--list--opendetails-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
-          --itemactiveface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
+          --itemactiveface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--opendetails-color, var(--list--item-color,));
           --itemhighlighttext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -186,14 +177,8 @@
             );
 
             --itemtext: var(--list--opensummary-color, var(--list--item-color,));
-            --itemhighlighttext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
-            --itemactivetext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
+            --itemhighlighttext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+            --itemactivetext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
           }
         }
       }
@@ -215,14 +200,8 @@
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--item-color,));
-          --itemhighlighttext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
-          --itemactivetext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
+          --itemhighlighttext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+          --itemactivetext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
 
           // overwrite extra stuff for rootsummary
           // outline: red solid 4px;
@@ -244,17 +223,11 @@
           --itemface: var(--list--rootsummary-background-color, var(--list--opensummary-background-color, var(--list--item-background-color,)));
           --itemhighlightface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
           --itemactiveface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--opensummary-color, var(--list--item-color,)));
@@ -378,8 +351,7 @@
       :where(&)::part(section-footer-stack),
       :where(&)::part(section-header-stack) {
         // outline: magenta 4px solid;
-        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px))
-          calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
+        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px)) calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
 
         margin-inline: calc(var(--list--root-padding-inline) * -1);
 

package/scss/utils/_stacks.scss

@@ -110,6 +110,10 @@ $h-placement-map: (
 );
 
 $v-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
   'leading fill': (
     (place-items (start stretch)),
     (place-content (start stretch)),