sherick-ui 2.2.0 → 2.4.0

package/dist/styles.css

@@ -11,9 +11,17 @@
   --sui-ink: 0.245 0.018 260;
   --sui-ink-muted: 0.480 0.018 260;
   --sui-detail: 0.600 0.016 258;
+  --sui-rim: 0.630 0.016 258;
   --sui-primary: 0.422 0.139 255;
   --sui-primary-strong: 0.402 0.143 257;
-  --sui-primary-soft: 0.91 0.035 255;
+  --sui-primary-soft: 0.920 0.035 255;
+  --sui-primary-selected: 0.860 0.055 255;
+  --sui-danger-soft: 0.930 0.030 18;
+  --sui-danger-selected: 0.870 0.050 18;
+  --sui-warning-soft: 0.940 0.045 85;
+  --sui-warning-selected: 0.885 0.070 82;
+  --sui-success-soft: 0.935 0.037 155;
+  --sui-success-selected: 0.875 0.055 155;
   --sui-accent: 0.62 0.10 215;
   --sui-danger: 0.439 0.170 25;
   --sui-warning: 0.388 0.082 75;
@@ -29,12 +37,12 @@
   --sui-light-top: 1 0 0;
   --sui-light-bottom: 0.32 0.02 256;
   --sui-elevation-flat: none;
-  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.16), 0 4px 13px oklch(var(--sui-light-bottom) / 0.09);
+  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.16), 0 2px 6px oklch(var(--sui-light-bottom) / 0.07);
   --sui-elevation-floating: 0 16px 40px oklch(var(--sui-light-bottom) / 0.20), inset 0 1px 0 oklch(var(--sui-light-top) / 0.70);
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.19), inset 0 1px 0 oklch(var(--sui-light-top) / 0.55);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.22), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
   --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.21);
-  --sui-elevation-well: inset 0 3px 4px oklch(var(--sui-light-bottom) / 0.62), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.40), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 28px;
   --sui-glass-saturation: 1.06;
@@ -71,9 +79,17 @@
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
+  --sui-rim: 0.555 0.014 256;
   --sui-primary: 0.809 0.098 255;
   --sui-primary-strong: 0.734 0.139 257;
-  --sui-primary-soft: 0.42 0.055 257;
+  --sui-primary-soft: 0.325 0.050 257;
+  --sui-primary-selected: 0.400 0.075 257;
+  --sui-danger-soft: 0.315 0.050 22;
+  --sui-danger-selected: 0.395 0.070 22;
+  --sui-warning-soft: 0.320 0.045 78;
+  --sui-warning-selected: 0.400 0.065 78;
+  --sui-success-soft: 0.315 0.045 160;
+  --sui-success-selected: 0.395 0.065 160;
   --sui-accent: 0.80 0.08 215;
   --sui-danger: 0.799 0.115 25;
   --sui-warning: 0.82 0.12 80;
@@ -94,7 +110,7 @@
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.36);
-  --sui-elevation-well: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -2px 3px oklch(var(--sui-light-top) / 0.40);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.60), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
@@ -132,9 +148,17 @@
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
+  --sui-rim: 0.555 0.014 256;
   --sui-primary: 0.809 0.098 255;
   --sui-primary-strong: 0.734 0.139 257;
-  --sui-primary-soft: 0.42 0.055 257;
+  --sui-primary-soft: 0.325 0.050 257;
+  --sui-primary-selected: 0.400 0.075 257;
+  --sui-danger-soft: 0.315 0.050 22;
+  --sui-danger-selected: 0.395 0.070 22;
+  --sui-warning-soft: 0.320 0.045 78;
+  --sui-warning-selected: 0.400 0.065 78;
+  --sui-success-soft: 0.315 0.045 160;
+  --sui-success-selected: 0.395 0.065 160;
   --sui-accent: 0.80 0.08 215;
   --sui-danger: 0.799 0.115 25;
   --sui-warning: 0.82 0.12 80;
@@ -155,7 +179,7 @@
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.36);
-  --sui-elevation-well: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -2px 3px oklch(var(--sui-light-top) / 0.40);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.60), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
@@ -184,11 +208,20 @@
   }
 
   :root {
+  --sui-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sui-rim-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='16' fill='none' stroke='%23000' stroke-width='3' stroke-dasharray='7' stroke-linecap='round'/%3E%3C/svg%3E");
   --sui-duration-press: 150ms;
   --sui-duration-release: 200ms;
+  --sui-duration-tactile: 80ms;
   --sui-duration-overlay: 240ms;
   --sui-duration-overlay-exit: 160ms;
+  --sui-duration-travel: 300ms;
+  --sui-duration-sheet: 320ms;
+  --sui-duration-sheet-exit: 200ms;
   --sui-duration-activity: 1400ms;
+  --sui-duration-spin: 1000ms;
+  --sui-duration-pulse: 2000ms;
+  --sui-ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
   --sui-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
   --sui-ease-release: cubic-bezier(0.16, 1, 0.3, 1);
   --sui-ease-exit: cubic-bezier(0.4, 0, 1, 1);
@@ -362,9 +395,9 @@
     margin-top: -0.625rem;
     margin-bottom: -0.625rem
 }
