@swiftwc/ui 0.0.0-dev.21 → 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;
   }
 }
@@ -880,24 +884,30 @@
     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]) {
-    position: absolute;
     transition: opacity ease-out 200ms;
-    max-inline-size: 90%;
-    max-block-size: 90%;
-    border-radius: inherit;
   }
   @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]) {
@@ -905,35 +915,35 @@
     }
   }
   :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 {
@@ -950,17 +960,6 @@
     }
   }
 }
-@layer sw-utils {
-  :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]) {
-    display: none;
-  }
-  :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]) {
-    display: grid;
-  }
-  :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]) {
-    display: grid;
-  }
-}
 @layer sw-actions {
   :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])):active {
     --btnface: var(--btnactiveface,);
@@ -1215,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, );
@@ -1244,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 {
@@ -1303,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: ;
     }
@@ -1490,14 +1520,6 @@
     transform: var(--sheet-view-translate, );
     --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
   }
-  :where(:where([is=sheet-view]) > tool-bar > [slot=top-bar-leading], :where([is=sheet-view]) > tool-bar > [slot=top-bar-trailing]) {
-    --label-style: icon-only;
-  }
-  @media (pointer: coarse) {
-    :where(:where([is=sheet-view]) > tool-bar > [slot^=bottom-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);
@@ -1546,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) {
@@ -1969,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 {
@@ -2015,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);
@@ -2029,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);
@@ -2048,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);
@@ -2066,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);
@@ -2085,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);
@@ -2154,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>";
@@ -2161,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) {
@@ -4552,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;
@@ -4618,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;
@@ -6522,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);
@@ -7429,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) {

package/generated/events/tab-view.d.ts

@@ -1,5 +1,9 @@
 import { type NavigationSplitView, type NavigationStack } from '../components';
 import { type TabBarPlacement } from '../components/tab-view';
+export type TabBeforeDetail = {
+    tag: string;
+    ms: number;
+};
 export type TabDetail = {
     tag: string;
 };
@@ -16,8 +20,8 @@ declare global {
         tabhide: CustomEvent<TabDetail>;
         tabreveal: CustomEvent<TabDetail>;
         tabswap: CustomEvent<TabDetail>;
-        beforetabreveal: CustomEvent<TabDetail>;
-        beforetabswap: CustomEvent<TabDetail>;
+        beforetabreveal: CustomEvent<TabBeforeDetail>;
+        beforetabswap: CustomEvent<TabBeforeDetail>;
         'tab-view:toggle': CustomEvent<TabViewDetail>;
         'tab-view:adaptable-tab-bar-placement-change': CustomEvent<TabViewAdaptableTabBarPlacementDetail>;
     }

package/generated/internal/class/css-style-observer.js

@@ -16,7 +16,7 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
         if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
             return;
         callback?.(evt);

package/generated/internal/utils/button-role.js

@@ -1,14 +1,34 @@
 import { I18n } from '../../i18n';
+import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
 import { default as $ } from './cash';
 import onoff from './onoff';
 function renderPlaceholder(el, role) {
-    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view system-image="magnifying-glass" slot="placeholder"></label-view>`, '>1'));
-    if (role) {
-        label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
+    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'));
+    switch (role) {
+        case 'cancel':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Cancel);
+            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+            break;
+        case 'close':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Close);
+            label.setAttribute('system-image', Snapshot.config['close-button-icon']);
+            break;
+        case 'confirm':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Confirm);
+            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            break;
+        case 'destructive':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
+            label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
+            break;
+        default:
+            label?.remove();
+            break;
     }
-    else
-        label?.remove();
+    // if (role) {
+    //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
+    // } else label?.remove()
 }
 export default function (target, attributeName) {
     renderPlaceholder(target, target.getAttribute(attributeName ?? ''));

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

@@ -16,5 +16,4 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export { default as toolbarRepositioner } from './toolbar-repositioner';
 export declare const $: typeof cash;

package/generated/internal/utils/index.js

@@ -17,5 +17,4 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export { default as toolbarRepositioner } from './toolbar-repositioner';
 export const $ = cash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.21",
+  "version": "0.0.0-dev.22",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_vars.scss

@@ -147,6 +147,11 @@ $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000
 $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
 $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
 
+$cancel-button-icon: 'x'; // ph-trash
+$close-button-icon: 'x'; // ph-trash
+$confirm-button-icon: 'check'; // ph-trash
+$delete-button-icon: 'trash'; // ph-trash
+
 // SECTION: computed(s)
 
 $ipad-portrait-bp-max: #{functions.subtract-tiny($ipad-portrait-bp)};