sherick-ui 2.6.0 → 2.7.0

package/dist/styles.css

@@ -3,213 +3,216 @@
   :root,
   [data-sherick-theme="light"] {
     color-scheme: light;
-  --sui-canvas: 0.965 0.008 255;
-  --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;
-  --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;
-  --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;
-  --sui-success: 0.381 0.086 160;
-  --sui-on-primary: 0.985 0.005 255;
-  --sui-on-danger: 0.985 0.005 255;
-  --sui-on-warning: 0.985 0.005 255;
-  --sui-on-success: 0.985 0.005 255;
-  --sui-focus: 0.422 0.139 255;
-  --sui-outline: 0.50 0.018 260;
-  --sui-scrim: 0.16 0.01 260;
-  --sui-edge: 0.42 0.02 258;
+  --sui-canvas: 0.970 0.003 290;
+  --sui-surface: 0.998 0.001 290;
+  --sui-surface-high: 0.934 0.006 290;
+  --sui-surface-float: 0.999 0.001 290;
+  --sui-puck: 1 0 0;
+  --sui-media: 0.200 0.008 285;
+  --sui-ink: 0.200 0.012 285;
+  --sui-ink-muted: 0.480 0.014 285;
+  --sui-detail: 0.590 0.012 285;
+  --sui-rim: 0.625 0.012 285;
+  --sui-primary: 0.490 0.205 292;
+  --sui-primary-strong: 0.430 0.200 292;
+  --sui-primary-soft: 0.952 0.024 292;
+  --sui-primary-selected: 0.905 0.052 292;
+  --sui-danger-soft: 0.952 0.020 30;
+  --sui-danger-selected: 0.900 0.042 30;
+  --sui-warning-soft: 0.955 0.032 82;
+  --sui-warning-selected: 0.905 0.058 80;
+  --sui-success-soft: 0.952 0.024 165;
+  --sui-success-selected: 0.900 0.046 165;
+  --sui-accent: 0.62 0.12 230;
+  --sui-danger: 0.465 0.180 27;
+  --sui-warning: 0.398 0.086 68;
+  --sui-success: 0.390 0.088 158;
+  --sui-on-primary: 0.990 0.003 290;
+  --sui-on-danger: 0.990 0.003 290;
+  --sui-on-warning: 0.990 0.003 290;
+  --sui-on-success: 0.990 0.003 290;
+  --sui-focus: 0.490 0.205 292;
+  --sui-outline: 0.500 0.012 285;
+  --sui-scrim: 0.200 0.006 285;
+  --sui-edge: 0.400 0.012 285;
   --sui-light-top: 1 0 0;
-  --sui-light-bottom: 0.32 0.02 256;
+  --sui-light-bottom: 0.280 0.025 290;
   --sui-elevation-flat: none;
-  --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 2px 4px oklch(var(--sui-light-bottom) / 0.40), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
+  --sui-elevation-raised: 0 1px 1px oklch(var(--sui-light-bottom) / 0.10), 0 2px 5px -1px oklch(var(--sui-light-bottom) / 0.12), inset 0 1px 0 oklch(var(--sui-light-top) / 0.24);
+  --sui-elevation-floating: 0 0 0 1px oklch(var(--sui-light-bottom) / 0.07), 0 4px 10px -2px oklch(var(--sui-light-bottom) / 0.08), 0 22px 48px -10px oklch(var(--sui-light-bottom) / 0.24), inset 0 1px 0 oklch(var(--sui-light-top) / 0.80);
+  --sui-elevation-control: 0 0 0 0.5px oklch(var(--sui-light-bottom) / 0.10), 0 1px 3px oklch(var(--sui-light-bottom) / 0.16), inset 0 1px 0 oklch(var(--sui-light-top) / 0.70);
+  --sui-elevation-recessed: inset 0 1px 2px oklch(var(--sui-light-bottom) / 0.18), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.55);
+  --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.18);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.34), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.55);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 28px;
-  --sui-glass-saturation: 1.06;
-  --sui-glass-brightness: 1.012;
+  --sui-glass-saturation: 1.10;
+  --sui-glass-brightness: 1.015;
   --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 22px;
