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

package/generated/css/index.css

@@ -360,6 +360,10 @@
   select {
     text-transform: none;
   }
+  .ph,
+  .ph::before {
+    display: grid;
+  }
   button,
   *::part(button),
   input,
@@ -409,7 +413,7 @@
     transition: font-size 1ms step-start;
   }
   html::before {
-    content: "ipad-sheet-view-height=27.75rem&ipad-sheet-view-inline-size=37rem&vt-fwd-class-name=fwd";
+    content: "delete-button-icon=trash&confirm-button-icon=check&close-button-icon=x&cancel-button-icon=x&ipad-sheet-view-height=27.75rem&ipad-sheet-view-inline-size=37rem&vt-fwd-class-name=fwd";
     display: none;
   }
 }
@@ -871,6 +875,7 @@
   :where([is=glass-prominent-button], [is=glass-button], [is=bordered-prominent-button], [is=bordered-button], [is=borderless-button], [is=plain-button]) {
     place-items: center;
     place-content: center;
+    position: relative;
     appearance: none;
     -webkit-appearance: none;
     border: var(--btnborder,);
@@ -879,45 +884,66 @@
     padding-inline: var(--btnpadistart,) var(--btnpadiend,);
     padding-block: var(--btnpadbstart,) var(--btnpadbend,);
     border-radius: var(--btnradiustl,) var(--btnradiustr,) var(--btnradiusbr,) var(--btnradiusbl,);
-    --btnpadistart: var(--regular-btn-padding);
-    --btnpadiend: var(--regular-btn-padding);
-    --btnpadbstart: var(--regular-btn-padding);
-    --btnpadbend: var(--regular-btn-padding);
     --btnradiustl: var(--regular-btn-border-radius);
     --btnradiustr: var(--regular-btn-border-radius);
     --btnradiusbl: var(--regular-btn-border-radius);
     --btnradiusbr: var(--regular-btn-border-radius);
   }
+  :where([is=glass-prominent-button] > [slot], [is=glass-button] > [slot], [is=bordered-prominent-button] > [slot], [is=bordered-button] > [slot], [is=borderless-button] > [slot], [is=plain-button] > [slot]) {
+    position: absolute;
+    visibility: collapse;
+    max-inline-size: 90%;
+    max-block-size: 90%;
+    border-radius: inherit;
+  }
+  :where([is=glass-prominent-button] > [slot=overlay], [is=glass-button] > [slot=overlay], [is=bordered-prominent-button] > [slot=overlay], [is=bordered-button] > [slot=overlay], [is=borderless-button] > [slot=overlay], [is=plain-button] > [slot=overlay]) {
+    visibility: visible;
+  }
+  :where([is=glass-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=glass-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=borderless-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=plain-button]:not(:has(> :not([slot]))) > [slot=placeholder]) {
+    position: relative;
+    visibility: visible;
+  }
+  :where([is=glass-prominent-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=glass-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=bordered-prominent-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=bordered-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=borderless-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=plain-button]:has(> [slot=overlay]) > *:not([slot=overlay])) {
+    opacity: 0;
+  }
+  :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
+    transition: opacity ease-out 200ms;
+  }
+  @starting-style {
+    :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
+      opacity: 0;
+    }
+  }
   :where([control-size=mini][is=glass-prominent-button], [control-size=mini][is=glass-button], [control-size=mini][is=bordered-prominent-button], [control-size=mini][is=bordered-button], [control-size=mini][is=borderless-button], [control-size=mini][is=plain-button]) {
-    --btnpadistart: var(--mini-btn-padding);
-    --btnpadiend: var(--mini-btn-padding);
-    --btnpadbstart: var(--mini-btn-padding);
-    --btnpadbend: var(--mini-btn-padding);
     --btnradiustl: var(--mini-btn-border-radius);
     --btnradiustr: var(--mini-btn-border-radius);
     --btnradiusbl: var(--mini-btn-border-radius);
     --btnradiusbr: var(--mini-btn-border-radius);
   }
