nitro_kit 2.0.0.alpha.3 → 2.0.0.alpha.5

data/src/stylesheets/nitro_kit/components/palette.css

@@ -1,113 +1,181 @@
+/* The semantic palette shared by Badge, Alert, and Toast.
+ *
+ * Every family resolves through the public `--nk-palette-*` tint axis, which
+ * samples the color scales and is already appearance-aware, so a component
+ * never restates a hue. Semantic families default to the same steps as their
+ * hue families -- `info` renders exactly like `blue` -- and an application
+ * that rethemes a tint role moves all three components at once. `-content`
+ * carries the paired foreground; the base role carries the tinting accent.
+ *
+ * Alert and Toast are the same kind of thing — a status message — so they also
+ * share one tinted surface and border. Only the components that own a different
+ * job, such as Badge's compact label, set their own tint strength.
+ */
 @layer nitro-kit.variant {
   :where(
-      [data-nk="badge"][data-color="zinc"],
       [data-nk="badge"][data-color="neutral"],
-      [data-nk="alert"][data-variant="default"]
+      [data-nk="alert"][data-variant="default"],
+      [data-nk="toast-item"][data-variant="default"]
     ) {
-    --_nk-palette-light: oklch(37% 0.013 285.805);
-    --_nk-palette-dark: oklch(92% 0.004 286.32);
-    --_nk-palette-tint: oklch(70.5% 0.015 286.067);
+    --_nk-semantic-accent: var(--nk-palette-neutral);
+    --_nk-semantic-content: var(--nk-palette-neutral-content);
   }
 
   :where(
-      [data-nk="badge"][data-color="red"],
-      [data-nk="badge"][data-color="danger"],
-      [data-nk="alert"][data-variant="error"]
+      [data-nk="badge"][data-color="info"],
+      [data-nk="alert"][data-variant="info"],
+      [data-nk="toast-item"][data-variant="info"]
     ) {
-    --_nk-palette-light: oklch(50.5% 0.213 27.518);
-    --_nk-palette-dark: oklch(88.5% 0.062 18.334);
-    --_nk-palette-tint: oklch(70.4% 0.191 22.216);
+    --_nk-semantic-accent: var(--nk-palette-info);
+    --_nk-semantic-content: var(--nk-palette-info-content);
   }
-  :where([data-nk="badge"][data-color="orange"]) {
-    --_nk-palette-light: oklch(55.3% 0.195 38.402);
-    --_nk-palette-dark: oklch(90.1% 0.076 70.697);
-    --_nk-palette-tint: oklch(75% 0.183 55.934);
+
+  :where(
+      [data-nk="badge"][data-color="success"],
+      [data-nk="alert"][data-variant="success"],
+      [data-nk="toast-item"][data-variant="success"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-success);
+    --_nk-semantic-content: var(--nk-palette-success-content);
   }
+
   :where(
-      [data-nk="badge"][data-color="amber"],
       [data-nk="badge"][data-color="warning"],
-      [data-nk="alert"][data-variant="warning"]
+      [data-nk="alert"][data-variant="warning"],
+      [data-nk="toast-item"][data-variant="warning"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-warning);
+    --_nk-semantic-content: var(--nk-palette-warning-content);
+  }
+
+  /* Action components and Alert say `destructive`; Toast announces `error`.
+     Both spellings resolve to the destructive family, and this is the only
+     place they meet. */
+  :where(
+      [data-nk="badge"][data-color="destructive"],
+      [data-nk="alert"][data-variant="destructive"],
+      [data-nk="toast-item"][data-variant="error"]
     ) {
-    --_nk-palette-light: oklch(55% 0.163 48.998);
-    --_nk-palette-dark: oklch(92.4% 0.12 95.746);
-    --_nk-palette-tint: oklch(82.8% 0.189 84.429);
+    --_nk-semantic-accent: var(--nk-palette-destructive);
+    --_nk-semantic-content: var(--nk-palette-destructive-content);
+  }
+
+  /* The shared status treatment. Defined once so Alert and Toast cannot drift
+     apart again, and so a third status component inherits it by opting in. */
+  :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 12%;
+    --_nk-semantic-surface: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) var(--_nk-semantic-tint),
+      var(--nk-color-surface)
+    );
+    --_nk-semantic-border: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) 45%,
+      transparent
+    );
+  }
+
+  /* Dark appearances need a stronger tint to separate the surface from the
+     page behind it. */
+  :where([data-theme="dark"])
+    :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 20%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(:root:not([data-theme]))
+      :where([data-nk="alert"], [data-nk="toast-item"]) {
+      --_nk-semantic-tint: 20%;
+    }
+  }
+
+  /* The decorative hues. These name a color rather than a meaning, so they
+     follow `--nk-palette-*` and stay put when an application rethemes its
+     semantic families. `red` and `destructive` are deliberately different: one is
+     a color, the other is whatever destructive currently means. */
+  :where([data-nk="badge"][data-color="red"]) {
+    --_nk-semantic-accent: var(--nk-palette-red);
+    --_nk-semantic-content: var(--nk-palette-red-content);
+  }
+
+  :where([data-nk="badge"][data-color="orange"]) {
+    --_nk-semantic-accent: var(--nk-palette-orange);
+    --_nk-semantic-content: var(--nk-palette-orange-content);
   }