-  --sui-glass-dense-saturation: 1.05;
-  --sui-glass-dense-brightness: 1.008;
-  --sui-glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.76) 0%, rgb(255 255 255 / 0.30) 30%, rgb(112 156 224 / 0.05) 70%, rgb(38 46 62 / 0.05) 100%);
-  --sui-glass-gradient-dense: linear-gradient(180deg, rgb(255 255 255 / 0.68) 0%, rgb(255 255 255 / 0.24) 36%, rgb(112 156 224 / 0.04) 76%, rgb(38 46 62 / 0.045) 100%);
+  --sui-glass-dense-saturation: 1.08;
+  --sui-glass-dense-brightness: 1.01;
+  --sui-glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.80) 0%, rgb(255 255 255 / 0.28) 26%, rgb(255 255 255 / 0) 62%, rgb(40 36 60 / 0.04) 100%);
+  --sui-glass-gradient-dense: linear-gradient(180deg, rgb(255 255 255 / 0.70) 0%, rgb(255 255 255 / 0.22) 34%, rgb(255 255 255 / 0) 72%, rgb(40 36 60 / 0.04) 100%);
   --sui-glass-hero-blur: 14px;
   --sui-glass-hero-saturation: 1.06;
   --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-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.50) 0%, rgb(255 255 255 / 0.12) 14%, rgb(255 255 255 / 0) 46%, rgb(40 36 60 / 0.035) 100%);
+  --sui-surface-overlay: 0.995 0.002 290;
   --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);