+  :where([control-size=regular][is=glass-prominent-button], [control-size=regular][is=glass-button], [control-size=regular][is=bordered-prominent-button], [control-size=regular][is=bordered-button], [control-size=regular][is=borderless-button], [control-size=regular][is=plain-button]) {
+    --btnradiustl: var(--regular-btn-border-radius);
+    --btnradiustr: var(--regular-btn-border-radius);
+    --btnradiusbl: var(--regular-btn-border-radius);
+    --btnradiusbr: var(--regular-btn-border-radius);
+  }
   :where([control-size=small][is=glass-prominent-button], [control-size=small][is=glass-button], [control-size=small][is=bordered-prominent-button], [control-size=small][is=bordered-button], [control-size=small][is=borderless-button], [control-size=small][is=plain-button]) {
-    --btnpadistart: var(--small-btn-padding);
-    --btnpadiend: var(--small-btn-padding);
-    --btnpadbstart: var(--small-btn-padding);
-    --btnpadbend: var(--small-btn-padding);
     --btnradiustl: var(--small-btn-border-radius);
     --btnradiustr: var(--small-btn-border-radius);
     --btnradiusbl: var(--small-btn-border-radius);
     --btnradiusbr: var(--small-btn-border-radius);
   }
   :where([control-size=large][is=glass-prominent-button], [control-size=large][is=glass-button], [control-size=large][is=bordered-prominent-button], [control-size=large][is=bordered-button], [control-size=large][is=borderless-button], [control-size=large][is=plain-button]) {
-    --btnpadistart: var(--large-btn-padding);
-    --btnpadiend: var(--large-btn-padding);
-    --btnpadbstart: var(--large-btn-padding);
-    --btnpadbend: var(--large-btn-padding);
     --btnradiustl: var(--large-btn-border-radius);
     --btnradiustr: var(--large-btn-border-radius);
     --btnradiusbl: var(--large-btn-border-radius);
     --btnradiusbr: var(--large-btn-border-radius);
   }
+  [control-size=small][is=glass-prominent-button], [control-size=small][is=glass-button], [control-size=small][is=bordered-prominent-button], [control-size=small][is=bordered-button], [control-size=small][is=borderless-button], [control-size=small][is=plain-button] {
+    --label-font: callout;
+  }
+  [control-size=mini][is=glass-prominent-button], [control-size=mini][is=glass-button], [control-size=mini][is=bordered-prominent-button], [control-size=mini][is=bordered-button], [control-size=mini][is=borderless-button], [control-size=mini][is=plain-button] {
+    --label-font: caption;
+  }
 }
 @layer sw-colors {
   :where([is=glass-prominent-button]:not(:disabled):not([readonly]), [is=glass-button]:not(:disabled):not([readonly]), [is=bordered-prominent-button]:not(:disabled):not([readonly]), [is=bordered-button]:not(:disabled):not([readonly]), [is=borderless-button]:not(:disabled):not([readonly]), [is=plain-button]:not(:disabled):not([readonly])):focus-visible {
@@ -1014,6 +1040,7 @@
   [is=tab-bar]:not([hidden]),
   [is=full-screen]:not([hidden]),
   [is=confirmation-dialog]:not([hidden]),
+  [is=alert-dialog]:not([hidden]),
   [is=sheet-view]:not([hidden]),
   [is=form-view]:not([hidden]),
   [is=disclosure-group]:not([hidden]),
@@ -1187,12 +1214,25 @@
   :where([is=disclosure-group]) {
     overflow: clip;
     --disclosure--host-details-content-block-size: 0;
-    --disclosure-style: ;
-    --disclosure--summary-grid-template-columns: ;
-    --disclosure--summary-grid-auto-flow: ;
-    --disclosure--summary-gap: ;
-    --disclosure--marker-display: ;
-    --disclosure--marker-transform: ;
+  }
+  @supports (x: if(else:red)) {
+    :where([is=disclosure-group]) {
+      --disclosure--marker-display: if(style(--disclosure-style: marker-trailing): ; style(--disclosure-style: marker-leading): ; else: none;);
+      --disclosure--summary-grid-auto-flow: if(style(--disclosure-style: marker-trailing): column ; style(--disclosure-style: marker-leading): column ;);
+      --disclosure--summary-gap: if(style(--disclosure-style: marker-trailing): 0.1rem ; style(--disclosure-style: marker-leading): 0.1rem ;);
+      --disclosure--summary-grid-template-columns: if(style(--disclosure-style: marker-trailing): minmax(0, 1fr) auto ; style(--disclosure-style: marker-leading): auto minmax(0, 1fr) ;);
+      --disclosure--marker-order: if(style(--disclosure-style: marker-leading): -1 ;);
+    }
+  }
+  @supports not (x: if(else:red)) {
+    :where([is=disclosure-group]) {
+      --disclosure-style: ;
+      --disclosure--summary-grid-template-columns: ;
+      --disclosure--summary-grid-auto-flow: ;
+      --disclosure--summary-gap: ;
+      --disclosure--marker-display: none;
+      --disclosure--marker-transform: ;
+    }
   }
   :where([is=disclosure-group] > summary) {
     gap: var(--disclosure--summary-gap, );
@@ -1216,26 +1256,28 @@
     transform: var(--disclosure--marker-transform, );
     order: var(--disclosure--marker-order, );
   }
-  @container not (style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading)) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--marker-display: none;
+  @supports not (x: if(else:red)) {
+    @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--marker-display: grid;
+      }
     }
