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

package/generated/css/index.css

@@ -499,10 +499,7 @@
   }
   :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not(summary), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not(summary), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not(summary)) {
     --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,));
     --itemhighlighttext: var(--list--selecteddetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -510,14 +507,8 @@
   }
   :where([is=disclosure-group][open] table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > summary, [is=disclosure-group][open] [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > summary, [is=disclosure-group][open] list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > summary) {
     --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,)));
     --itemactivetext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -533,14 +524,8 @@
       var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
     );
     --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,))));
   }
   table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > [is=disclosure-group], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > [is=disclosure-group], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > [is=disclosure-group],
   table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > section-view > [is=disclosure-group],
@@ -562,14 +547,8 @@
       var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
     );
     --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,))));
     --itempadistart: var(--list--rootsummary-padding-inline-start, var(--list--item-padding-inline-start,));
     --itempadiend: var(--list--rootsummary-padding-inline-end, var(--list--item-padding-inline-end,));
     --itempadbstart: var(--list--rootsummary-padding-block-start, var(--list--item-padding-block-start,));
@@ -582,17 +561,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,)));
     --itemhighlighttext: var(
@@ -1057,6 +1030,7 @@
   [is=glass-prominent-button]:not([hidden]),
   list-view:not([hidden]),
   table-view:not([hidden]),
+  content-unavailable-view:not([hidden]),
   tool-bar-item:not([hidden]),
   tool-bar-item-group:not([hidden]),
   sidebar-toggle:not([hidden]),
@@ -1072,6 +1046,9 @@
   picker-view:not([hidden])) {
     display: grid;
   }
+  :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),
@@ -1526,6 +1503,31 @@
     }
   }
 }
+@layer sw-components {
+  :where(content-unavailable-view) {
+    place-content: center;
+    place-items: center;
+    text-align: center;
+    row-gap: 1rem;
+  }
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack) {
+    row-gap: 0.2rem;
+  }
+  :where(content-unavailable-view)::part(content-unavailable-title-stack) {
+    --label-flow: vertical;
+    --label-font: title3;
+  }
+  content-unavailable-view > :not([slot]) {
+    --label-image-size: 5rem;
+    --label-gap: 1rem;
+  }
+  :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
+    display: none;
+  }
+  :where(content-unavailable-view:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
+    display: none;
+  }
+}
 @layer sw-components {
   :where([is=confirmation-dialog]) {
     inset-inline: 0px;
@@ -1723,32 +1725,14 @@
   scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[distribution=leading] > :not([slot])) {
     scroll-snap-align: start;
   }
-  :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack,
-  scroll-view-proxy:has(> v-stack, > h-stack) > h-stack)::before {
-    grid-column: 1/-1;
-    grid-row: 1/-1;
-    content: "";
-    display: inline-grid;
-    block-size: 1px;
-    inline-size: 1px;
-    z-index: -1;
-    pointer-events: none;
-    position: absolute;
-  }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack) {
     overflow: clip auto;
     scroll-snap-type: block mandatory;
   }
-  :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack)::before {
-    block-size: calc(100cqb + 1px);
-  }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     overflow: auto clip;
     scroll-snap-type: inline mandatory;
   }
-  :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack)::before {
-    inline-size: calc(100cqi + 1px);
-  }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[padding]) {
     scroll-padding-inline: 1rem;
   }