-  --sui-code-string: oklch(0.48 0.11 235);
-  --sui-code-number: oklch(0.52 0.14 55);
-  --sui-code-keyword: oklch(0.50 0.15 305);
-  --sui-code-function: oklch(0.50 0.15 25);
-  --sui-code-tag: oklch(0.48 0.12 220);
+  --sui-scrim-blur: 8px;
+  --sui-code-text: oklch(0.27 0.012 285);
+  --sui-code-comment: oklch(0.52 0.012 285);
+  --sui-code-string: oklch(0.47 0.10 158);
+  --sui-code-number: oklch(0.51 0.13 55);
+  --sui-code-keyword: oklch(0.47 0.19 300);
+  --sui-code-function: oklch(0.49 0.16 27);
+  --sui-code-tag: oklch(0.46 0.15 260);
   }
 
   [data-sherick-theme="dark"] {
     color-scheme: dark;
-  --sui-canvas: 0.205 0.012 260;
-  --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;
-  --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;
-  --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-canvas: 0.160 0.006 285;
+  --sui-surface: 0.200 0.008 285;
+  --sui-surface-high: 0.252 0.010 285;
+  --sui-surface-float: 0.226 0.009 285;
+  --sui-puck: 0.315 0.012 285;
+  --sui-media: 0.160 0.006 285;
+  --sui-ink: 0.950 0.004 285;
+  --sui-ink-muted: 0.745 0.010 285;
+  --sui-detail: 0.605 0.010 285;
+  --sui-rim: 0.535 0.010 285;
+  --sui-primary: 0.780 0.125 292;
+  --sui-primary-strong: 0.720 0.160 292;
+  --sui-primary-soft: 0.300 0.075 292;
+  --sui-primary-selected: 0.375 0.105 292;
+  --sui-danger-soft: 0.290 0.060 25;
+  --sui-danger-selected: 0.360 0.085 25;
+  --sui-warning-soft: 0.300 0.050 75;
+  --sui-warning-selected: 0.370 0.070 75;
+  --sui-success-soft: 0.290 0.050 160;
+  --sui-success-selected: 0.360 0.070 160;
   --sui-accent: 0.80 0.08 215;
-  --sui-danger: 0.799 0.115 25;
-  --sui-warning: 0.82 0.12 80;
-  --sui-success: 0.769 0.100 160;
-  --sui-on-primary: 0.205 0.012 260;
-  --sui-on-danger: 0.205 0.012 260;
-  --sui-on-warning: 0.205 0.012 260;
-  --sui-on-success: 0.205 0.012 260;
-  --sui-focus: 0.809 0.098 255;
-  --sui-outline: 0.76 0.014 255;
-  --sui-scrim: 0.08 0.01 260;
-  --sui-edge: 0.92 0.01 256;
+  --sui-danger: 0.775 0.130 25;
+  --sui-warning: 0.830 0.120 80;
+  --sui-success: 0.780 0.120 158;
+  --sui-on-primary: 0.160 0.006 285;
+  --sui-on-danger: 0.160 0.006 285;
+  --sui-on-warning: 0.160 0.006 285;
+  --sui-on-success: 0.160 0.006 285;
+  --sui-focus: 0.780 0.125 292;
+  --sui-outline: 0.745 0.010 285;
+  --sui-scrim: 0.060 0.006 285;
+  --sui-edge: 0.930 0.006 285;
   --sui-light-top: 1 0 0;
-  --sui-light-bottom: 0.12 0.012 260;
+  --sui-light-bottom: 0.070 0.008 285;
   --sui-elevation-flat: none;
-  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.26), 0 4px 12px oklch(var(--sui-light-bottom) / 0.15);
-  --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 2px 4px oklch(var(--sui-light-bottom) / 0.60), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
+  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.40), 0 3px 8px -2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
+  --sui-elevation-floating: 0 0 0 1px oklch(var(--sui-light-top) / 0.08), 0 6px 14px -4px oklch(var(--sui-light-bottom) / 0.40), 0 26px 56px -12px oklch(var(--sui-light-bottom) / 0.65), inset 0 1px 0 oklch(var(--sui-light-top) / 0.06);
+  --sui-elevation-control: 0 0 0 0.5px oklch(var(--sui-light-bottom) / 0.40), 0 1px 3px oklch(var(--sui-light-bottom) / 0.45), inset 0 1px 0 oklch(var(--sui-light-top) / 0.09);
+  --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.42), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.05);
+  --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.40);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.62), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.05);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
-  --sui-glass-saturation: 1.10;
+  --sui-glass-saturation: 1.12;
   --sui-glass-brightness: 1.01;
   --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 26px;
-  --sui-glass-dense-saturation: 1.08;
+  --sui-glass-dense-saturation: 1.10;
   --sui-glass-dense-brightness: 1.01;
-  --sui-glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.075) 0%, rgb(255 255 255 / 0.028) 30%, rgb(112 156 255 / 0.02) 70%, rgb(0 0 0 / 0.10) 100%);
-  --sui-glass-gradient-dense: linear-gradient(180deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.018) 36%, rgb(112 156 255 / 0.016) 76%, rgb(0 0 0 / 0.08) 100%);
+  --sui-glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0.025) 30%, rgb(255 255 255 / 0) 70%, rgb(0 0 0 / 0.10) 100%);
+  --sui-glass-gradient-dense: linear-gradient(180deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.018) 36%, rgb(255 255 255 / 0) 76%, rgb(0 0 0 / 0.08) 100%);
   --sui-glass-hero-blur: 10px;
   --sui-glass-hero-saturation: 1.03;
   --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-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.035) 0%, rgb(255 255 255 / 0.01) 12%, rgb(255 255 255 / 0) 44%, rgb(0 0 0 / 0.16) 100%);
+  --sui-surface-overlay: 0.214 0.008 285;
   --sui-overlay-fill: 0.99;
