sherick-ui 2.0.0 → 2.1.0

package/dist/styles.css

@@ -7,6 +7,7 @@
   --sui-surface: 0.985 0.006 255;
   --sui-surface-high: 0.925 0.014 255;
   --sui-surface-float: 0.992 0.006 255;
+  --sui-media: 0.205 0.012 260;
   --sui-ink: 0.245 0.018 260;
   --sui-ink-muted: 0.480 0.018 260;
   --sui-detail: 0.600 0.016 258;
@@ -32,12 +33,13 @@
   --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-glass-fill: 0.86;
+  --sui-glass-fill: 0.98;
   --sui-glass-blur: 28px;
   --sui-glass-saturation: 1.06;
   --sui-glass-brightness: 1.012;
-  --sui-glass-dense-fill: 0.90;
+  --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 22px;
   --sui-glass-dense-saturation: 1.05;
   --sui-glass-dense-brightness: 1.008;
@@ -48,7 +50,7 @@
   --sui-glass-hero-brightness: 1.0;
   --sui-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.12) 14%, rgb(255 255 255 / 0) 46%, rgb(38 46 62 / 0.05) 100%);
   --sui-surface-overlay: 0.993 0.005 258;
-  --sui-overlay-fill: 0.9;
+  --sui-overlay-fill: 0.99;
   --sui-scrim-blur: 6px;
   --sui-code-text: oklch(0.30 0.018 260);
   --sui-code-comment: oklch(0.54 0.015 255);
@@ -65,6 +67,7 @@
   --sui-surface: 0.245 0.014 260;
   --sui-surface-high: 0.295 0.016 260;
   --sui-surface-float: 0.27 0.018 260;
+  --sui-media: 0.205 0.012 260;
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
@@ -90,12 +93,13 @@
   --sui-elevation-floating: 0 18px 44px oklch(var(--sui-light-bottom) / 0.38), inset 0 1px 0 oklch(var(--sui-light-top) / 0.05);
   --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-glass-fill: 0.90;
+  --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
   --sui-glass-brightness: 1.01;
-  --sui-glass-dense-fill: 0.96;
+  --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 26px;
   --sui-glass-dense-saturation: 1.08;
   --sui-glass-dense-brightness: 1.01;
@@ -106,7 +110,7 @@
   --sui-glass-hero-brightness: 1.0;
   --sui-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.028) 0%, rgb(255 255 255 / 0.009) 12%, rgb(255 255 255 / 0) 44%, rgb(0 0 0 / 0.16) 100%);
   --sui-surface-overlay: 0.236 0.012 260;
-  --sui-overlay-fill: 0.965;
+  --sui-overlay-fill: 0.99;
   --sui-scrim-blur: 6px;
   --sui-code-text: #e2e8f0;
   --sui-code-comment: #7a8aa3;
@@ -124,6 +128,7 @@
   --sui-surface: 0.245 0.014 260;
   --sui-surface-high: 0.295 0.016 260;
   --sui-surface-float: 0.27 0.018 260;
+  --sui-media: 0.205 0.012 260;
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
@@ -149,12 +154,13 @@
   --sui-elevation-floating: 0 18px 44px oklch(var(--sui-light-bottom) / 0.38), inset 0 1px 0 oklch(var(--sui-light-top) / 0.05);
   --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-glass-fill: 0.90;
+  --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
   --sui-glass-brightness: 1.01;
-  --sui-glass-dense-fill: 0.96;
+  --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 26px;
   --sui-glass-dense-saturation: 1.08;
   --sui-glass-dense-brightness: 1.01;
@@ -165,7 +171,7 @@
   --sui-glass-hero-brightness: 1.0;
   --sui-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.028) 0%, rgb(255 255 255 / 0.009) 12%, rgb(255 255 255 / 0) 44%, rgb(0 0 0 / 0.16) 100%);
   --sui-surface-overlay: 0.236 0.012 260;
-  --sui-overlay-fill: 0.965;
+  --sui-overlay-fill: 0.99;
   --sui-scrim-blur: 6px;
   --sui-code-text: #e2e8f0;
   --sui-code-comment: #7a8aa3;
