sherick-ui 2.2.0 → 2.3.0

package/dist/styles.css

@@ -13,7 +13,14 @@
   --sui-detail: 0.600 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,7 +36,7 @@
   --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);
@@ -73,7 +80,14 @@
   --sui-detail: 0.600 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;
@@ -134,7 +148,14 @@
   --sui-detail: 0.600 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;
@@ -184,11 +205,19 @@
   }
 
   :root {
+  --sui-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --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 +391,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;
@@ -536,6 +565,10 @@
     width: 2rem;
     height: 2rem
 }
+:where(.sui-scope).size-full {
+    width: 100%;
+    height: 100%
+}
 :where(.sui-scope).h-0 {
     height: 0px
 }
@@ -560,6 +593,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 +665,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 +818,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 +837,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 +869,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))
@@ -962,8 +995,8 @@
 :where(.sui-scope).rounded-\[0\.625rem\] {
     border-radius: 0.625rem
 }
-: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 +1007,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 +1025,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
@@ -1054,18 +1083,20 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-danger) / var(--tw-bg-opacity, 1))
 }
+: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-soft {
+    --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\.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\/\[0\.16\] {
-    background-color: oklch(var(--sui-danger) / 0.16)
-}
 :where(.sui-scope).bg-sherick-detail {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-detail) / var(--tw-bg-opacity, 1))
@@ -1078,15 +1109,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 +1128,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))
@@ -1142,11 +1177,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
@@ -1316,6 +1353,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 +1365,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 +1401,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 +1412,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 +1447,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 +1454,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 +1466,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 +1481,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
 }
@@ -1679,6 +1725,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 +1794,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 +1875,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;
@@ -1937,12 +1999,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,15 +2036,15 @@
     --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);
@@ -2009,8 +2074,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;
@@ -2142,6 +2208,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)
 }
@@ -2388,6 +2457,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 +2478,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 +2506,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

package/dist/theme.css

@@ -13,7 +13,14 @@
   --sui-detail: 0.600 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,7 +36,7 @@
   --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);
@@ -73,7 +80,14 @@
   --sui-detail: 0.600 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;
@@ -134,7 +148,14 @@
   --sui-detail: 0.600 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;
@@ -184,11 +205,19 @@
   }
 
   :root {
+  --sui-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --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);