-  --sui-scrim-blur: 6px;
-  --sui-code-text: #e2e8f0;
-  --sui-code-comment: #7a8aa3;
-  --sui-code-string: #a5d6ff;
-  --sui-code-number: #f97316;
-  --sui-code-keyword: #c084fc;
-  --sui-code-function: #ff7b72;
-  --sui-code-tag: #7dd3fc;
+  --sui-scrim-blur: 8px;
+  --sui-code-text: #dfdee6;
+  --sui-code-comment: #928f9e;
+  --sui-code-string: #7dd3a3;
+  --sui-code-number: #f3ad66;
+  --sui-code-keyword: #c8a8ff;
+  --sui-code-function: #fb9989;
+  --sui-code-tag: #8cc3fc;
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not([data-sherick-theme]) {
       color-scheme: dark;
-  --sui-canvas: 0.205 0.012 260;
-  --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;
-  --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;
-  --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-canvas: 0.160 0.006 285;
+  --sui-surface: 0.200 0.008 285;
+  --sui-surface-high: 0.252 0.010 285;
+  --sui-surface-float: 0.226 0.009 285;
+  --sui-puck: 0.315 0.012 285;
+  --sui-media: 0.160 0.006 285;
+  --sui-ink: 0.950 0.004 285;
+  --sui-ink-muted: 0.745 0.010 285;
+  --sui-detail: 0.605 0.010 285;
+  --sui-rim: 0.535 0.010 285;
+  --sui-primary: 0.780 0.125 292;
+  --sui-primary-strong: 0.720 0.160 292;
+  --sui-primary-soft: 0.300 0.075 292;
+  --sui-primary-selected: 0.375 0.105 292;
+  --sui-danger-soft: 0.290 0.060 25;
+  --sui-danger-selected: 0.360 0.085 25;
+  --sui-warning-soft: 0.300 0.050 75;
+  --sui-warning-selected: 0.370 0.070 75;
+  --sui-success-soft: 0.290 0.050 160;
+  --sui-success-selected: 0.360 0.070 160;
   --sui-accent: 0.80 0.08 215;
-  --sui-danger: 0.799 0.115 25;
-  --sui-warning: 0.82 0.12 80;
-  --sui-success: 0.769 0.100 160;
-  --sui-on-primary: 0.205 0.012 260;
-  --sui-on-danger: 0.205 0.012 260;
-  --sui-on-warning: 0.205 0.012 260;
-  --sui-on-success: 0.205 0.012 260;
-  --sui-focus: 0.809 0.098 255;
-  --sui-outline: 0.76 0.014 255;
-  --sui-scrim: 0.08 0.01 260;
-  --sui-edge: 0.92 0.01 256;
+  --sui-danger: 0.775 0.130 25;
+  --sui-warning: 0.830 0.120 80;
+  --sui-success: 0.780 0.120 158;
+  --sui-on-primary: 0.160 0.006 285;
+  --sui-on-danger: 0.160 0.006 285;
+  --sui-on-warning: 0.160 0.006 285;
+  --sui-on-success: 0.160 0.006 285;
+  --sui-focus: 0.780 0.125 292;
+  --sui-outline: 0.745 0.010 285;
+  --sui-scrim: 0.060 0.006 285;
+  --sui-edge: 0.930 0.006 285;
   --sui-light-top: 1 0 0;
-  --sui-light-bottom: 0.12 0.012 260;
+  --sui-light-bottom: 0.070 0.008 285;
   --sui-elevation-flat: none;
-  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.26), 0 4px 12px oklch(var(--sui-light-bottom) / 0.15);
-  --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 2px 4px oklch(var(--sui-light-bottom) / 0.60), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
+  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.40), 0 3px 8px -2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
+  --sui-elevation-floating: 0 0 0 1px oklch(var(--sui-light-top) / 0.08), 0 6px 14px -4px oklch(var(--sui-light-bottom) / 0.40), 0 26px 56px -12px oklch(var(--sui-light-bottom) / 0.65), inset 0 1px 0 oklch(var(--sui-light-top) / 0.06);
+  --sui-elevation-control: 0 0 0 0.5px oklch(var(--sui-light-bottom) / 0.40), 0 1px 3px oklch(var(--sui-light-bottom) / 0.45), inset 0 1px 0 oklch(var(--sui-light-top) / 0.09);
+  --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.42), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.05);
+  --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.40);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.62), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.05);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
-  --sui-glass-saturation: 1.10;
+  --sui-glass-saturation: 1.12;
   --sui-glass-brightness: 1.01;
   --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 26px;