@@ -234,9 +240,26 @@
   --tw-backdrop-opacity: ;
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
-}:where(.sui-scope).visible {
+}:where(.sui-scope).sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0
+}
+:where(.sui-scope).pointer-events-none {
+    pointer-events: none
+}
+:where(.sui-scope).visible {
     visibility: visible
 }
+:where(.sui-scope).collapse {
+    visibility: collapse
+}
 :where(.sui-scope).static {
     position: static
 }
@@ -256,6 +279,10 @@
     top: 0px;
     bottom: 0px
 }
+:where(.sui-scope).inset-y-1 {
+    top: 0.25rem;
+    bottom: 0.25rem
+}
 :where(.sui-scope).bottom-0 {
     bottom: 0px
 }
@@ -268,6 +295,9 @@
 :where(.sui-scope).end-1\.5 {
     inset-inline-end: 0.375rem
 }
+:where(.sui-scope).end-2 {
+    inset-inline-end: 0.5rem
+}
 :where(.sui-scope).end-4 {
     inset-inline-end: 1rem
 }
@@ -289,9 +319,15 @@
 :where(.sui-scope).top-0 {
     top: 0px
 }
+:where(.sui-scope).top-1 {
+    top: 0.25rem
+}
 :where(.sui-scope).top-1\/2 {
     top: 50%
 }
+:where(.sui-scope).top-2 {
+    top: 0.5rem
+}
 :where(.sui-scope).top-3 {
     top: 0.75rem
 }
@@ -316,6 +352,9 @@
 :where(.sui-scope).z-\[calc\(1000-var\(--toast-index\)\)\] {
     z-index: calc(1000 - var(--toast-index))
 }
+:where(.sui-scope).col-start-2 {
+    grid-column-start: 2
+}
 :where(.sui-scope).m-0 {
     margin: 0px
 }
@@ -372,6 +411,9 @@
 :where(.sui-scope).-ms-4 {
     margin-inline-start: -1rem
 }
+:where(.sui-scope).mb-0 {
+    margin-bottom: 0px
+}
 :where(.sui-scope).mb-2 {
     margin-bottom: 0.5rem
 }
@@ -387,9 +429,18 @@
 :where(.sui-scope).ms-1 {
     margin-inline-start: 0.25rem
 }
+:where(.sui-scope).ms-3 {
+    margin-inline-start: 0.75rem
+}
+:where(.sui-scope).mt-1 {
+    margin-top: 0.25rem
+}
 :where(.sui-scope).mt-2 {
     margin-top: 0.5rem
 }
+:where(.sui-scope).mt-3 {
+    margin-top: 0.75rem
+}
 :where(.sui-scope).mt-4 {
     margin-top: 1rem
 }
@@ -429,9 +480,30 @@
 :where(.sui-scope).table {
     display: table
 }
+:where(.sui-scope).grid {
+    display: grid
+}
+:where(.sui-scope).contents {
+    display: contents
+}
 :where(.sui-scope).hidden {
     display: none
 }