-  }
-  @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--summary-grid-auto-flow: column;
-      --disclosure--summary-gap: 0.1rem;
+    @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--summary-grid-auto-flow: column;
+        --disclosure--summary-gap: 0.1rem;
+      }
     }
-  }
-  @container style(--disclosure-style: marker-trailing) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+    @container style(--disclosure-style: marker-trailing) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+      }
     }
-  }
-  @container style(--disclosure-style: marker-leading) {
-    :where([is=disclosure-group] > summary) {
-      --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
-      --disclosure--marker-order: -1;
+    @container style(--disclosure-style: marker-leading) {
+      :where([is=disclosure-group] > summary) {
+        --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+        --disclosure--marker-order: -1;
+      }
     }
   }
   :where([is=disclosure-group])::details-content {
@@ -1275,9 +1317,25 @@
     :where([is=disclosure-group][disclosure-style=marker-trailing]) {
       --disclosure-style: marker-trailing;
     }
+    @supports not (x: if(else:red)) {
+      :where([is=disclosure-group][disclosure-style=marker-trailing]) {
+        --disclosure--marker-display: grid;
+        --disclosure--summary-grid-auto-flow: column;
+        --disclosure--summary-gap: 0.1rem;
+        --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+      }
+    }
     :where([is=disclosure-group][disclosure-style=marker-leading]) {
       --disclosure-style: marker-leading;
     }
+    @supports not (x: if(else:red)) {
+      :where([is=disclosure-group][disclosure-style=marker-leading]) {
+        --disclosure--marker-display: grid;
+        --disclosure--summary-grid-auto-flow: column;
+        --disclosure--summary-gap: 0.1rem;
+        --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+      }
+    }
     :where([is=disclosure-group][disclosure-style=marker-hidden]) {
       --disclosure-style: ;
     }
@@ -1462,9 +1520,6 @@
     transform: var(--sheet-view-translate, );
     --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
   }
-  :where(:where([is=sheet-view])[fine-presentation-large-adaptation=bottom-bar] > tool-bar > [slot^=top-bar-]) {
-    --label-style: icon-only;
-  }
   @media (pointer: coarse) and (orientation: portrait) {
     :where([is=sheet-view]) {
       clip-path: inset(var(--safe-area-inset-top) 0 0 0 round 2rem 2rem 0 0);
@@ -1513,7 +1568,7 @@
     --label-font: title3;
   }
   content-unavailable-view > :not([slot]) {
-    --label-image-size: 5rem;
+    --label-image-size: 5;
     --label-gap: 1rem;
   }
   :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
@@ -1579,40 +1634,61 @@
     --confirmation--dialog-max-block-size: anchor-size();
     --confirmation--dialog-scale: scale(0);
   }
-  :where([is=confirmation-dialog] > button) {
-    appearance: none;
-    -webkit-appearance: none;
-    border: var(--dialogbtnborder,);
-    background: var(--dialogbtnface,);
-    color: var(--dialogbtntext,);
-    padding-inline: var(--dialogbtnpadistart,) var(--dialogbtnpadiend,);
-    padding-block: var(--dialogbtnpadbstart,) var(--dialogbtnpadbend,);
-    border-radius: var(--dialogbtnradiustl,) var(--dialogbtnradiustr,) var(--dialogbtnradiusbr,) var(--dialogbtnradiusbl,);
-  }
-  :where([is=confirmation-dialog]) {
-    --dialogbtnpadistart: 0.6rem;
-    --dialogbtnpadiend: 0.6rem;
-    --dialogbtnpadbstart: 0.6rem;
-    --dialogbtnpadbend: 0.6rem;
-    --dialogbtnradiustl: 1rem;
-    --dialogbtnradiustr: 1rem;
-    --dialogbtnradiusbl: 1rem;
-    --dialogbtnradiusbr: 1rem;
-  }
 }