@@ -1757,8 +1741,8 @@
   :where(h-stack) {
     grid-auto-flow: column;
     grid-template-rows: minmax(0, 1fr);
-    place-items: center;
-    place-content: center;
+    place-items: safe center;
+    place-content: safe center;
     gap: 1rem;
   }
   :where(h-stack[template="minmax(0,1fr) auto"]) {
@@ -1777,10 +1761,19 @@
 @layer sw-components {
   :where(v-stack) {
     grid-template-columns: minmax(0, 1fr);
-    place-items: center;
-    place-content: center;
+    place-items: safe center;
+    place-content: safe center;
     gap: 1rem;
   }
+  :where(v-stack[template="auto auto minmax(0,1fr)"]) {
+    grid-template-rows: auto auto minmax(0, 1fr);
+  }
+  :where(v-stack[template="auto minmax(0,1fr)"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  :where(v-stack[template="auto auto autominmax(0,1fr)"]) {
+    grid-template-rows: auto auto autominmax(0, 1fr);
+  }
 }
 @layer sw-components {
   :where(v-flex-stack) {
@@ -1947,6 +1940,11 @@
   }
 }
 @layer sw-components {}
+@layer sw-utils {
+  :where([is=plain-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=borderless-button][role=destructive]) {
     --accentColor: var(--red);
@@ -1956,6 +1954,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=borderless-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   @media (pointer: fine) {
     :where([is=bordered-button]) {
@@ -1970,6 +1973,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=bordered-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=bordered-prominent-button][role=destructive]) {
     --accentColor: var(--red);
@@ -1979,6 +1987,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=bordered-prominent-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=glass-button]) {
     backdrop-filter: var(--liquid-glass-backdrop-filter);
@@ -1993,6 +2006,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=glass-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where([is=glass-prominent-button]) {
     backdrop-filter: var(--liquid-glass-backdrop-filter);
@@ -2007,6 +2025,11 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-utils {
+  :where([is=glass-prominent-button]) {
+    text-align: center;
+  }
+}
 @layer sw-components {
   :where(tool-bar) {
     pointer-events: none;
@@ -2065,6 +2088,16 @@
     }
   }
 }
+@property --label-gap {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --label-image-size {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
 @layer sw-components {
   :where(label-view) {
     align-items: var(--label--host-align-items, );
@@ -2072,6 +2105,8 @@
     grid-template-columns: var(--label--host-grid-template-columns, );
     grid-template-rows: var(--label--host-grid-template-rows, );
     gap: var(--label--host-gap, );
+    --label-image-size: 2rem;
+    --label-imagestack-fontsize: var(--label-image-size);
     white-space: var(--label--host-white-space, );
   }
   :where(label-view)::part(label-image-stack), :where(label-view)::part(label-title-stack) {
@@ -2086,8 +2121,8 @@
   }
   :where(label-view)::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);
   }
   :where(label-view)::part(label-title-stack) {
     text-decoration: underline;
@@ -2125,31 +2160,20 @@
       --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) ;
-          )
-          ;
-      );
-      --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 ;) ;
+          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-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;) ;
       );
     }
   }
@@ -2173,7 +2197,8 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --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;
       }
@@ -2192,7 +2217,8 @@
       --label--host-grid-template-rows: minmax(0, 1fr);
       --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;
     }
@@ -2203,7 +2229,8 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --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;
       }
@@ -2235,7 +2262,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --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;
       }
@@ -2255,7 +2283,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --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;
       }
@@ -2267,7 +2296,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --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;
       }