+:where(.sui-scope).aspect-\[21\/9\] {
+    aspect-ratio: 21/9
+}
+:where(.sui-scope).aspect-\[3\/4\] {
+    aspect-ratio: 3/4
+}
+:where(.sui-scope).aspect-\[4\/3\] {
+    aspect-ratio: 4/3
+}
+:where(.sui-scope).aspect-square {
+    aspect-ratio: 1 / 1
+}
+:where(.sui-scope).aspect-video {
+    aspect-ratio: 16 / 9
+}
 :where(.sui-scope).size-10 {
     width: 2.5rem;
     height: 2.5rem
@@ -470,6 +542,9 @@
 :where(.sui-scope).h-1\.5 {
     height: 0.375rem
 }
+:where(.sui-scope).h-11 {
+    height: 2.75rem
+}
 :where(.sui-scope).h-16 {
     height: 4rem
 }
@@ -485,6 +560,9 @@
 :where(.sui-scope).h-8 {
     height: 2rem
 }
+:where(.sui-scope).h-\[1lh\] {
+    height: 1lh
+}
 :where(.sui-scope).h-\[var\(--active-tab-height\)\] {
     height: var(--active-tab-height)
 }
@@ -494,6 +572,9 @@
 :where(.sui-scope).h-\[var\(--sui-disclose-height\)\] {
     height: var(--sui-disclose-height)
 }
+:where(.sui-scope).h-auto {
+    height: auto
+}
 :where(.sui-scope).h-full {
     height: 100%
 }
@@ -503,6 +584,9 @@
 :where(.sui-scope).max-h-\[calc\(100dvh-3rem\)\] {
     max-height: calc(100dvh - 3rem)
 }
+:where(.sui-scope).max-h-\[min\(24rem\2c 60dvh\)\] {
+    max-height: min(24rem, 60dvh)
+}
 :where(.sui-scope).max-h-\[var\(--available-height\)\] {
     max-height: var(--available-height)
 }
@@ -527,12 +611,18 @@
 :where(.sui-scope).min-h-7 {
     min-height: 1.75rem
 }
+:where(.sui-scope).min-h-\[3\.25rem\] {
+    min-height: 3.25rem
+}
 :where(.sui-scope).min-h-full {
     min-height: 100%
 }
 :where(.sui-scope).w-0 {
     width: 0px
 }
+:where(.sui-scope).w-1\.5 {
+    width: 0.375rem
+}
 :where(.sui-scope).w-16 {
     width: 4rem
 }
@@ -554,9 +644,15 @@
 :where(.sui-scope).w-8 {
     width: 2rem
 }
+:where(.sui-scope).w-\[17\.5rem\] {
+    width: 17.5rem
+}
 :where(.sui-scope).w-\[3\.25rem\] {
     width: 3.25rem
 }
+:where(.sui-scope).w-\[calc\(100\%\+2\.5rem\)\] {
+    width: calc(100% + 2.5rem)
+}
 :where(.sui-scope).w-\[calc\(100\%-3rem\)\] {
     width: calc(100% - 3rem)
 }
@@ -602,6 +698,9 @@
 :where(.sui-scope).min-w-max {
     min-width: max-content
 }
+:where(.sui-scope).max-w-10 {
+    max-width: 2.5rem
+}
 :where(.sui-scope).max-w-\[min\(16rem\2c var\(--available-width\)\)\] {
     max-width: min(16rem, var(--available-width))
 }
@@ -623,6 +722,9 @@
 :where(.sui-scope).max-w-lg {
     max-width: 32rem
 }
+:where(.sui-scope).max-w-xl {
+    max-width: 36rem
+}
 :where(.sui-scope).max-w-xs {
     max-width: 20rem
 }
@@ -638,9 +740,20 @@
 :where(.sui-scope).grow {
     flex-grow: 1
 }
+:where(.sui-scope).table-fixed {
+    table-layout: fixed
+}
 :where(.sui-scope).border-collapse {
     border-collapse: collapse
 }
+:where(.sui-scope).border-separate {
+    border-collapse: separate
+}
+:where(.sui-scope).border-spacing-0 {
+    --tw-border-spacing-x: 0px;
+    --tw-border-spacing-y: 0px;
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
+}
 :where(.sui-scope).origin-bottom {
     transform-origin: bottom
 }
@@ -651,6 +764,18 @@
     --tw-translate-y: -50%;
     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).rotate-0 {
+    --tw-rotate: 0deg;
+    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).rotate-180 {
+    --tw-rotate: 180deg;
+    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).rotate-90 {
+    --tw-rotate: 90deg;
+    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).transform {
     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))
 }
@@ -705,6 +830,18 @@
 :where(.sui-scope).list-disc {
     list-style-type: disc
 }
+:where(.sui-scope).list-none {
+    list-style-type: none
+}
+: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-\[repeat\(auto-fit\2c minmax\(min\(100\%\2c 14rem\)\2c 1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%, 14rem),1fr))
+}
 :where(.sui-scope).flex-col {
     flex-direction: column
 }
@@ -756,6 +893,18 @@
 :where(.sui-scope).gap-4 {
     gap: 1rem
 }