+
+  :where([data-nk="badge"][data-color="amber"]) {
+    --_nk-semantic-accent: var(--nk-palette-amber);
+    --_nk-semantic-content: var(--nk-palette-amber-content);
+  }
+
   :where([data-nk="badge"][data-color="yellow"]) {
-    --_nk-palette-light: oklch(47.6% 0.114 61.907);
-    --_nk-palette-dark: oklch(94.5% 0.129 101.54);
-    --_nk-palette-tint: oklch(85.2% 0.199 91.936);
+    --_nk-semantic-accent: var(--nk-palette-yellow);
+    --_nk-semantic-content: var(--nk-palette-yellow-content);
   }
+
   :where([data-nk="badge"][data-color="lime"]) {
-    --_nk-palette-light: oklch(45.3% 0.124 130.933);
-    --_nk-palette-dark: oklch(93.8% 0.127 124.321);
-    --_nk-palette-tint: oklch(84.1% 0.238 128.85);
+    --_nk-semantic-accent: var(--nk-palette-lime);
+    --_nk-semantic-content: var(--nk-palette-lime-content);
   }
-  :where(
-      [data-nk="badge"][data-color="green"],
-      [data-nk="badge"][data-color="success"],
-      [data-nk="alert"][data-variant="success"]
-    ) {
-    --_nk-palette-light: oklch(44.8% 0.119 151.328);
-    --_nk-palette-dark: oklch(92.5% 0.084 155.995);
-    --_nk-palette-tint: oklch(79.2% 0.209 151.711);
+
+  :where([data-nk="badge"][data-color="green"]) {
+    --_nk-semantic-accent: var(--nk-palette-green);
+    --_nk-semantic-content: var(--nk-palette-green-content);
   }
+
   :where([data-nk="badge"][data-color="emerald"]) {
-    --_nk-palette-light: oklch(43.2% 0.095 166.913);
-    --_nk-palette-dark: oklch(90.5% 0.093 164.15);
-    --_nk-palette-tint: oklch(76.5% 0.177 163.223);
+    --_nk-semantic-accent: var(--nk-palette-emerald);
+    --_nk-semantic-content: var(--nk-palette-emerald-content);
   }
+
   :where([data-nk="badge"][data-color="teal"]) {
-    --_nk-palette-light: oklch(43.7% 0.078 188.216);
-    --_nk-palette-dark: oklch(91% 0.096 180.426);
-    --_nk-palette-tint: oklch(77.7% 0.152 181.912);
+    --_nk-semantic-accent: var(--nk-palette-teal);
+    --_nk-semantic-content: var(--nk-palette-teal-content);
   }
+
   :where([data-nk="badge"][data-color="cyan"]) {
-    --_nk-palette-light: oklch(45% 0.085 224.283);
-    --_nk-palette-dark: oklch(91.7% 0.08 205.041);
-    --_nk-palette-tint: oklch(78.9% 0.154 211.53);
+    --_nk-semantic-accent: var(--nk-palette-cyan);
+    --_nk-semantic-content: var(--nk-palette-cyan-content);
   }
+
   :where([data-nk="badge"][data-color="sky"]) {
-    --_nk-palette-light: oklch(44.3% 0.11 240.79);
-    --_nk-palette-dark: oklch(90.1% 0.058 230.902);
-    --_nk-palette-tint: oklch(74.6% 0.16 232.661);
+    --_nk-semantic-accent: var(--nk-palette-sky);
+    --_nk-semantic-content: var(--nk-palette-sky-content);
   }
-  :where(
-      [data-nk="badge"][data-color="blue"],
-      [data-nk="badge"][data-color="info"],
-      [data-nk="alert"][data-variant="info"]
-    ) {
-    --_nk-palette-light: oklch(42.4% 0.199 265.638);
-    --_nk-palette-dark: oklch(88.2% 0.059 254.128);
-    --_nk-palette-tint: oklch(70.7% 0.165 254.624);
+
+  :where([data-nk="badge"][data-color="blue"]) {
+    --_nk-semantic-accent: var(--nk-palette-blue);
+    --_nk-semantic-content: var(--nk-palette-blue-content);
   }
+
   :where([data-nk="badge"][data-color="indigo"]) {
-    --_nk-palette-light: oklch(45.7% 0.24 277.023);
-    --_nk-palette-dark: oklch(87% 0.065 274.039);
-    --_nk-palette-tint: oklch(67.3% 0.182 276.935);
+    --_nk-semantic-accent: var(--nk-palette-indigo);
+    --_nk-semantic-content: var(--nk-palette-indigo-content);
   }
+
   :where([data-nk="badge"][data-color="violet"]) {
-    --_nk-palette-light: oklch(49.1% 0.27 292.581);
-    --_nk-palette-dark: oklch(89.4% 0.057 293.283);
-    --_nk-palette-tint: oklch(70.2% 0.183 293.541);
+    --_nk-semantic-accent: var(--nk-palette-violet);
+    --_nk-semantic-content: var(--nk-palette-violet-content);
   }
+
   :where([data-nk="badge"][data-color="purple"]) {
-    --_nk-palette-light: oklch(49.6% 0.265 301.924);
-    --_nk-palette-dark: oklch(90.2% 0.063 306.703);
-    --_nk-palette-tint: oklch(71.4% 0.203 305.504);
+    --_nk-semantic-accent: var(--nk-palette-purple);
+    --_nk-semantic-content: var(--nk-palette-purple-content);
   }
+
   :where([data-nk="badge"][data-color="fuchsia"]) {
-    --_nk-palette-light: oklch(51.8% 0.253 323.949);
-    --_nk-palette-dark: oklch(90.3% 0.076 319.62);
-    --_nk-palette-tint: oklch(74% 0.238 322.16);
+    --_nk-semantic-accent: var(--nk-palette-fuchsia);
+    --_nk-semantic-content: var(--nk-palette-fuchsia-content);
   }
+
   :where([data-nk="badge"][data-color="pink"]) {
-    --_nk-palette-light: oklch(52.5% 0.223 3.958);
-    --_nk-palette-dark: oklch(89.9% 0.061 343.231);
-    --_nk-palette-tint: oklch(71.8% 0.202 349.761);
+    --_nk-semantic-accent: var(--nk-palette-pink);
+    --_nk-semantic-content: var(--nk-palette-pink-content);
   }
+
   :where([data-nk="badge"][data-color="rose"]) {
-    --_nk-palette-light: oklch(51.4% 0.222 16.935);
-    --_nk-palette-dark: oklch(89.2% 0.058 10.001);
-    --_nk-palette-tint: oklch(71.2% 0.194 13.428);
+    --_nk-semantic-accent: var(--nk-palette-rose);
+    --_nk-semantic-content: var(--nk-palette-rose-content);
   }
 }

data/src/stylesheets/nitro_kit/components/progressive_image.css

@@ -47,7 +47,7 @@
         > [data-slot="progressive-image-placeholder"]
     ) {
     z-index: 1;
-    filter: blur(1rem);
+    filter: blur(calc(var(--nk-space) * 4));
     opacity: 0;
     transform: scale(1.05);
   }