-@layer sw-colors {
-  :where([is=confirmation-dialog] > button:not(:disabled):not([readonly])):focus-visible {
+@layer sw-components {
+  :where([is=alert-dialog]) {
+    inset-inline: 0px;
+    inset-block: 0px;
+    margin: 0px;
+    border: none;
+    padding: 0px;
+    background-color: transparent;
+    color: transparent;
+    max-width: 100lvw;
+    max-height: 100lvh;
     outline: none;
   }
-  :where([is=confirmation-dialog] > button:not(:disabled):not([readonly])):focus-visible {
-    --dialogbtnface: var(--dialogbtnhighlightface,);
-    --dialogbtntext: var(--dialogbtnhighlighttext,);
+  :where([is=alert-dialog])::backdrop {
+    background-color: transparent;
   }
-}
-@layer sw-actions {
-  :where([is=confirmation-dialog] > button:not(:disabled):not([readonly])):active {
-    --dialogbtnface: var(--dialogbtnactiveface,);
-    --dialogbtntext: var(--dialogbtnactivetext,);
+  :where([is=alert-dialog]) {
+    color: var(--text, );
+    touch-action: none;
+    position: fixed;
+    inline-size: fit-content;
+    block-size: fit-content;
+    height: auto;
+    max-inline-size: min(20rem, 80vw);
+    max-block-size: 80vh;
+    margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+    margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+    transform: var(--alert--dialog-scale, );
+    opacity: var(--alert--dialog-opacity, );
+    position-anchor: --alert-dialog;
+    position-area: center;
+    overflow: clip;
+    border-radius: 0.9rem;
+    backdrop-filter: var(--liquid-glass-backdrop-filter, );
+    box-shadow: var(--menu-popover-box-shadow, );
+    padding-block: 1rem;
+    padding-inline: 1em;
+    gap: 1rem;
+    --alert--dialog-scale: scale(1.2);
+    --alert--dialog-opacity: 0.8;
+  }
+  :where([is=alert-dialog][open]) {
+    --alert--dialog-scale: scale(1);
+    --alert--dialog-opacity: 1;
+  }
+  @starting-style {
+    :where([is=alert-dialog][open]) {
+      --alert--dialog-scale: scale(1.2);
+      --alert--dialog-opacity: 0.8;
+    }
+  }
+  :where([is=alert-dialog][closing]) {
+    --alert--dialog-scale: scale(0.98);
+    --alert--dialog-opacity: 0;
   }
 }
 @layer sw-components {
@@ -1746,6 +1822,9 @@
   :where(h-stack[template="auto minmax(0,1fr) auto auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto auto;
   }
+  :where(h-stack[template="auto minmax(0,1fr) auto"]) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
   :where(h-stack[template="repeat(4,minmax(0,1fr))"]) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -1760,14 +1839,31 @@
     place-content: safe center;
     gap: 1rem;
   }
+  :where(v-stack[template="auto minmax(0,1fr)"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
   :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 auto minmax(0,1fr)"]) {
+    grid-template-rows: auto auto auto minmax(0, 1fr);
+  }
+  :where(v-stack[template="auto auto auto auto minmax(0,1fr)"]) {
+    grid-template-rows: auto auto auto 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(h-flex-stack) {
+    display: flex;
+    flex-flow: row nowrap;
+    place-items: safe center;
+    place-content: safe center;
+  }
+  :where(h-flex-stack > *) {
+    max-block-size: 100%;
+  }
+  :where(h-flex-stack > [frame-height=infinity]) {
+    flex-grow: 1;
   }
 }
 @layer sw-components {
@@ -1895,6 +1991,17 @@
     place-items: center;
     place-content: center;
   }
+  :where(tool-bar-item > button:has(> label-view > :not([slot])) > label-view,
+  tool-bar-item > picker-view > menu-view:has(> label-view > :not([slot])) > label-view,
+  tool-bar-item > menu-view:has(> label-view > :not([slot])) > label-view) {
+    --label-padding-inline: 0.5rem;
+  }
+  @media (pointer: fine) {
+    :where(tool-bar-item > button > label-view,
+    tool-bar-item > menu-view > label-view) {
+      --label-image-size: 1.8;
+    }
+  }
 }
 @layer sw-colors {
   :where(menu-view:not(:disabled):not([readonly])):focus-visible {
@@ -1941,6 +2048,12 @@
   }
 }
 @layer sw-components {
+  :where([is=borderless-button]) {
+    --btnpadistart: 0.1rem;
+    --btnpadiend: 0.1rem;
+    --btnpadbstart: 0.1rem;
+    --btnpadbend: 0.1rem;
+  }
   :where([is=borderless-button][role=destructive]) {
     --accentColor: var(--red);
     --accentColor2: var(--red2);
@@ -1955,11 +2068,41 @@
   }
 }
 @layer sw-components {
+  :where([is=bordered-button]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
   @media (pointer: fine) {
     :where([is=bordered-button]) {
       --accentColor: var(--primary);
     }
   }
+  :where([is=bordered-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=bordered-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=bordered-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=bordered-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
+  }
   :where([is=bordered-button][role=destructive]) {
     --accentColor: var(--red);
     --accentColor2: var(--red2);
@@ -1974,6 +2117,36 @@
   }
 }
 @layer sw-components {
+  :where([is=bordered-prominent-button]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=bordered-prominent-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
+  }
   :where([is=bordered-prominent-button][role=destructive]) {
     --accentColor: var(--red);
     --accentColor2: var(--red2);
@@ -1992,6 +2165,34 @@
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--toolbar-cell-box-shadow);
     transform: var(--btn--scale, );
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=glass-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=glass-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
   }
   :where([is=glass-button][role=destructive]) {
     --accentColor: var(--red);
@@ -2011,6 +2212,34 @@
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--toolbar-cell-box-shadow);
     transform: var(--btn--scale, );
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=mini]) {
+    --btnpadistart: var(--mini-btn-padding);
+    --btnpadiend: var(--mini-btn-padding);
+    --btnpadbstart: var(--mini-btn-padding);
+    --btnpadbend: var(--mini-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=regular]) {
+    --btnpadistart: var(--regular-btn-padding);
+    --btnpadiend: var(--regular-btn-padding);
+    --btnpadbstart: var(--regular-btn-padding);
+    --btnpadbend: var(--regular-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=small]) {
+    --btnpadistart: var(--small-btn-padding);
+    --btnpadiend: var(--small-btn-padding);
+    --btnpadbstart: var(--small-btn-padding);
+    --btnpadbend: var(--small-btn-padding);
+  }
+  :where([is=glass-prominent-button][control-size=large]) {
+    --btnpadistart: var(--large-btn-padding);
+    --btnpadiend: var(--large-btn-padding);
+    --btnpadbstart: var(--large-btn-padding);
+    --btnpadbend: var(--large-btn-padding);
   }
   :where([is=glass-prominent-button][role=destructive]) {
     --accentColor: var(--red);
@@ -2080,6 +2309,18 @@
       --safe-area-inset-bottom: 0px;
     }
   }
+  :where(tool-bar > [slot^=top-bar-] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=cancellation-action] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=primary-action] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=confirmation-action] > button:has(> label-view > [slot=image]),
+  tool-bar > [slot=destructive-action] > button:has(> label-view > [slot=image])) {
+    --label-style: icon-only;
+  }
+  @media (pointer: coarse) {
+    :where(tool-bar > [slot^=bottom-bar-] > button:has(> label-view > [slot=image])) {
+      --label-style: icon-only;
+    }
+  }
 }
 @property --label-gap {
   syntax: "<length>";
@@ -2087,19 +2328,24 @@
   initial-value: 0;
 }
 @property --label-image-size {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 2;
+}
+@property --label-padding-inline {
   syntax: "<length>";
   inherits: false;
   initial-value: 0;
 }
 @layer sw-components {
   :where(label-view) {
+    padding-inline: var(--label-padding-inline);
     align-items: var(--label--host-align-items, );
     justify-items: var(--label--host-justify-items, );
     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);
+    --label-imagestack-fontsize: calc(var(--label-image-size) * 1rem);
     white-space: var(--label--host-white-space, );
   }
   :where(label-view)::part(label-image-stack), :where(label-view)::part(label-title-stack) {
@@ -4478,6 +4724,11 @@
       transform: translateY(calc(max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) * -1 - 150%));
     }
   }