+:where(.sui-scope).gap-x-2 {
+    column-gap: 0.5rem
+}
+:where(.sui-scope).gap-x-4 {
+    column-gap: 1rem
+}
+:where(.sui-scope).gap-y-1 {
+    row-gap: 0.25rem
+}
+:where(.sui-scope).gap-y-3 {
+    row-gap: 0.75rem
+}
 :where(.sui-scope).space-y-1 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -769,6 +918,9 @@
 :where(.sui-scope).self-start {
     align-self: flex-start
 }
+:where(.sui-scope).self-stretch {
+    align-self: stretch
+}
 :where(.sui-scope).overflow-auto {
     overflow: auto
 }
@@ -798,6 +950,9 @@
 :where(.sui-scope).whitespace-nowrap {
     white-space: nowrap
 }
+:where(.sui-scope).break-all {
+    word-break: break-all
+}
 :where(.sui-scope).rounded {
     border-radius: 0.25rem
 }
@@ -916,6 +1071,10 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-ink-muted) / var(--tw-bg-opacity, 1))
 }
+:where(.sui-scope).bg-sherick-media {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-media) / var(--tw-bg-opacity, 1))
+}
 :where(.sui-scope).bg-sherick-primary-strong {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-primary-strong) / var(--tw-bg-opacity, 1))
@@ -949,6 +1108,9 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-surface-high) / var(--tw-bg-opacity, 1))
 }
+:where(.sui-scope).bg-sherick-surface-high\/\[0\.35\] {
+    background-color: oklch(var(--sui-surface-high) / 0.35)
+}
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.56\] {
     background-color: oklch(var(--sui-surface-high) / 0.56)
 }
@@ -998,9 +1160,24 @@
 :where(.sui-scope).bg-clip-padding {
     background-clip: padding-box
 }
+:where(.sui-scope).object-contain {
+    object-fit: contain
+}
 :where(.sui-scope).object-cover {
     object-fit: cover
 }
+:where(.sui-scope).object-bottom {
+    object-position: bottom
+}
+:where(.sui-scope).object-center {
+    object-position: center
+}
+:where(.sui-scope).object-top {
+    object-position: top
+}
+:where(.sui-scope).p-0 {
+    padding: 0px
+}
 :where(.sui-scope).p-1 {
     padding: 0.25rem
 }
@@ -1013,6 +1190,9 @@
 :where(.sui-scope).p-2\.5 {
     padding: 0.625rem
 }
+:where(.sui-scope).p-3 {
+    padding: 0.75rem
+}
 :where(.sui-scope).p-4 {
     padding: 1rem
 }
@@ -1022,10 +1202,18 @@
 :where(.sui-scope).p-6 {
     padding: 1.5rem
 }
+:where(.sui-scope).px-0 {
+    padding-left: 0px;
+    padding-right: 0px
+}
 :where(.sui-scope).px-1\.5 {
     padding-left: 0.375rem;
     padding-right: 0.375rem
 }
+:where(.sui-scope).px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem
+}
 :where(.sui-scope).px-2\.5 {
     padding-left: 0.625rem;
     padding-right: 0.625rem
@@ -1054,6 +1242,10 @@
     padding-left: 2rem;
     padding-right: 2rem
 }