data/src/stylesheets/nitro_kit/components/radio_button.css

@@ -1,44 +1,37 @@
 @layer nitro-kit.base {
+  /* Every dimension derives from one choice size, matching Checkbox: the two
+     sizes are one rule apart and the dot keeps its proportion at either. The
+     dot previously stayed at its medium size inside a large radio; deriving it
+     scales it with the control. */
   :where([data-nk="radio-button"]) {
+    --_nk-choice-size: var(--nk-choice-size-md);
+
     display: inline-grid;
     min-inline-size: var(--nk-control-height-md);
     min-block-size: var(--nk-control-height-md);
     color: var(--nk-color-foreground);
   }
 
+  :where([data-nk="radio-button"][data-size="lg"]) {
+    --_nk-choice-size: var(--nk-choice-size-lg);
+  }
+
   :where([data-nk="radio-button"] > [data-slot="radio-button-label"]) {
     display: grid;
-    grid-template-columns: 1.125rem minmax(0, 1fr);
+    grid-template-columns: var(--_nk-choice-size) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     min-block-size: var(--nk-control-height-md);
     cursor: pointer;
   }
 
-  :where(
-      [data-nk="radio-button"][data-size="lg"]
-        > [data-slot="radio-button-label"]
-    ) {
-    grid-template-columns: 1.5rem minmax(0, 1fr);
-  }
-
   :where(
       [data-nk="radio-button"] [data-slot="radio-button-control"],
       [data-nk="radio-button"] [data-slot="radio-button-indicator"]
     ) {
     grid-area: 1 / 1;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where(
-      [data-nk="radio-button"][data-size="lg"]
-        [data-slot="radio-button-control"],
-      [data-nk="radio-button"][data-size="lg"]
-        [data-slot="radio-button-indicator"]
-    ) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-choice-size);
+    block-size: var(--_nk-choice-size);
   }
 
   :where([data-nk="radio-button"] [data-slot="radio-button-control"]) {
@@ -56,11 +49,14 @@
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
     border-radius: var(--nk-radius-full);
+    transition:
+      background-color var(--nk-duration-fast) var(--nk-ease),
+      border-color var(--nk-duration-fast) var(--nk-ease);
   }
 
   :where([data-nk="radio-button"] [data-slot="radio-button-indicator"])::after {
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.44);
+    block-size: calc(var(--_nk-choice-size) * 0.44);
     content: "";
     background: var(--nk-color-primary);
     border-radius: inherit;