@@ -5251,61 +5281,61 @@
 @layer sw-utils {
   h-stack[distribution=leading],
   v-flex-stack[distribution=leading] {
-    justify-items: start;
-    justify-content: start;
+    justify-items: start  ;
+    justify-content: start  ;
   }
   h-stack[distribution="leading fill"],
   v-flex-stack[distribution="leading fill"] {
-    justify-items: start;
-    justify-content: stretch;
+    justify-items: start  ;
+    justify-content: stretch  ;
   }
   h-stack[distribution=center],
   v-flex-stack[distribution=center] {
-    justify-items: center;
-    justify-content: center;
+    justify-items: safe center  ;
+    justify-content: safe center  ;
   }
   h-stack[distribution=trailing],
   v-flex-stack[distribution=trailing] {
-    justify-items: end;
-    justify-content: end;
+    justify-items: end  ;
+    justify-content: end  ;
   }
   h-stack[distribution=fill],
   v-flex-stack[distribution=fill] {
-    justify-items: stretch;
-    justify-content: stretch;
+    justify-items: stretch  ;
+    justify-content: stretch  ;
   }
   h-stack[distribution=space-between],
   v-flex-stack[distribution=space-between] {
-    justify-content: space-between;
+    justify-content: space-between  ;
   }
   h-stack[alignment=leading],
   v-flex-stack[alignment=leading] {
-    align-items: start;
-    align-content: start;
+    align-items: start  ;
+    align-content: start  ;
   }
   h-stack[alignment="leading fill"],
   v-flex-stack[alignment="leading fill"] {
-    align-items: start;
-    align-content: stretch;
+    align-items: start  ;
+    align-content: stretch  ;
   }
   h-stack[alignment=center],
   v-flex-stack[alignment=center] {
-    align-items: center;
-    align-content: center;
+    align-items: center  ;
+    align-content: center  ;
   }
   h-stack[alignment=trailing],
   v-flex-stack[alignment=trailing] {
-    align-items: end;
-    align-content: end;
+    align-items: end  ;
+    align-content: end  ;
   }
   h-stack[alignment=fill],
   v-flex-stack[alignment=fill] {
-    align-items: stretch;
-    align-content: stretch;
+    align-items: stretch  ;
+    align-content: stretch  ;
   }
   h-stack[alignment=space-between],
   v-flex-stack[alignment=space-between] {
-    align-content: space-between;
+    align-content: space-between  ;
   }
   h-stack[placement="fill leading"],
   v-flex-stack[placement="fill leading"] {
@@ -5320,61 +5350,66 @@
   }
   v-stack[distribution=leading],
   h-flex-stack[distribution=leading] {
-    align-items: start;
-    align-content: start;
+    align-items: start  ;
+    align-content: start  ;
   }
   v-stack[distribution="leading fill"],
   h-flex-stack[distribution="leading fill"] {
-    align-items: start;
-    align-content: stretch;
+    align-items: start  ;
+    align-content: stretch  ;
   }
   v-stack[distribution=center],
   h-flex-stack[distribution=center] {
-    align-items: center;
-    align-content: center;
+    align-items: center  ;
+    align-content: center  ;
   }
   v-stack[distribution=trailing],
   h-flex-stack[distribution=trailing] {
-    align-items: end;
-    align-content: end;
+    align-items: end  ;
+    align-content: end  ;
   }
   v-stack[distribution=fill],
   h-flex-stack[distribution=fill] {
-    align-items: stretch;
-    align-content: stretch;
+    align-items: stretch  ;
+    align-content: stretch  ;
   }
   v-stack[distribution=space-between],
   h-flex-stack[distribution=space-between] {
-    align-content: space-between;
+    align-content: space-between  ;
   }
   v-stack[alignment=leading],
   h-flex-stack[alignment=leading] {
-    justify-items: start;
-    justify-content: start;
+    justify-items: start  ;
+    justify-content: start  ;
   }
   v-stack[alignment="leading fill"],
   h-flex-stack[alignment="leading fill"] {
-    justify-items: start;
-    justify-content: stretch;
+    justify-items: start  ;
+    justify-content: stretch  ;
   }
   v-stack[alignment=center],
   h-flex-stack[alignment=center] {
-    justify-items: center;
-    justify-content: center;
+    justify-items: safe center  ;
+    justify-content: safe center  ;
   }
   v-stack[alignment=trailing],
   h-flex-stack[alignment=trailing] {
-    justify-items: end;
-    justify-content: end;
+    justify-items: end  ;
+    justify-content: end  ;
   }
   v-stack[alignment=fill],
   h-flex-stack[alignment=fill] {
-    justify-items: stretch;
-    justify-content: stretch;
+    justify-items: stretch  ;
+    justify-content: stretch  ;
   }
   v-stack[alignment=space-between],
   h-flex-stack[alignment=space-between] {
-    justify-content: space-between;
+    justify-content: space-between  ;
+  }
+  v-stack[placement=fill],
+  h-flex-stack[placement=fill] {
+    place-items: stretch  ;
+    place-content: stretch  ;
   }
   v-stack[placement="leading fill"],
   h-flex-stack[placement="leading fill"] {
@@ -5545,23 +5580,33 @@
   }
   :where(v-stack[padding],
   h-stack[padding],
+  h-flex-stack[padding],
   v-flex-stack[padding]) {
     padding-inline: 1rem;
   }
   :where(scroll-view > v-stack[padding],
   scroll-view > h-stack[padding],
+  scroll-view > h-flex-stack[padding],
   scroll-view > v-flex-stack[padding]) {
     padding-block-end: 1rem;
   }
   :where(v-stack > [padding]:not(v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack), v-stack > [is=disclosure-group] > summary[padding],
   h-stack > [padding]:not(v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack),
   h-stack > [is=disclosure-group] > summary[padding],
+  h-flex-stack > [padding]:not(v-stack,
+  h-stack,
+  h-flex-stack,
+  v-flex-stack),
+  h-flex-stack > [is=disclosure-group] > summary[padding],
   v-flex-stack > [padding]:not(v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack),
   v-flex-stack > [is=disclosure-group] > summary[padding]) {
     margin-inline: 1rem;
@@ -7466,4 +7511,18 @@
       transition-duration: 100ms;
     }
   }