+  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    :where(tab-view[tab-view-style=tab-bar-only] [is=sidebar-view][open] ~ [is=tab-bar] > [is=form-view]) {
+      animation: ipad_form_view_slide_up_offedge var(--sidebar-transition-duration) ease forwards;
+    }
+  }
   @media (max-width: 42.9999rem) and (orientation: portrait) {
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
       --tab-bar-width: 100lvw;
@@ -4544,6 +4795,11 @@
       transform: translateY(calc(max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) * -1 - 150%));
     }
   }
+  @media (min-width: 43rem) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
+    :where(tab-view:not([tab-view-style=tab-bar-only]) [is=sidebar-view][open] ~ [is=tab-bar] > [is=form-view]) {
+      animation: ipad_form_view_slide_up_offedge var(--sidebar-transition-duration) ease forwards;
+    }
+  }
   @media (orientation: landscape) {
     :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
       display: none;
@@ -5247,6 +5503,12 @@
   :where([frame\:max-width="100cqi"]) {
     max-inline-size: 100cqi;
   }
+  :where([frame\:alignment=top]) {
+    align-self: top;
+  }
+  :where([frame\:alignment=leading]) {
+    justify-self: start;
+  }
   @media (prefers-reduced-motion: no-preference) {
     :where([slow]) {
       visibility: visible;
@@ -6388,6 +6650,13 @@
     }
   }
 }