-  --sui-glass-dense-saturation: 1.08;
+  --sui-glass-dense-saturation: 1.10;
   --sui-glass-dense-brightness: 1.01;
-  --sui-glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.075) 0%, rgb(255 255 255 / 0.028) 30%, rgb(112 156 255 / 0.02) 70%, rgb(0 0 0 / 0.10) 100%);
-  --sui-glass-gradient-dense: linear-gradient(180deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.018) 36%, rgb(112 156 255 / 0.016) 76%, rgb(0 0 0 / 0.08) 100%);
+  --sui-glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0.025) 30%, rgb(255 255 255 / 0) 70%, rgb(0 0 0 / 0.10) 100%);
+  --sui-glass-gradient-dense: linear-gradient(180deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.018) 36%, rgb(255 255 255 / 0) 76%, rgb(0 0 0 / 0.08) 100%);
   --sui-glass-hero-blur: 10px;
   --sui-glass-hero-saturation: 1.03;
   --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-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.035) 0%, rgb(255 255 255 / 0.01) 12%, rgb(255 255 255 / 0) 44%, rgb(0 0 0 / 0.16) 100%);
+  --sui-surface-overlay: 0.214 0.008 285;
   --sui-overlay-fill: 0.99;
-  --sui-scrim-blur: 6px;
-  --sui-code-text: #e2e8f0;
-  --sui-code-comment: #7a8aa3;
-  --sui-code-string: #a5d6ff;
-  --sui-code-number: #f97316;
-  --sui-code-keyword: #c084fc;
-  --sui-code-function: #ff7b72;
-  --sui-code-tag: #7dd3fc;
+  --sui-scrim-blur: 8px;
+  --sui-code-text: #dfdee6;
+  --sui-code-comment: #928f9e;
+  --sui-code-string: #7dd3a3;
+  --sui-code-number: #f3ad66;
+  --sui-code-keyword: #c8a8ff;
+  --sui-code-function: #fb9989;
+  --sui-code-tag: #8cc3fc;
     }
   }
 
   :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-rim-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='12' 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;
@@ -745,8 +748,8 @@
 :where(.sui-scope).min-w-44 {
     min-width: 11rem
 }
-:where(.sui-scope).min-w-9 {
-    min-width: 2.25rem
+:where(.sui-scope).min-w-8 {
+    min-width: 2rem
 }
 :where(.sui-scope).min-w-\[1ch\] {
     min-width: 1ch
@@ -1037,6 +1040,9 @@
 :where(.sui-scope).rounded-\[0\.375rem\] {
     border-radius: 0.375rem
 }
+:where(.sui-scope).rounded-\[0\.5rem\] {
+    border-radius: 0.5rem
+}
 :where(.sui-scope).rounded-\[0\.75rem\] {
     border-radius: 0.75rem
 }
@@ -1046,9 +1052,6 @@
 :where(.sui-scope).rounded-\[1\.5rem\] {
     border-radius: 1.5rem
 }
-:where(.sui-scope).rounded-\[1\.75rem\] {
-    border-radius: 1.75rem
-}
 :where(.sui-scope).rounded-\[1rem\] {
     border-radius: 1rem
 }
@@ -1095,10 +1098,6 @@
 :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))
@@ -1112,16 +1111,23 @@
 :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 {
+:where(.sui-scope).border-transparent {
+    border-color: transparent
+}
+:where(.sui-scope).border-b-sherick-danger {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-rim) / var(--tw-border-opacity, 1))
+    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+}
+:where(.sui-scope).border-b-sherick-ink-muted {
+    --tw-border-opacity: 1;
+    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+}
+:where(.sui-scope).border-b-sherick-rim {
+    --tw-border-opacity: 1;
+    border-bottom-color: oklch(var(--sui-rim) / var(--tw-border-opacity, 1))
 }
 :where(.sui-scope).border-e-transparent {
     border-inline-end-color: transparent
@@ -1151,6 +1157,9 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
+:where(.sui-scope).bg-sherick-danger-soft\/\[0\.55\] {
+    background-color: oklch(var(--sui-danger-soft) / 0.55)
+}
 :where(.sui-scope).bg-sherick-detail {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-detail) / var(--tw-bg-opacity, 1))