+:where(.sui-scope).px-\[3\.25rem\] {
+    padding-left: 3.25rem;
+    padding-right: 3.25rem
+}
 :where(.sui-scope).py-0\.5 {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem
@@ -1103,21 +1295,42 @@
 :where(.sui-scope).pe-16 {
     padding-inline-end: 4rem
 }
+:where(.sui-scope).pe-2 {
+    padding-inline-end: 0.5rem
+}
 :where(.sui-scope).pe-3 {
     padding-inline-end: 0.75rem
 }
+:where(.sui-scope).ps-11 {
+    padding-inline-start: 2.75rem
+}
+:where(.sui-scope).ps-14 {
+    padding-inline-start: 3.5rem
+}
+:where(.sui-scope).ps-2 {
+    padding-inline-start: 0.5rem
+}
+:where(.sui-scope).ps-3 {
+    padding-inline-start: 0.75rem
+}
 :where(.sui-scope).ps-5 {
     padding-inline-start: 1.25rem
 }
 :where(.sui-scope).ps-6 {
     padding-inline-start: 1.5rem
 }
+:where(.sui-scope).ps-8 {
+    padding-inline-start: 2rem
+}
 :where(.sui-scope).pt-1 {
     padding-top: 0.25rem
 }
 :where(.sui-scope).pt-2 {
     padding-top: 0.5rem
 }
+:where(.sui-scope).pt-3 {
+    padding-top: 0.75rem
+}
 :where(.sui-scope).pt-4 {
     padding-top: 1rem
 }
@@ -1133,6 +1346,9 @@
 :where(.sui-scope).text-start {
     text-align: start
 }
+:where(.sui-scope).align-top {
+    vertical-align: top
+}
 :where(.sui-scope).align-middle {
     vertical-align: middle
 }
@@ -1156,6 +1372,10 @@
 :where(.sui-scope).text-\[11px\] {
     font-size: 11px
 }
+:where(.sui-scope).text-base {
+    font-size: 1rem;
+    line-height: 1.5rem
+}
 :where(.sui-scope).text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem
@@ -1265,6 +1485,9 @@
 :where(.sui-scope).underline {
     text-decoration-line: underline
 }
+:where(.sui-scope).no-underline {
+    text-decoration-line: none
+}
 :where(.sui-scope).decoration-sherick-primary\/\[0\.35\] {
     text-decoration-color: oklch(var(--sui-primary) / 0.35)
 }
@@ -1307,6 +1530,11 @@
     --tw-shadow-colored: var(--sui-elevation-recessed);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
+:where(.sui-scope).shadow-sherick-recessed-top {
+    --tw-shadow: var(--sui-elevation-recessed-top);
+    --tw-shadow-colored: var(--sui-elevation-recessed-top);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
 :where(.sui-scope).shadow-sherick-well {
     --tw-shadow: var(--sui-elevation-well);
     --tw-shadow-colored: var(--sui-elevation-well);
@@ -1520,6 +1748,12 @@
 :where(.sui-scope).\[--sui-toast-stack-sign\:1\] {
     --sui-toast-stack-sign: 1
 }
+:where(.sui-scope).\[contain-intrinsic-inline-size\:14rem\] {
+    contain-intrinsic-inline-size: 14rem
+}
+:where(.sui-scope).\[container-type\:inline-size\] {
+    container-type: inline-size
+}
 :where(.sui-scope).\[overflow-wrap\:anywhere\] {
     overflow-wrap: anywhere
 }
@@ -1558,6 +1792,16 @@
     content: var(--tw-content);
     inset: 0px
 }
+:where(.sui-scope).before\:inset-x-0\.5::before {
+    content: var(--tw-content);
+    left: 0.125rem;
+    right: 0.125rem
+}
+:where(.sui-scope).before\:inset-y-1\.5::before {
+    content: var(--tw-content);
+    top: 0.375rem;
+    bottom: 0.375rem
+}
 :where(.sui-scope).before\:rounded-\[inherit\]::before {
     content: var(--tw-content);
     border-radius: inherit
@@ -1604,15 +1848,18 @@
     --tw-content: '';
     content: var(--tw-content)
 }
+:where(.sui-scope).first\:start-1:first-child {
+    inset-inline-start: 0.25rem
+}
 :where(.sui-scope).first\:mt-0:first-child {
     margin-top: 0px
 }
+:where(.sui-scope).last\:end-1:last-child {
+    inset-inline-end: 0.25rem
+}
 :where(.sui-scope).last\:border-b-0:last-child {
     border-bottom-width: 0px
 }
-:where(.sui-scope).focus-within\:bg-sherick-surface-high\/\[0\.9\]:focus-within {
-    background-color: oklch(var(--sui-surface-high) / 0.9)
-}
 :where(.sui-scope).hover\:bg-sherick-danger\/\[0\.10\]:hover {
     background-color: oklch(var(--sui-danger) / 0.10)
 }
@@ -1845,15 +2092,27 @@
 :where(.sui-scope).data-\[starting-style\]\:opacity-0[data-starting-style] {
     opacity: 0
 }
+:where(.sui-scope).data-\[dragging\]\:outline[data-dragging] {
+    outline-style: solid
+}
 :where(.sui-scope).data-\[popup-open\]\:outline[data-popup-open] {
     outline-style: solid
 }
+:where(.sui-scope).data-\[dragging\]\:outline-2[data-dragging] {
+    outline-width: 2px
+}
 :where(.sui-scope).data-\[popup-open\]\:outline-2[data-popup-open] {
     outline-width: 2px
 }
+:where(.sui-scope).data-\[dragging\]\:outline-offset-\[3px\][data-dragging] {
+    outline-offset: 3px
+}
 :where(.sui-scope).data-\[popup-open\]\:outline-offset-\[3px\][data-popup-open] {
     outline-offset: 3px
 }
+:where(.sui-scope).data-\[dragging\]\:outline-sherick-focus[data-dragging] {
+    outline-color: oklch(var(--sui-focus) / 1)
+}
 :where(.sui-scope).data-\[popup-open\]\:outline-sherick-focus[data-popup-open] {
     outline-color: oklch(var(--sui-focus) / 1)
 }
@@ -1938,9 +2197,6 @@
     content: var(--tw-content);
     opacity: 0.05
 }
-:where(.sui-scope).data-\[invalid\]\:focus-within\:bg-sherick-danger\/\[0\.13\]:focus-within[data-invalid] {
-    background-color: oklch(var(--sui-danger) / 0.13)
-}
 :where(.sui-scope).data-\[invalid\]\:hover\:bg-sherick-danger\/\[0\.10\]:hover[data-invalid] {
     background-color: oklch(var(--sui-danger) / 0.10)
 }
@@ -2069,6 +2325,10 @@
         padding-inline-start: 1.75rem
     }
 }
