sherick-ui 2.3.0 → 2.5.0

package/dist/styles.css

@@ -11,6 +11,7 @@
   --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.920 0.035 255;
@@ -41,7 +42,7 @@
   --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;
@@ -78,6 +79,7 @@
   --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.325 0.050 257;
@@ -108,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;
@@ -146,6 +148,7 @@
   --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.325 0.050 257;
@@ -176,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;
@@ -206,6 +209,7 @@
 
   :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;
@@ -403,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
@@ -537,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;
@@ -575,6 +583,9 @@
 :where(.sui-scope).h-1\.5 {
     height: 0.375rem
 }
+:where(.sui-scope).h-10 {
+    height: 2.5rem
+}
 :where(.sui-scope).h-11 {
     height: 2.75rem
 }
@@ -584,6 +595,9 @@
 :where(.sui-scope).h-32 {
     height: 8rem
 }
+:where(.sui-scope).h-48 {
+    height: 12rem
+}
 :where(.sui-scope).h-5 {
     height: 1.25rem
 }
@@ -746,6 +760,9 @@
 :where(.sui-scope).max-w-\[min\(28rem\2c 90vw\)\] {
     max-width: min(28rem, 90vw)
 }
+:where(.sui-scope).max-w-\[min\(34rem\2c var\(--available-width\)\)\] {
+    max-width: min(34rem, var(--available-width))
+}
 :where(.sui-scope).max-w-\[var\(--available-width\)\] {
     max-width: var(--available-width)
 }
@@ -857,6 +874,10 @@
 :where(.sui-scope).resize-y {
     resize: vertical
 }
+:where(.sui-scope).scroll-py-11 {
+    scroll-padding-top: 2.75rem;
+    scroll-padding-bottom: 2.75rem
+}
 :where(.sui-scope).list-decimal {
     list-style-type: decimal
 }
@@ -992,8 +1013,8 @@
 :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\.75rem\] {
     border-radius: 0.75rem
@@ -1035,6 +1056,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
 }
@@ -1050,6 +1074,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))
@@ -1063,9 +1091,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
 }
@@ -1079,6 +1115,9 @@
 :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))
@@ -1091,12 +1130,6 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-danger-soft) / 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\.13\] {
-    background-color: oklch(var(--sui-danger) / 0.13)
-}
 :where(.sui-scope).bg-sherick-detail {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-detail) / var(--tw-bg-opacity, 1))
@@ -1152,18 +1185,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))
 }
@@ -1302,6 +1329,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
@@ -1663,8 +1694,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
 }
@@ -1821,6 +1852,9 @@
 :where(.sui-scope).\[overflow-wrap\:normal\] {
     overflow-wrap: normal
 }
+:where(.sui-scope).\[scrollbar-width\:thin\] {
+    scrollbar-width: thin
+}
 :where(.sui-scope).\[transform-origin\:var\(--transform-origin\)\] {
     transform-origin: var(--transform-origin)
 }
@@ -1897,6 +1931,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
@@ -1905,14 +1943,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
 }
@@ -1925,15 +2015,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))
@@ -1941,11 +2032,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\:bg-sherick-surface-high\/\[0\.9\]:focus {
-    background-color: oklch(var(--sui-surface-high) / 0.9)
+: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-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;
@@ -2050,6 +2148,20 @@
     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;
@@ -2135,16 +2247,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))
@@ -2281,8 +2391,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
@@ -2353,6 +2469,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
@@ -2372,6 +2506,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;
@@ -2395,9 +2533,45 @@
     }
 }
 @media (min-width: 640px) {
+    :where(.sui-scope).sm\:ms-3 {
+        margin-inline-start: 0.75rem
+    }
+    :where(.sui-scope).sm\:mt-0 {
+        margin-top: 0px
+    }
+    :where(.sui-scope).sm\:grid {
+        display: grid
+    }
+    :where(.sui-scope).sm\:h-0 {
+        height: 0px
+    }
+    :where(.sui-scope).sm\:h-auto {
+        height: auto
+    }
+    :where(.sui-scope).sm\:min-h-full {
+        min-height: 100%
+    }
+    :where(.sui-scope).sm\:w-14 {
+        width: 3.5rem
+    }
     :where(.sui-scope).sm\:w-\[22\.5rem\] {
         width: 22.5rem
     }
+    :where(.sui-scope).sm\:flex-1 {
+        flex: 1 1 0%
+    }
+    :where(.sui-scope).sm\:flex-none {
+        flex: none
+    }
+    :where(.sui-scope).sm\:grid-cols-\[auto_auto\] {
+        grid-template-columns: auto auto
+    }
+    :where(.sui-scope).sm\:border-s {
+        border-inline-start-width: 1px
+    }
+    :where(.sui-scope).sm\:border-t-0 {
+        border-top-width: 0px
+    }
     :where(.sui-scope).sm\:p-8 {
         padding: 2rem
     }
@@ -2405,9 +2579,15 @@
         padding-left: 1.75rem;
         padding-right: 1.75rem
     }
+    :where(.sui-scope).sm\:ps-3 {
+        padding-inline-start: 0.75rem
+    }
     :where(.sui-scope).sm\:ps-7 {
         padding-inline-start: 1.75rem
     }
+    :where(.sui-scope).sm\:pt-0 {
+        padding-top: 0px
+    }
 }
 :where(.sui-scope).rtl\:-scale-x-100:where([dir="rtl"], [dir="rtl"] *) {
     --tw-scale-x: -1;
@@ -2425,11 +2605,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
@@ -2604,13 +2790,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
@@ -2620,6 +2805,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

package/dist/theme.css

@@ -11,6 +11,7 @@
   --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.920 0.035 255;
@@ -41,7 +42,7 @@
   --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;
@@ -78,6 +79,7 @@
   --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.325 0.050 257;
@@ -108,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;
@@ -146,6 +148,7 @@
   --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.325 0.050 257;
@@ -176,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;
@@ -206,6 +209,7 @@
 
   :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;