@@ -75,18 +71,11 @@
   :where([data-nk="radio-button"] > [data-slot="radio-button-description"]) {
     display: block;
     margin-block-start: var(--nk-space);
-    padding-inline-start: calc(1.125rem + (var(--nk-space) * 2));
+    padding-inline-start: calc(var(--_nk-choice-size) + (var(--nk-space) * 2));
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     text-wrap: pretty;
   }
-
-  :where(
-      [data-nk="radio-button"][data-size="lg"]
-        > [data-slot="radio-button-description"]
-    ) {
-    padding-inline-start: calc(1.5rem + (var(--nk-space) * 2));
-  }
 }
 
 @layer nitro-kit.state {
@@ -117,18 +106,24 @@
 
   :where([data-nk="radio-button"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* The server error describes the submitted value. Once the user picks a
      value that satisfies the control's own constraints the error is stale, so
-     the danger border stands down. `:user-valid` never matches before the user
+     the destructive border stands down. `:user-valid` never matches before the user
      touches the control, so an untouched invalid radio keeps its border. */
   :where(
       [data-nk="radio-button"]
         [data-slot="radio-button-control"][aria-invalid="true"]:not(:user-valid)
         + [data-slot="radio-button-indicator"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="radio-button"] [data-slot="radio-button-indicator"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }

data/src/stylesheets/nitro_kit/components/radio_button_group.css

@@ -10,8 +10,8 @@
       [data-nk="radio-button-group"] > [data-slot="radio-button-group-legend"]
     ) {
     padding: 0;
-    font-size: var(--nk-text-sm);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
   }
 
   :where(
@@ -57,7 +57,7 @@
     padding: calc(var(--nk-space) * 3);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -68,7 +68,7 @@
     gap: 0;
     padding: var(--nk-space);
     background: var(--nk-color-muted);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -78,7 +78,7 @@
     ) {
     min-inline-size: 0;
     padding-inline: calc(var(--nk-space) * 3);
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
   }
 
   :where(
@@ -136,7 +136,7 @@
       [data-nk="radio-button-group"][data-presentation="segmented"]
         [data-slot="radio-button-control"]:focus-visible
     ) {
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: calc(var(--nk-focus-offset) * -1);
   }

data/src/stylesheets/nitro_kit/components/rich_text_area.css

@@ -12,7 +12,7 @@
     --lexxy-color-ink-lightest: var(--nk-color-muted);
     --lexxy-color-selected: var(--nk-color-muted);
     --lexxy-color-selected-hover: var(--nk-color-border);
-    --lexxy-radius: var(--nk-radius-md);
+    --lexxy-radius: var(--nk-radius-lg);
     display: block;
     inline-size: 100%;
   }
@@ -31,6 +31,6 @@
         > [data-slot="rich-text-area-editor"]
         > [aria-invalid="true"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }

data/src/stylesheets/nitro_kit/components/select.css

@@ -9,13 +9,15 @@
     grid-area: 1 / 1;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
-    padding-inline: calc(var(--nk-space) * 3) calc(var(--nk-space) * 9);
+    padding-inline: var(--nk-control-padding-inline)
+      calc(var(--nk-control-padding-inline) * 2 + var(--nk-space) * 4);
     color: inherit;
     font: inherit;
+    font-size: var(--nk-text-base);
     appearance: none;
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       border-color var(--nk-duration-normal) var(--nk-ease),
       box-shadow var(--nk-duration-normal) var(--nk-ease);
@@ -25,9 +27,9 @@
     grid-area: 1 / 1;
     align-self: center;
     justify-self: end;
-    inline-size: 1rem;
-    block-size: 1rem;
-    margin-inline-end: calc(var(--nk-space) * 3);
+    inline-size: calc(var(--nk-space) * 4);
+    block-size: calc(var(--nk-space) * 4);
+    margin-inline-end: var(--nk-control-padding-inline);
     color: var(--nk-color-muted-foreground);
     pointer-events: none;
   }
@@ -39,9 +41,23 @@
 
   :where([data-nk="select"] > [data-slot="select-control"][multiple]) {
     min-block-size: calc(var(--nk-control-height-md) * 3);
-    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    padding-block: calc(var(--nk-space) * 2);
+    padding-inline: var(--nk-control-padding-inline);
     appearance: auto;
   }
+
+  /* Matches the Input width split. */
+  @media (min-width: 48rem) {
+    :where([data-nk="select"] > [data-slot="select-control"]) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="select"] > [data-slot="select-control"]) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -52,12 +68,12 @@
 
   :where([data-nk="select"] > [data-slot="select-control"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
       [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }

data/src/stylesheets/nitro_kit/components/settings_layout.css

@@ -4,25 +4,25 @@
     grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 6);
     align-items: start;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where(
       [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
       [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
     ) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-items"]) {
     display: flex;
     flex-direction: column;
     gap: var(--nk-space);
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-item"]) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-item-link"]) {
@@ -36,7 +36,7 @@
     font-weight: var(--nk-font-weight-medium);
     line-height: var(--nk-leading-tight);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);

data/src/stylesheets/nitro_kit/components/settings_section.css

@@ -15,8 +15,8 @@
   }
 
   :where([data-nk="settings-section"] [data-slot="settings-section-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-section-size);
+    font-weight: var(--nk-title-section-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }

data/src/stylesheets/nitro_kit/components/sheet.css

@@ -7,7 +7,7 @@
     position: fixed;
     inset-block: 0;
     max-block-size: none;
-    height: 100dvh;
+    block-size: 100dvh;
     margin-block: 0;
     padding: calc(var(--nk-space) * 6);
     overflow: auto;
@@ -28,15 +28,15 @@
   }
 
   :where([data-nk="sheet"][data-size="sm"] > [data-slot="sheet-panel"]) {
-    width: min(calc(100% - (var(--nk-space) * 8)), 20rem);
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), 20rem);
   }
 
   :where([data-nk="sheet"][data-size="md"] > [data-slot="sheet-panel"]) {
-    width: min(calc(100% - (var(--nk-space) * 8)), 28rem);
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), 28rem);
   }
 
   :where([data-nk="sheet"][data-size="lg"] > [data-slot="sheet-panel"]) {
-    width: min(calc(100% - (var(--nk-space) * 8)), 40rem);
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), 40rem);
   }
 
   :where([data-nk="sheet"] > [data-slot="sheet-panel"])::backdrop {
@@ -52,8 +52,8 @@
 
   :where([data-nk="sheet"] [data-slot="sheet-title"]) {
     padding-inline-end: calc(var(--nk-space) * 10);
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
   }
 
@@ -76,13 +76,13 @@
   :where(
       [data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: -1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * -4);
   }
 
   :where(
       [data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: 1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * 4);
   }
 
   /* Sides are logical, but translateX is physical; RTL flips the slide so the
@@ -91,14 +91,14 @@
       [data-nk="sheet"][data-side="left"]:dir(rtl)
         > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: 1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * 4);
   }
 
   :where(
       [data-nk="sheet"][data-side="right"]:dir(rtl)
         > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: -1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * -4);
   }
 
   @keyframes nk-sheet-enter {

data/src/stylesheets/nitro_kit/components/stat_grid.css

@@ -21,7 +21,7 @@
     display: grid;
     align-content: start;
     gap: calc(var(--nk-space) * 2);
-    min-height: 100%;
+    min-block-size: 100%;
     padding: calc(var(--nk-space) * 5);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);