-:where(.sui-scope).-my-3 {
-    margin-top: -0.75rem;
-    margin-bottom: -0.75rem
+:where(.sui-scope).-my-\[0\.6875rem\] {
+    margin-top: -0.6875rem;
+    margin-bottom: -0.6875rem
 }
 :where(.sui-scope).mx-3 {
     margin-left: 0.75rem;
@@ -374,6 +407,10 @@
     margin-left: 1rem;
     margin-right: 1rem
 }
+:where(.sui-scope).my-0\.5 {
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem
+}
 :where(.sui-scope).my-1 {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem
@@ -508,9 +545,9 @@
     width: 2.5rem;
     height: 2.5rem
 }
-:where(.sui-scope).size-2\.5 {
-    width: 0.625rem;
-    height: 0.625rem
+:where(.sui-scope).size-2 {
+    width: 0.5rem;
+    height: 0.5rem
 }
 :where(.sui-scope).size-3\.5 {
     width: 0.875rem;
@@ -536,6 +573,10 @@
     width: 2rem;
     height: 2rem
 }
+:where(.sui-scope).size-full {
+    width: 100%;
+    height: 100%
+}
 :where(.sui-scope).h-0 {
     height: 0px
 }
@@ -560,6 +601,9 @@
 :where(.sui-scope).h-8 {
     height: 2rem
 }
+:where(.sui-scope).h-\[1\.375rem\] {
+    height: 1.375rem
+}
 :where(.sui-scope).h-\[1lh\] {
     height: 1lh
 }
@@ -629,9 +673,6 @@
 :where(.sui-scope).w-2\/5 {
     width: 40%
 }
-:where(.sui-scope).w-3 {
-    width: 0.75rem
-}
 :where(.sui-scope).w-32 {
     width: 8rem
 }
@@ -785,7 +826,7 @@
     }
 }
 :where(.sui-scope).animate-pulse {
-    animation: sherick-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+    animation: sherick-pulse var(--sui-duration-pulse) var(--sui-ease-pulse) infinite
 }
 @keyframes sherick-indeterminate {
     0% {
@@ -804,7 +845,7 @@
     }
 }
 :where(.sui-scope).animate-spin {
-    animation: sherick-spin 1s linear infinite
+    animation: sherick-spin var(--sui-duration-spin) linear infinite
 }
 :where(.sui-scope).cursor-not-allowed {
     cursor: not-allowed
@@ -836,8 +877,8 @@
 :where(.sui-scope).grid-cols-\[0\.375rem_minmax\(0\2c 1fr\)\] {
     grid-template-columns: 0.375rem minmax(0,1fr)
 }
-:where(.sui-scope).grid-cols-\[1rem_minmax\(0\2c 1fr\)\] {
-    grid-template-columns: 1rem minmax(0,1fr)
+:where(.sui-scope).grid-cols-\[1\.25rem_minmax\(0\2c 1fr\)\] {
+    grid-template-columns: 1.25rem minmax(0,1fr)
 }
 :where(.sui-scope).grid-cols-\[repeat\(auto-fit\2c minmax\(min\(100\%\2c 14rem\)\2c 1fr\)\)\] {
     grid-template-columns: repeat(auto-fit,minmax(min(100%, 14rem),1fr))
@@ -959,11 +1000,11 @@
 :where(.sui-scope).rounded {
     border-radius: 0.25rem
 }
-:where(.sui-scope).rounded-\[0\.625rem\] {
-    border-radius: 0.625rem
+:where(.sui-scope).rounded-\[0\.375rem\] {
+    border-radius: 0.375rem
 }
-:where(.sui-scope).rounded-\[0\.875rem\] {
-    border-radius: 0.875rem
+:where(.sui-scope).rounded-\[0\.75rem\] {
+    border-radius: 0.75rem
 }
 :where(.sui-scope).rounded-\[1\.25rem\] {
     border-radius: 1.25rem
@@ -974,8 +1015,8 @@
 :where(.sui-scope).rounded-\[1\.75rem\] {
     border-radius: 1.75rem
 }
-:where(.sui-scope).rounded-\[2rem\] {
-    border-radius: 2rem
+:where(.sui-scope).rounded-\[1rem\] {
+    border-radius: 1rem
 }
 :where(.sui-scope).rounded-full {
     border-radius: 9999px
@@ -992,10 +1033,6 @@
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px
 }
-:where(.sui-scope).rounded-s-none {
-    border-start-start-radius: 0px;
-    border-end-start-radius: 0px
-}
 :where(.sui-scope).rounded-t-none {
     border-top-left-radius: 0px;
     border-top-right-radius: 0px
@@ -1006,6 +1043,9 @@
 :where(.sui-scope).border-0 {
     border-width: 0px
 }
+:where(.sui-scope).border-\[1\.5px\] {
+    border-width: 1.5px
+}
 :where(.sui-scope).border-b {
     border-bottom-width: 1px
 }
@@ -1021,6 +1061,10 @@
 :where(.sui-scope).border-t {
     border-top-width: 1px
 }
+:where(.sui-scope).border-sherick-danger {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+}
 :where(.sui-scope).border-sherick-detail {
     --tw-border-opacity: 1;
     border-color: oklch(var(--sui-detail) / var(--tw-border-opacity, 1))
@@ -1034,9 +1078,17 @@
 :where(.sui-scope).border-sherick-edge\/\[0\.10\] {
     border-color: oklch(var(--sui-edge) / 0.10)
 }
+:where(.sui-scope).border-sherick-ink-muted {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+}
 :where(.sui-scope).border-sherick-primary\/\[0\.45\] {
     border-color: oklch(var(--sui-primary) / 0.45)
 }
+:where(.sui-scope).border-sherick-rim {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-rim) / var(--tw-border-opacity, 1))
+}
 :where(.sui-scope).border-e-transparent {
     border-inline-end-color: transparent
 }
@@ -1050,21 +1102,20 @@
 :where(.sui-scope).bg-sherick-canvas\/\[0\.28\] {
     background-color: oklch(var(--sui-canvas) / 0.28)
 }
+:where(.sui-scope).bg-sherick-canvas\/\[0\.7\] {
+    background-color: oklch(var(--sui-canvas) / 0.7)
+}
 :where(.sui-scope).bg-sherick-danger {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-danger) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-danger\/\[0\.075\] {
-    background-color: oklch(var(--sui-danger) / 0.075)
-}
-:where(.sui-scope).bg-sherick-danger\/\[0\.09\] {
-    background-color: oklch(var(--sui-danger) / 0.09)
-}
-:where(.sui-scope).bg-sherick-danger\/\[0\.13\] {
-    background-color: oklch(var(--sui-danger) / 0.13)
+:where(.sui-scope).bg-sherick-danger-selected {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-selected) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-danger\/\[0\.16\] {
-    background-color: oklch(var(--sui-danger) / 0.16)
+:where(.sui-scope).bg-sherick-danger-soft {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).bg-sherick-detail {
     --tw-bg-opacity: 1;
@@ -1078,15 +1129,17 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-media) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-primary-strong {
+:where(.sui-scope).bg-sherick-primary-selected {
     --tw-bg-opacity: 1;
-    background-color: oklch(var(--sui-primary-strong) / var(--tw-bg-opacity, 1))
+    background-color: oklch(var(--sui-primary-selected) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-primary\/\[0\.12\] {
-    background-color: oklch(var(--sui-primary) / 0.12)
+:where(.sui-scope).bg-sherick-primary-soft {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-primary-soft) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-primary\/\[0\.22\] {
-    background-color: oklch(var(--sui-primary) / 0.22)
+:where(.sui-scope).bg-sherick-primary-strong {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-primary-strong) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).bg-sherick-scrim\/\[0\.38\] {
     background-color: oklch(var(--sui-scrim) / 0.38)
@@ -1095,11 +1148,13 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-success) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-success\/\[0\.09\] {
-    background-color: oklch(var(--sui-success) / 0.09)
+:where(.sui-scope).bg-sherick-success-selected {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-success-selected) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-success\/\[0\.16\] {
-    background-color: oklch(var(--sui-success) / 0.16)
+:where(.sui-scope).bg-sherick-success-soft {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-success-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).bg-sherick-surface-float\/\[var\(--sui-glass-dense-fill\)\] {
     background-color: oklch(var(--sui-surface-float) / var(--sui-glass-dense-fill))
@@ -1117,18 +1172,12 @@
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.56\] {
     background-color: oklch(var(--sui-surface-high) / 0.56)
 }
-:where(.sui-scope).bg-sherick-surface-high\/\[0\.66\] {
-    background-color: oklch(var(--sui-surface-high) / 0.66)
-}
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.72\] {
     background-color: oklch(var(--sui-surface-high) / 0.72)
 }
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.82\] {
     background-color: oklch(var(--sui-surface-high) / 0.82)
 }
-:where(.sui-scope).bg-sherick-surface-high\/\[0\.9\] {
-    background-color: oklch(var(--sui-surface-high) / 0.9)
-}
 :where(.sui-scope).bg-sherick-surface-overlay\/\[var\(--sui-overlay-fill\)\] {
     background-color: oklch(var(--sui-surface-overlay) / var(--sui-overlay-fill))
 }
@@ -1142,11 +1191,13 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-warning) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-warning\/\[0\.09\] {
-    background-color: oklch(var(--sui-warning) / 0.09)
+:where(.sui-scope).bg-sherick-warning-selected {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-warning-selected) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-warning\/\[0\.16\] {
-    background-color: oklch(var(--sui-warning) / 0.16)
+:where(.sui-scope).bg-sherick-warning-soft {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-warning-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).bg-transparent {
     background-color: transparent
@@ -1265,6 +1316,10 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem
 }
+:where(.sui-scope).py-2\.5 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem
+}
 :where(.sui-scope).py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem
@@ -1316,6 +1371,9 @@
 :where(.sui-scope).ps-3 {
     padding-inline-start: 0.75rem
 }
+:where(.sui-scope).ps-4 {
+    padding-inline-start: 1rem
+}
 :where(.sui-scope).ps-5 {
     padding-inline-start: 1.25rem
 }
@@ -1325,6 +1383,9 @@
 :where(.sui-scope).ps-8 {
     padding-inline-start: 2rem
 }
+:where(.sui-scope).pt-0\.5 {
+    padding-top: 0.125rem
+}
 :where(.sui-scope).pt-1 {
     padding-top: 0.25rem
 }
@@ -1358,6 +1419,9 @@
 :where(.sui-scope).font-mono {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
 }
+:where(.sui-scope).font-sherick-mono {
+    font-family: var(--sui-font-mono)
+}
 :where(.sui-scope).text-2xl {
     font-size: 1.5rem;
     line-height: 2rem
@@ -1366,15 +1430,15 @@
     font-size: 1.875rem;
     line-height: 2.25rem
 }
-:where(.sui-scope).text-\[0\.95rem\] {
-    font-size: 0.95rem
+:where(.sui-scope).text-\[0\.8125rem\] {
+    font-size: 0.8125rem
+}
+:where(.sui-scope).text-\[0\.9375rem\] {
+    font-size: 0.9375rem
 }
 :where(.sui-scope).text-\[0\.9em\] {
     font-size: 0.9em
 }
-:where(.sui-scope).text-\[11px\] {
-    font-size: 11px
-}
 :where(.sui-scope).text-base {
     font-size: 1rem;
     line-height: 1.5rem
@@ -1401,9 +1465,6 @@
 :where(.sui-scope).font-semibold {
     font-weight: 600
 }
-:where(.sui-scope).uppercase {
-    text-transform: uppercase
-}
 :where(.sui-scope).italic {
     font-style: italic
 }
@@ -1411,6 +1472,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
 }
+:where(.sui-scope).leading-4 {
+    line-height: 1rem
+}
 :where(.sui-scope).leading-5 {
     line-height: 1.25rem
 }
@@ -1420,6 +1484,9 @@
 :where(.sui-scope).leading-7 {
     line-height: 1.75rem
 }
+:where(.sui-scope).leading-\[1\.375rem\] {
+    line-height: 1.375rem
+}
 :where(.sui-scope).tracking-\[-0\.01em\] {
     letter-spacing: -0.01em
 }
@@ -1432,9 +1499,6 @@
 :where(.sui-scope).tracking-\[-0\.03em\] {
     letter-spacing: -0.03em
 }
-:where(.sui-scope).tracking-\[0\.08em\] {
-    letter-spacing: 0.08em
-}
 :where(.sui-scope).text-current {
     color: currentColor
 }
@@ -1617,8 +1681,8 @@
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms
 }
-:where(.sui-scope).transition-\[background-color\2c color\2c box-shadow\2c opacity\] {
-    transition-property: background-color,color,box-shadow,opacity;
+:where(.sui-scope).transition-\[background-color\2c border-color\2c color\2c box-shadow\2c opacity\] {
+    transition-property: background-color,border-color,color,box-shadow,opacity;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms
 }
@@ -1679,6 +1743,18 @@
 :where(.sui-scope).duration-release {
     transition-duration: var(--sui-duration-release)
 }
+:where(.sui-scope).duration-sheet {
+    transition-duration: var(--sui-duration-sheet)
+}
+:where(.sui-scope).duration-sheet-exit {
+    transition-duration: var(--sui-duration-sheet-exit)
+}
+:where(.sui-scope).duration-tactile {
+    transition-duration: var(--sui-duration-tactile)
+}
+:where(.sui-scope).duration-travel {
+    transition-duration: var(--sui-duration-travel)
+}
 :where(.sui-scope).ease-exit {
     transition-timing-function: var(--sui-ease-exit)
 }
@@ -1736,8 +1812,8 @@
 :where(.sui-scope).\[--sui-sheet-from-y\:100\%\] {
     --sui-sheet-from-y: 100%
 }
-:where(.sui-scope).\[--sui-slider-reserve\:0\.625rem\] {
-    --sui-slider-reserve: 0.625rem
+:where(.sui-scope).\[--sui-slider-reserve\:0\.875rem\] {
+    --sui-slider-reserve: 0.875rem
 }
 :where(.sui-scope).\[--sui-toast-from-y\:-150\%\] {
     --sui-toast-from-y: -150%
@@ -1817,6 +1893,10 @@
     content: var(--tw-content);
     opacity: 0
 }
+:where(.sui-scope).before\:transition-none::before {
+    content: var(--tw-content);
+    transition-property: none
+}
 :where(.sui-scope).before\:transition-opacity::before {
     content: var(--tw-content);
     transition-property: opacity;
@@ -1835,6 +1915,10 @@
     --tw-content: '';
     content: var(--tw-content)
 }
+:where(.sui-scope).after\:pointer-events-none::after {
+    content: var(--tw-content);
+    pointer-events: none
+}
 :where(.sui-scope).after\:pointer-events-auto::after {
     content: var(--tw-content);
     pointer-events: auto
@@ -1843,14 +1927,66 @@
     content: var(--tw-content);
     position: absolute
 }
+:where(.sui-scope).after\:inset-0::after {
+    content: var(--tw-content);
+    inset: 0px
+}
 :where(.sui-scope).after\:inset-\[min\(0px\2c calc\(\(100\%-2\.75rem\)\/2\)\)\]::after {
     content: var(--tw-content);
     inset: min(0px, calc((100% - 2.75rem) / 2))
 }
+:where(.sui-scope).after\:box-border::after {
+    content: var(--tw-content);
+    box-sizing: border-box
+}
+:where(.sui-scope).after\:rounded-\[inherit\]::after {
+    content: var(--tw-content);
+    border-radius: inherit
+}
+:where(.sui-scope).after\:border-\[1\.5px\]::after {
+    content: var(--tw-content);
+    border-width: 1.5px
+}
+:where(.sui-scope).after\:border-sherick-rim::after {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-rim) / var(--tw-border-opacity, 1))
+}
+:where(.sui-scope).after\:bg-sherick-rim::after {
+    content: var(--tw-content);
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-rim) / var(--tw-bg-opacity, 1))
+}
+:where(.sui-scope).after\:transition-\[background-color\2c border-color\2c opacity\]::after {
+    content: var(--tw-content);
+    transition-property: background-color,border-color,opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+:where(.sui-scope).after\:duration-press::after {
+    content: var(--tw-content);
+    transition-duration: var(--sui-duration-press)
+}
+:where(.sui-scope).after\:ease-press::after {
+    content: var(--tw-content);
+    transition-timing-function: var(--sui-ease-press)
+}
 :where(.sui-scope).after\:content-\[\'\'\]::after {
     --tw-content: '';
     content: var(--tw-content)
 }
+:where(.sui-scope).after\:\[mask-image\:var\(--sui-rim-dashed\)\]::after {
+    content: var(--tw-content);
+    mask-image: var(--sui-rim-dashed)
+}
+:where(.sui-scope).after\:\[mask-repeat\:no-repeat\]::after {
+    content: var(--tw-content);
+    mask-repeat: no-repeat
+}
+:where(.sui-scope).after\:\[mask-size\:100\%_100\%\]::after {
+    content: var(--tw-content);
+    mask-size: 100% 100%
+}
 :where(.sui-scope).first\:start-1:first-child {
     inset-inline-start: 0.25rem
 }
@@ -1863,15 +1999,16 @@
 :where(.sui-scope).last\:border-b-0:last-child {
     border-bottom-width: 0px
 }
-:where(.sui-scope).hover\:bg-sherick-danger\/\[0\.10\]:hover {
-    background-color: oklch(var(--sui-danger) / 0.10)
+:where(.sui-scope).hover\:border-sherick-ink-muted:hover {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+}
+:where(.sui-scope).hover\:bg-sherick-canvas\/\[0\.85\]:hover {
+    background-color: oklch(var(--sui-canvas) / 0.85)
 }
 :where(.sui-scope).hover\:bg-sherick-ink\/\[0\.05\]:hover {
     background-color: oklch(var(--sui-ink) / 0.05)
 }
-:where(.sui-scope).hover\:bg-sherick-surface-high\/\[0\.82\]:hover {
-    background-color: oklch(var(--sui-surface-high) / 0.82)
-}
 :where(.sui-scope).hover\:text-sherick-ink:hover {
     --tw-text-opacity: 1;
     color: oklch(var(--sui-ink) / var(--tw-text-opacity, 1))
@@ -1879,11 +2016,18 @@
 :where(.sui-scope).hover\:decoration-sherick-primary:hover {
     text-decoration-color: oklch(var(--sui-primary) / 1)
 }
-:where(.sui-scope).focus\:bg-sherick-danger\/\[0\.13\]:focus {
-    background-color: oklch(var(--sui-danger) / 0.13)
+:where(.sui-scope).hover\:after\:bg-sherick-ink-muted:hover::after {
+    content: var(--tw-content);
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-ink-muted) / var(--tw-bg-opacity, 1))
+}
+:where(.sui-scope).focus\:border-sherick-ink-muted:focus {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
 }
-:where(.sui-scope).focus\:bg-sherick-surface-high\/\[0\.9\]:focus {
-    background-color: oklch(var(--sui-surface-high) / 0.9)
+:where(.sui-scope).focus\:bg-sherick-canvas:focus {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-canvas) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).focus\:outline-none:focus {
     outline: 2px solid transparent;
@@ -1937,12 +2081,15 @@
 :where(.sui-scope).active\:duration-press:active {
     transition-duration: var(--sui-duration-press)
 }
+:where(.sui-scope).active\:duration-tactile:active {
+    transition-duration: var(--sui-duration-tactile)
+}
 :where(.sui-scope).active\:ease-press:active {
     transition-timing-function: var(--sui-ease-press)
 }
-:where(.sui-scope).active\:before\:duration-press:active::before {
+:where(.sui-scope).active\:before\:duration-tactile:active::before {
     content: var(--tw-content);
-    transition-duration: var(--sui-duration-press)
+    transition-duration: var(--sui-duration-tactile)
 }
 :where(.sui-scope).active\:before\:ease-press:active::before {
     content: var(--tw-content);
@@ -1971,20 +2118,34 @@
     --tw-scale-y: 0.88;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-:where(.sui-scope).group:active :where(.sui-scope).group-active\:duration-press {
-    transition-duration: var(--sui-duration-press)
+:where(.sui-scope).group:active :where(.sui-scope).group-active\:duration-tactile {
+    transition-duration: var(--sui-duration-tactile)
 }
 :where(.sui-scope).group:active :where(.sui-scope).group-active\:ease-press {
     transition-timing-function: var(--sui-ease-press)
 }
-:where(.sui-scope).group:active :where(.sui-scope).group-active\:before\:duration-press::before {
+:where(.sui-scope).group:active :where(.sui-scope).group-active\:before\:duration-tactile::before {
     content: var(--tw-content);
-    transition-duration: var(--sui-duration-press)
+    transition-duration: var(--sui-duration-tactile)
 }
 :where(.sui-scope).group:active :where(.sui-scope).group-active\:before\:ease-press::before {
     content: var(--tw-content);
     transition-timing-function: var(--sui-ease-press)
 }
+:where(.sui-scope).group:not([data-disabled]):not([data-readonly]):not(:disabled):active :where(.sui-scope).group-\[\:not\(\[data-disabled\]\)\:not\(\[data-readonly\]\)\:not\(\:disabled\)\:active\]\:shadow-sherick-well {
+    --tw-shadow: var(--sui-elevation-well);
+    --tw-shadow-colored: var(--sui-elevation-well);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+:where(.sui-scope).group:not([data-disabled]):not([data-readonly]):not(:disabled):hover :where(.sui-scope).group-\[\:not\(\[data-disabled\]\)\:not\(\[data-readonly\]\)\:not\(\:disabled\)\:hover\]\:before\:opacity-\[0\.09\]::before {
+    content: var(--tw-content);
+    opacity: 0.09
+}
+:where(.sui-scope).group:not([data-disabled]):not([data-readonly]):not(:disabled):hover :where(.sui-scope).group-\[\:not\(\[data-disabled\]\)\:not\(\[data-readonly\]\)\:not\(\:disabled\)\:hover\]\:after\:border-sherick-ink-muted::after {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+}
 :where(.sui-scope).group:not([data-disabled]) :where(.sui-scope).group-\[\:not\(\[data-disabled\]\)\]\:hover\:scale-110:hover {
     --tw-scale-x: 1.1;
     --tw-scale-y: 1.1;
@@ -2009,8 +2170,9 @@
 :where(.sui-scope).has-\[\[data-disabled\]\]\:cursor-not-allowed:has([data-disabled]) {
     cursor: not-allowed
 }
-:where(.sui-scope).has-\[\[data-checked\]\]\:bg-sherick-primary\/\[0\.22\]:has([data-checked]) {
-    background-color: oklch(var(--sui-primary) / 0.22)
+:where(.sui-scope).has-\[\[data-checked\]\]\:bg-sherick-primary-selected:has([data-checked]) {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-primary-selected) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).has-\[\[data-checked\]\]\:text-sherick-ink:has([data-checked]) {
     --tw-text-opacity: 1;
@@ -2069,16 +2231,14 @@
 :where(.sui-scope).data-\[orientation\=vertical\]\:items-stretch[data-orientation="vertical"] {
     align-items: stretch
 }
+:where(.sui-scope).data-\[invalid\]\:border-sherick-danger[data-invalid] {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+}
 :where(.sui-scope).data-\[dragging\]\:bg-sherick-primary-strong[data-dragging] {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-primary-strong) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).data-\[invalid\]\:bg-sherick-danger\/\[0\.075\][data-invalid] {
-    background-color: oklch(var(--sui-danger) / 0.075)
-}
-:where(.sui-scope).data-\[invalid\]\:bg-sherick-danger\/\[0\.13\][data-invalid] {
-    background-color: oklch(var(--sui-danger) / 0.13)
-}
 :where(.sui-scope).data-\[dragging\]\:text-sherick-on-primary[data-dragging] {
     --tw-text-opacity: 1;
     color: oklch(var(--sui-on-primary) / var(--tw-text-opacity, 1))
@@ -2142,6 +2302,9 @@
 :where(.sui-scope).data-\[ending-style\]\:duration-overlay-exit[data-ending-style] {
     transition-duration: var(--sui-duration-overlay-exit)
 }
+:where(.sui-scope).data-\[ending-style\]\:duration-sheet-exit[data-ending-style] {
+    transition-duration: var(--sui-duration-sheet-exit)
+}
 :where(.sui-scope).data-\[ending-style\]\:ease-exit[data-ending-style] {
     transition-timing-function: var(--sui-ease-exit)
 }
@@ -2212,8 +2375,14 @@
     content: var(--tw-content);
     opacity: 0.05
 }
-:where(.sui-scope).data-\[invalid\]\:hover\:bg-sherick-danger\/\[0\.10\]:hover[data-invalid] {
-    background-color: oklch(var(--sui-danger) / 0.10)
+:where(.sui-scope).data-\[dragging\]\:after\:bg-sherick-primary[data-dragging]::after {
+    content: var(--tw-content);
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-primary) / var(--tw-bg-opacity, 1))
+}
+:where(.sui-scope).data-\[invalid\]\:hover\:border-sherick-danger:hover[data-invalid] {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
 }
 :where(.sui-scope).group[data-checked] :where(.sui-scope).group-data-\[checked\]\:h-6 {
     height: 1.5rem
@@ -2284,6 +2453,24 @@
 :where(.sui-scope).group\/field[data-disabled] :where(.sui-scope).group-data-\[disabled\]\/field\:opacity-100 {
     opacity: 1
 }
+:where(.sui-scope).group[data-checked] :where(.sui-scope).group-data-\[checked\]\:shadow-sherick-flat {
+    --tw-shadow: var(--sui-elevation-flat);
+    --tw-shadow-colored: var(--sui-elevation-flat);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+:where(.sui-scope).group[data-indeterminate] :where(.sui-scope).group-data-\[indeterminate\]\:shadow-sherick-flat {
+    --tw-shadow: var(--sui-elevation-flat);
+    --tw-shadow-colored: var(--sui-elevation-flat);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+:where(.sui-scope).group[data-checked] :where(.sui-scope).group-data-\[checked\]\:after\:opacity-0::after {
+    content: var(--tw-content);
+    opacity: 0
+}
+:where(.sui-scope).group[data-indeterminate] :where(.sui-scope).group-data-\[indeterminate\]\:after\:opacity-0::after {
+    content: var(--tw-content);
+    opacity: 0
+}
 @media (prefers-reduced-motion: reduce) {
     :where(.sui-scope).motion-reduce\:transform-none {
         transform: none
@@ -2303,6 +2490,10 @@
         content: var(--tw-content);
         transition-property: none
     }
+    :where(.sui-scope).motion-reduce\:after\:transition-none::after {
+        content: var(--tw-content);
+        transition-property: none
+    }
     :where(.sui-scope).group:active :where(.sui-scope).motion-reduce\:group-active\:scale-100 {
         --tw-scale-x: 1;
         --tw-scale-y: 1;
@@ -2356,11 +2547,17 @@
         outline-style: none
     }
 }
-:where(.sui-scope).\[\&\&\]\:focus-within\:bg-sherick-surface-high\/\[0\.9\]:focus-within.\[\&\&\]\:focus-within\:bg-sherick-surface-high\/\[0\.9\]:focus-within {
-    background-color: oklch(var(--sui-surface-high) / 0.9)
+:where(.sui-scope).\[\&\&\]\:focus-within\:border-sherick-ink-muted:focus-within.\[\&\&\]\:focus-within\:border-sherick-ink-muted:focus-within {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
 }
-:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger\/\[0\.13\]:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger\/\[0\.13\]:focus-within[data-invalid] {
-    background-color: oklch(var(--sui-danger) / 0.13)
+:where(.sui-scope).\[\&\&\]\:focus-within\:bg-sherick-canvas:focus-within.\[\&\&\]\:focus-within\:bg-sherick-canvas:focus-within {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-canvas) / var(--tw-bg-opacity, 1))
+}
+:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:border-sherick-danger:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:border-sherick-danger:focus-within[data-invalid] {
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
 }
 :where(.sui-scope).\[\&\:has\(\+div\:not\(\[data-open\]\)\:hover\)\]\:opacity-0:has(+div:not([data-open]):hover) {
     opacity: 0
@@ -2388,6 +2585,10 @@
     content: var(--tw-content);
     opacity: 0.09
 }
+:where(.sui-scope).\[\&\:not\(\[data-disabled\]\)\:not\(\:disabled\)\]\:active\:before\:opacity-\[0\.12\]:active:not([data-disabled]):not(:disabled)::before {
+    content: var(--tw-content);
+    opacity: 0.12
+}
 :where(.sui-scope).\[\&\:not\(\[data-disabled\]\)\:not\(\:disabled\)\]\:active\:before\:opacity-\[0\.15\]:active:not([data-disabled]):not(:disabled)::before {
     content: var(--tw-content);
     opacity: 0.15
@@ -2405,11 +2606,21 @@
     opacity: 0.09
 }
 @media (prefers-reduced-motion: no-preference) {
+    :where(.sui-scope).motion-safe\:\[\&\:not\(\[data-disabled\]\2c \:disabled\)\]\:active\:scale-\[0\.985\]:active:not([data-disabled],:disabled) {
+        --tw-scale-x: 0.985;
+        --tw-scale-y: 0.985;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+    }
     :where(.sui-scope).motion-safe\:\[\&\:not\(\[data-disabled\]\2c \:disabled\2c \:has\(\>\[role\=combobox\]\[data-disabled\]\)\)\]\:active\:scale-\[0\.96\]:active:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled])) {
         --tw-scale-x: 0.96;
         --tw-scale-y: 0.96;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
+    :where(.sui-scope).motion-safe\:\[\&\:not\(\[data-disabled\]\2c \:disabled\2c \:has\(\>\[role\=combobox\]\[data-disabled\]\)\)\]\:active\:scale-\[0\.993\]:active:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled])) {
+        --tw-scale-x: 0.993;
+        --tw-scale-y: 0.993;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+    }
 }
 :where(.sui-scope).\[\&\>svg\]\:size-3\.5>svg {
     width: 0.875rem;
@@ -2423,6 +2634,10 @@
     width: 1.25rem;
     height: 1.25rem
 }
+:where(.sui-scope).\[\&\>svg\]\:size-6>svg {
+    width: 1.5rem;
+    height: 1.5rem
+}
 :where(.sui-scope).\[\&\>svg\]\:size-7>svg {
     width: 1.75rem;
     height: 1.75rem
@@ -2517,13 +2732,12 @@ div:not([data-open]):hover+:where(.sui-scope).\[div\:not\(\[data-open\]\)\:hover
     outline-offset: -2px;
   }
 
-  /* A *resting* mark is identified by the depth of its well, which forced colors flattens, so an
-     unchecked box and an unselected radio need a boundary of their own. It is CanvasText rather
-     than Highlight: this is component identity, not selection. */
-  :where(.sui-scope)[role="checkbox"][aria-checked="false"]:not(:focus-visible),
+  /* A *resting* mark keeps its own rim, a real border that forced colors repaints in a system
+     colour, so an unchecked box and an unselected radio need no extra boundary — and a radio's
+     transparent utility outline, which forced colors would make opaque, must not become a second
+     ring around that rim. */
   :where(.sui-scope)[role="radio"][aria-checked="false"]:not(:focus-visible) {
-    outline: 1px solid CanvasText;
-    outline-offset: -2px;
+    outline: none;
   }
 
   /* A slider conveys its value through the fill of its groove and the depth of its handle, and
@@ -2533,6 +2747,21 @@ div:not([data-open]):hover+:where(.sui-scope).\[div\:not\(\[data-open\]\)\:hover
     border: 1px solid CanvasText;
   }
 
+  /* A drop target's dashes are a masked fill, and forced colors would flatten that fill into the
+     page. They keep a system colour, so the target still shows its boundary. */
+  :where(.sui-scope)[data-sui-drop-target]::after {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+
+  /* A selected radio's thumb is a fill, and forced colors flattens it into its socket. It keeps a
+     system colour of its own, so selection is a shape and not only the colour of the outline
+     around the control. */
+  :where(.sui-scope)[role="radio"][aria-checked="true"] :where(.sui-scope)[data-sui-radio-dot] {
+    forced-color-adjust: none;
+    background-color: Highlight;
+  }
+
   /* A progress bar says how far along the work is through the fill of its track alone, and
      forced colors flattens the fill into the track. The indicator carries a Sherick-owned marker
      for the same reason the slider thumb does: a primitive's own attributes are not component