@@ -1175,8 +1184,12 @@
     --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)
+:where(.sui-scope).bg-sherick-puck {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-puck) / var(--tw-bg-opacity, 1))
+}
+:where(.sui-scope).bg-sherick-scrim\/\[0\.30\] {
+    background-color: oklch(var(--sui-scrim) / 0.30)
 }
 :where(.sui-scope).bg-sherick-success {
     --tw-bg-opacity: 1;
@@ -1206,6 +1219,9 @@
 :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\.6\] {
+    background-color: oklch(var(--sui-surface-high) / 0.6)
+}
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.72\] {
     background-color: oklch(var(--sui-surface-high) / 0.72)
 }
@@ -1396,6 +1412,9 @@
 :where(.sui-scope).pe-3 {
     padding-inline-end: 0.75rem
 }
+:where(.sui-scope).pe-3\.5 {
+    padding-inline-end: 0.875rem
+}
 :where(.sui-scope).ps-11 {
     padding-inline-start: 2.75rem
 }
@@ -1524,6 +1543,9 @@
 :where(.sui-scope).leading-\[1\.375rem\] {
     line-height: 1.375rem
 }
+:where(.sui-scope).tracking-\[-0\.011em\] {
+    letter-spacing: -0.011em
+}
 :where(.sui-scope).tracking-\[-0\.01em\] {
     letter-spacing: -0.01em
 }
@@ -1911,20 +1933,23 @@
     content: var(--tw-content);
     inset: 0px
 }