+@layer sw-transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([is=alert-dialog]) {
+      transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+    }
+  }
+}
 @layer sw-transitions {}
 @layer sw-transitions {
   @media (prefers-reduced-motion: no-preference) {
@@ -6435,6 +6704,11 @@
     }
   }
 }
+@keyframes ipad_form_view_slide_up_offedge {
+  to {
+    opacity: 0;
+  }
+}
 @property --gray {
   syntax: "<color>";
   initial-value: oklch(64.83% 0.0073 286.19deg);
@@ -7318,7 +7592,7 @@
     --face: var(--background);
     --text: var(--primary);
   }
-  :where([is=sheet-view], [is=full-screen], [is=confirmation-dialog]) {
+  :where([is=sheet-view], [is=full-screen], [is=confirmation-dialog], [is=alert-dialog]) {
     --face: var(--background);
     --background: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
   }
@@ -7342,15 +7616,28 @@
   }
   :where([is=tab-bar]) {
     --toolbaritemtext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemhighlighttext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemactivetext: light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
-  :where(tool-bar-item, tool-bar-item-group, navigation-split-view sidebar-toggle) {
+  :where(tool-bar-item,
+  tool-bar-item-group,
+  navigation-split-view sidebar-toggle) {
     --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
   }
-  :where([is=tab-bar] [is=tab-item]) {
-    --toolbaritemhighlighttext: yellow;
-    --toolbaritemactivetext: chocolate;
+  :where(tool-bar-item[tint],
+  tool-bar-item-group[tint],
+  navigation-split-view sidebar-toggle[tint]) {
+    --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    --toolbaritemface: var(--accentColor);
+    --toolbaritemhighlightface: light-dark(
+      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
+      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
+    );
+    --toolbaritemactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
   }
   :where(sidebar-toggle,
   menu-view) {
@@ -7363,7 +7650,7 @@
     --menuitemactivetext: light-dark(var(--menu-item-active-color), var(--menu-item-active-color-dark));
     --menuitemactiveface: light-dark(var(--menu-item-active-bg), var(--menu-item-active-bg-dark));
   }
-  :where([is=confirmation-dialog]) {
+  :where([is=confirmation-dialog], [is=alert-dialog]) {
     --dialogbtnface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --dialogbtnhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --dialogbtnactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
@@ -7457,6 +7744,10 @@
       --confirmation--dialog-scale: scale(1.02);
       transition-duration: 100ms;
     }
+    :where([is=alert-dialog][touch-glass]) {
+      --alert--dialog-scale: scale(1.02);
+      transition-duration: 100ms;
+    }
     :where(tool-bar > *[touch-glass]) {
       --toolbar-cell-scale: scale(1.07);
       transition-duration: 100ms;