+:where(.sui-scope).rtl\:-scale-x-100:where([dir="rtl"], [dir="rtl"] *) {
+    --tw-scale-x: -1;
+    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).rtl\:flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
     flex-direction: row-reverse
 }
@@ -2076,9 +2336,18 @@
     --tw-translate-x: -1.25rem;
     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).\[\&\&\]\: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).\[\&\&\]\: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).\[\&\:has\(\+div\:not\(\[data-open\]\)\:hover\)\]\:opacity-0:has(+div:not([data-open]):hover) {
     opacity: 0
 }
+:where(.sui-scope).\[\&\:not\(\:first-child\)\]\:pt-1:not(:first-child) {
+    padding-top: 0.25rem
+}
 :where(.sui-scope).\[\&\:not\(\[data-disabled\]\)\:not\(\:disabled\)\]\:hover\:text-sherick-ink:hover:not([data-disabled]):not(:disabled) {
     --tw-text-opacity: 1;
     color: oklch(var(--sui-ink) / var(--tw-text-opacity, 1))
@@ -2126,9 +2395,65 @@
     width: 1.25rem;
     height: 1.25rem
 }
+:where(.sui-scope).\[\&\>svg\]\:size-7>svg {
+    width: 1.75rem;
+    height: 1.75rem
+}
 :where(.sui-scope).\[\&\[data-ending-style\]\:not\(\[data-swipe-direction\]\)\]\:\[transform\:translateY\(var\(--sui-toast-from-y\2c 150\%\)\)\][data-ending-style]:not([data-swipe-direction]) {
     transform: translateY(var(--sui-toast-from-y,150%))
 }