-:where(.sui-scope).before\:inset-x-0\.5::before {
+:where(.sui-scope).before\:m-auto::before {
     content: var(--tw-content);
-    left: 0.125rem;
-    right: 0.125rem
+    margin: auto
 }
-:where(.sui-scope).before\:inset-y-1\.5::before {
+:where(.sui-scope).before\:size-8::before {
     content: var(--tw-content);
-    top: 0.375rem;
-    bottom: 0.375rem
+    width: 2rem;
+    height: 2rem
 }
 :where(.sui-scope).before\:rounded-\[inherit\]::before {
     content: var(--tw-content);
     border-radius: inherit
 }
+:where(.sui-scope).before\:rounded-full::before {
+    content: var(--tw-content);
+    border-radius: 9999px
+}
 :where(.sui-scope).before\:bg-current::before {
     content: var(--tw-content);
     background-color: currentColor
@@ -2039,16 +2064,19 @@
 :where(.sui-scope).last\:border-b-0:last-child {
     border-bottom-width: 0px
 }
-:where(.sui-scope).hover\:border-sherick-ink-muted:hover {
+:where(.sui-scope).hover\:border-b-sherick-ink-muted:hover {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+    border-bottom-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-danger-soft\/\[0\.55\]:hover {
+    background-color: oklch(var(--sui-danger-soft) / 0.55)
 }
 :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))
@@ -2061,13 +2089,16 @@
     --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 {
+:where(.sui-scope).focus\:border-b-sherick-ink-muted:focus {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
 }
-:where(.sui-scope).focus\:bg-sherick-canvas:focus {
+:where(.sui-scope).focus\:bg-sherick-danger-soft\/\[0\.55\]:focus {
+    background-color: oklch(var(--sui-danger-soft) / 0.55)
+}
+:where(.sui-scope).focus\:bg-sherick-surface-high:focus {
     --tw-bg-opacity: 1;
-    background-color: oklch(var(--sui-canvas) / var(--tw-bg-opacity, 1))
+    background-color: oklch(var(--sui-surface-high) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).focus\:outline-none:focus {
     outline: 2px solid transparent;
@@ -2210,9 +2241,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-selected:has([data-checked]) {
+:where(.sui-scope).has-\[\[data-checked\]\]\:bg-sherick-primary-soft:has([data-checked]) {
     --tw-bg-opacity: 1;
-    background-color: oklch(var(--sui-primary-selected) / var(--tw-bg-opacity, 1))
+    background-color: oklch(var(--sui-primary-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).has-\[\[data-sui-value-chip\]\]\:ps-2\.5:has([data-sui-value-chip]) {
     padding-inline-start: 0.625rem
@@ -2224,11 +2255,6 @@
 :where(.sui-scope).has-\[\[data-disabled\]\]\:opacity-45:has([data-disabled]) {
     opacity: 0.45
 }
-:where(.sui-scope).has-\[\[data-checked\]\]\:shadow-sherick-control:has([data-checked]) {
-    --tw-shadow: var(--sui-elevation-control);
-    --tw-shadow-colored: var(--sui-elevation-control);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
 :where(.sui-scope).has-\[\:focus-visible\]\:outline:has(:focus-visible) {
     outline-style: solid
 }
@@ -2278,14 +2304,17 @@
 :where(.sui-scope).data-\[orientation\=vertical\]\:items-stretch[data-orientation="vertical"] {
     align-items: stretch
 }
-:where(.sui-scope).data-\[invalid\]\:border-sherick-danger[data-invalid] {
+:where(.sui-scope).data-\[invalid\]\:border-b-sherick-danger[data-invalid] {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+    border-bottom-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-soft\/\[0\.55\][data-invalid] {
+    background-color: oklch(var(--sui-danger-soft) / 0.55)
+}
 :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))
@@ -2427,9 +2456,12 @@
     --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] {
+:where(.sui-scope).data-\[invalid\]\:hover\:border-b-sherick-danger:hover[data-invalid] {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+}
+:where(.sui-scope).data-\[invalid\]\:hover\:bg-sherick-danger-soft\/\[0\.55\]:hover[data-invalid] {
+    background-color: oklch(var(--sui-danger-soft) / 0.55)
 }
 :where(.sui-scope).group[data-checked] :where(.sui-scope).group-data-\[checked\]\:h-6 {
     height: 1.5rem
@@ -2636,17 +2668,20 @@
         outline-style: none
     }
 }
-:where(.sui-scope).\[\&\&\]\:focus-within\:border-sherick-ink-muted:focus-within.\[\&\&\]\:focus-within\:border-sherick-ink-muted:focus-within {
+:where(.sui-scope).\[\&\&\]\:focus-within\:border-b-sherick-ink-muted:focus-within.\[\&\&\]\:focus-within\:border-b-sherick-ink-muted:focus-within {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
+    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
 }
-:where(.sui-scope).\[\&\&\]\:focus-within\:bg-sherick-canvas:focus-within.\[\&\&\]\:focus-within\:bg-sherick-canvas:focus-within {
+:where(.sui-scope).\[\&\&\]\:focus-within\:bg-sherick-surface-high:focus-within.\[\&\&\]\:focus-within\:bg-sherick-surface-high:focus-within {
     --tw-bg-opacity: 1;
-    background-color: oklch(var(--sui-canvas) / var(--tw-bg-opacity, 1))
+    background-color: oklch(var(--sui-surface-high) / 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] {
+:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:border-b-sherick-danger:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:border-b-sherick-danger:focus-within[data-invalid] {
     --tw-border-opacity: 1;
-    border-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+}
+:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger-soft\/\[0\.55\]:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger-soft\/\[0\.55\]:focus-within[data-invalid] {
+    background-color: oklch(var(--sui-danger-soft) / 0.55)
 }
 :where(.sui-scope).\[\&\:has\(\+div\:not\(\[data-open\]\)\:hover\)\]\:opacity-0:has(+div:not([data-open]):hover) {
     opacity: 0