+  @media (pointer: coarse) {
+    :where(tab-view > [is=sidebar-view][touch-glass]) {
+      --sidebar-view-scale: scale(1.02);
+      transition-duration: 100ms;
+    }
+    :where(tab-view > sidebar-toggle > *[touch-glass]) {
+      --toolbar-cell-scale: scale(1.07);
+      transition-duration: 100ms;
+    }
+    :where(tab-view > [is=sidebar-view] > tool-bar > sidebar-toggle > *[touch-glass]) {
+      --toolbar-cell-scale: scale(1.07);
+      transition-duration: 100ms;
+    }
+  }
 }

package/generated/i18n/index.d.ts

@@ -1,18 +1,26 @@
+import { en } from './locales';
 type LocaleInput = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
-type I18nProps = {
-    tag?: LocaleInput;
-    options?: Intl.LocaleOptions;
-    locale: Intl.Locale;
-    decimalSeparator: string;
-    dateSeparator: string;
-    dateOrder: string[];
+type DeepStringify<T> = {
+    [K in keyof T]: T[K] extends object ? DeepStringify<T[K]> : string;
 };
+export declare function defineTranslations<const T extends object>(factory: () => T): () => T;
+type EnTranslations = DeepStringify<ReturnType<typeof en>>;
+/**
+ * @fires localechange - On html[lang] change!
+ */
 export declare class I18n {
     #private;
     static on: EventTarget;
-    static _props: I18nProps;
-    static get tag(): LocaleInput | undefined;
-    static set tag(val: LocaleInput | undefined);
+    /**
+     * Register a translation factory for a language.
+     * Call this before the language is first needed.
+     *
+     * @example
+     * I18n.register('el', () => ({ SearchUnavailableContent: { … } }))
+     */
+    static register(lang: string, factory: () => EnTranslations): void;
+    static get tag(): LocaleInput;
+    static set tag(val: LocaleInput);
     static get options(): Intl.LocaleOptions | undefined;
     static set options(val: Intl.LocaleOptions | undefined);
     static get locale(): Intl.Locale;
@@ -20,5 +28,7 @@ export declare class I18n {
     static get dateSeparator(): string;
     static get dateOrder(): string[];
     static setOwnConfig(options?: Intl.LocaleOptions): void;
+    /** Look up a top-level translation key for the current language, falling back to 'en'. */
+    static t<K extends keyof EnTranslations>(key: K): EnTranslations[K];
 }
 export {};