+:focus-visible>:where(.sui-scope).\[\:focus-visible\>\&\]\:ring-2 {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+:focus-visible>:where(.sui-scope).\[\:focus-visible\>\&\]\:ring-inset {
+    --tw-ring-inset: inset
+}
+:focus-visible>:where(.sui-scope).\[\:focus-visible\>\&\]\:ring-sherick-focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: oklch(var(--sui-focus) / var(--tw-ring-opacity, 1))
+}
+@container(min-width:32rem) {
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:col-span-2 {
+        grid-column: span 2 / span 2
+    }
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:flex {
+        display: flex
+    }
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:hidden {
+        display: none
+    }
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:h-1\.5 {
+        height: 0.375rem
+    }
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:w-full {
+        width: 100%
+    }
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:grid-cols-1 {
+        grid-template-columns: repeat(1, minmax(0, 1fr))
+    }
+    :where(.sui-scope).\[\@container\(min-width\:32rem\)\]\:flex-row {
+        flex-direction: row
+    }
+}
+@container(min-width:64rem) {
+    :where(.sui-scope).\[\@container\(min-width\:64rem\)\]\:col-span-2 {
+        grid-column: span 2 / span 2
+    }
+    :where(.sui-scope).\[\@container\(min-width\:64rem\)\]\:h-1\.5 {
+        height: 0.375rem
+    }
+    :where(.sui-scope).\[\@container\(min-width\:64rem\)\]\:w-full {
+        width: 100%
+    }
+    :where(.sui-scope).\[\@container\(min-width\:64rem\)\]\:grid-cols-1 {
+        grid-template-columns: repeat(1, minmax(0, 1fr))
+    }
+    :where(.sui-scope).\[\@container\(min-width\:64rem\)\]\:flex-row {
+        flex-direction: row
+    }
+}
 [dir=rtl] :where(.sui-scope).\[\[dir\=rtl\]_\&\]\:\[--sui-indeterminate-direction\:-1\] {
     --sui-indeterminate-direction: -1
 }
@@ -2150,15 +2475,16 @@ div:not([data-open]):hover+:where(.sui-scope).\[div\:not\(\[data-open\]\)\:hover
     border: 1px solid CanvasText;
   }
 
-  /* A control whose selection is carried by tone or depth alone needs a boundary once forced
-     colors flattens both: a checked switch, checkbox or radio, the selected tab, and a pressed
-     toggle button — a chip or a segment. */
+  /* Selection carried by tone or depth alone needs a boundary once forced colors flattens
+     both. Calendar days and tree rows keep that boundary on the selected target, not its group. */
   :where(.sui-scope)[role="switch"][aria-checked="true"]:not(:focus-visible),
   :where(.sui-scope)[role="tab"][aria-selected="true"]:not(:focus-visible),
   :where(.sui-scope)[role="checkbox"][aria-checked="true"]:not(:focus-visible),
   :where(.sui-scope)[role="checkbox"][aria-checked="mixed"]:not(:focus-visible),
   :where(.sui-scope)[role="radio"][aria-checked="true"]:not(:focus-visible),
-  :where(.sui-scope)[aria-pressed="true"]:not(:focus-visible) {
+  :where(.sui-scope)[aria-pressed="true"]:not(:focus-visible),
+  :where(.sui-scope)[role="gridcell"][aria-selected="true"] > :where(.sui-scope)[data-day]:not(:focus-visible),
+  :where(.sui-scope)[data-sui-tree-value][aria-selected="true"]:not(:focus-visible) > :where(.sui-scope):first-child {
     outline: 1px solid Highlight;
     outline-offset: -2px;
   }
@@ -2194,4 +2520,20 @@ div:not([data-open]):hover+:where(.sui-scope).\[div\:not\(\[data-open\]\)\:hover
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
+
+  /* A tree's focus owner contains its descendants. Match parentFocusRingInset: only the
+     direct row gets the boundary, and focus takes precedence over its selection outline.
+     Also remove inactive options' transparent utility outlines, which forced colors makes
+     opaque: only the active descendant should acquire a keyboard-target boundary. */
+  :where(.sui-scope)[data-sui-tree-value],
+  :where(.sui-scope)[role="option"]:not([data-highlighted]):not(:focus-visible) {
+    outline: none;
+  }
+  :where(.sui-scope)[data-sui-tree-value]:focus-visible > :where(.sui-scope):first-child,
+  /* Autocomplete keeps focus in its input; the highlighted option is still Enter's target,
+     including a disabled-but-navigable option. Do not gate this on availability. */
+  :where(.sui-scope)[role="option"][data-highlighted]:not(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
 }