nitro_kit 2.0.0.alpha.3 → 2.0.0.alpha.4

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

@@ -1,11 +1,11 @@
 @layer nitro-kit.base {
   :where([data-nk="button"]) {
     --_nk-button-height: var(--nk-control-height-md);
-    --_nk-button-padding: calc(var(--nk-space) * 4);
+    --_nk-button-padding: var(--nk-control-padding-inline);
     --_nk-button-icon-padding: calc(var(--nk-space) * 3);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-lg));
     --_nk-button-font-size: var(--nk-text-sm);
-    --_nk-button-line-height: 1.25rem;
+    --_nk-button-line-height: var(--nk-leading-normal);
     --_nk-button-background: var(--nk-button-default-background);
     --_nk-button-hover-background: var(--nk-button-default-hover-background);
     --_nk-button-foreground: var(--nk-button-default-foreground);
@@ -19,7 +19,7 @@
       ),
       var(--nk-button-default-border)
     );
-    --_nk-button-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+    --_nk-button-shadow: var(--nk-shadow-xs);
 
     position: relative;
     display: inline-flex;
@@ -104,6 +104,21 @@
     inline-size: var(--_nk-button-height);
     padding-inline: 0;
   }
+
+  /* Touch guidance wants a 44px minimum target. The rendered button keeps
+     its size; an invisible extension expands the tappable area to the large
+     control step on coarse pointers. */
+  @media (pointer: coarse) {
+    :where([data-nk="button"])::after {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: max(100%, var(--nk-control-height-lg));
+      block-size: max(100%, var(--nk-control-height-lg));
+      content: "";
+      translate: -50% -50%;
+    }
+  }
 }
 
 @layer nitro-kit.variant {
@@ -111,27 +126,31 @@
     --_nk-button-background: var(--nk-color-primary);
     --_nk-button-hover-background: var(--nk-color-primary-hover);
     --_nk-button-foreground: var(--nk-color-primary-foreground);
-    --_nk-button-border: light-dark(oklch(0 0 0 / 0.1), transparent);
+    --_nk-button-border: light-dark(
+      color-mix(in oklab, var(--nk-black) 10%, transparent),
+      transparent
+    );
     --_nk-button-border-bottom: var(--_nk-button-border);
-    --_nk-button-shadow: inset 0 1px oklch(1 0 0 / 0.2);
+    --_nk-button-shadow: inset 0 1px
+      color-mix(in oklab, var(--nk-white) 20%, transparent);
   }
 
   :where([data-nk="button"][data-variant="destructive"]) {
-    --_nk-button-background: var(--nk-color-danger);
-    --_nk-button-hover-background: var(--nk-color-danger-hover);
-    --_nk-button-foreground: var(--nk-color-danger-foreground);
+    --_nk-button-background: var(--nk-color-destructive);
+    --_nk-button-hover-background: var(--nk-color-destructive-hover);
+    --_nk-button-foreground: var(--nk-color-destructive-foreground);
     --_nk-button-border-width: 0;
     --_nk-button-border: transparent;
     --_nk-button-border-bottom: transparent;
-    --_nk-button-shadow: inset 0 1px var(--nk-color-danger),
-      inset 0 2px oklch(1 0 0 / 0.15);
+    --_nk-button-shadow: inset 0 1px var(--nk-color-destructive),
+      inset 0 2px color-mix(in oklab, var(--nk-white) 15%, transparent);
   }
 
   :where([data-nk="button"][data-variant="ghost"]) {
     --_nk-button-background: transparent;
     --_nk-button-hover-background: light-dark(
-      oklch(0.274 0.006 286.033 / 0.05),
-      oklch(1 0 0 / 0.15)
+      color-mix(in oklab, var(--nk-zinc-800) 5%, transparent),
+      color-mix(in oklab, var(--nk-white) 15%, transparent)
     );
     --_nk-button-foreground: var(--nk-color-foreground);
     --_nk-button-border-width: 0;
@@ -174,22 +193,21 @@
     --_nk-button-icon-padding: var(--nk-space);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
     --_nk-button-font-size: var(--nk-text-xs);
-    --_nk-button-line-height: 1rem;
-    --_nk-button-avatar-size: 1rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 4);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.75);
   }
 
   :where([data-nk="button"][data-size="sm"]) {
-    --_nk-button-height: calc(var(--nk-space) * 8);
+    --_nk-button-height: var(--nk-control-height-sm);
     --_nk-button-padding: calc(var(--nk-space) * 3);
     --_nk-button-icon-padding: calc(var(--nk-space) * 2);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
-    --_nk-button-avatar-size: 1.25rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 5);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where([data-nk="button"][data-size="md"]) {
-    --_nk-button-avatar-size: 1.5rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 6);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
@@ -197,7 +215,7 @@
     --_nk-button-height: var(--nk-control-height-lg);
     --_nk-button-padding: calc(var(--nk-space) * 5);
     --_nk-button-icon-padding: calc(var(--nk-space) * 4);
-    --_nk-button-avatar-size: 1.75rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 7);
     --_nk-button-avatar-font-size: var(--nk-text-xs);
   }
 
@@ -207,8 +225,7 @@
     --_nk-button-icon-padding: calc(var(--nk-space) * 7);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-xl));
     --_nk-button-font-size: var(--nk-text-base);
-    --_nk-button-line-height: 1.5rem;
-    --_nk-button-avatar-size: 2rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 8);
     --_nk-button-avatar-font-size: var(--nk-text-xs);
     gap: calc(var(--nk-space) * 4);
   }
@@ -232,7 +249,7 @@
     ) {
     pointer-events: none;
     cursor: default;
-    opacity: 0.75;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* Dark surfaces need more than reduced opacity to read a saturated
@@ -247,7 +264,7 @@
       ) {
       --_nk-button-background: color-mix(
         in oklab,
-        var(--nk-color-danger) 40%,
+        var(--nk-color-destructive) 40%,
         var(--nk-color-surface)
       );
     }
@@ -262,7 +279,7 @@
     ) {
     --_nk-button-background: color-mix(
       in oklab,
-      var(--nk-color-danger) 40%,
+      var(--nk-color-destructive) 40%,
       var(--nk-color-surface)
     );
   }
@@ -298,8 +315,8 @@
 
 @layer nitro-kit.compound {
   :where([data-nk="button"] > [data-slot="button-label"] > [data-nk="avatar"]) {
-    width: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
-    height: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    inline-size: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    block-size: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
     font-size: min(
       var(--_nk-avatar-font-size),
       var(--_nk-button-avatar-font-size)

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

@@ -15,8 +15,8 @@
   }
 
   :where([data-nk="card"] > [data-slot="card-title"]) {
-    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);
     text-wrap: balance;
   }

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

@@ -1,39 +1,36 @@
 @layer nitro-kit.base {
+  /* Every box dimension derives from one choice size, so the two sizes are one
+     rule apart and the glyph keeps its proportions at either. The check stroke
+     is two border widths and its optical nudge is one, at every size. */
   :where([data-nk="checkbox"]) {
+    --_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="checkbox"][data-size="lg"]) {
+    --_nk-choice-size: var(--nk-choice-size-lg);
+  }
+
   :where([data-nk="checkbox"] > [data-slot="checkbox-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="checkbox"][data-size="lg"] > [data-slot="checkbox-label"]) {
-    grid-template-columns: 1.5rem minmax(0, 1fr);
-  }
-
   :where(
       [data-nk="checkbox"] [data-slot="checkbox-control"],
       [data-nk="checkbox"] [data-slot="checkbox-indicator"]
     ) {
     grid-area: 1 / 1;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where(
-      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-control"],
-      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-    ) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-choice-size);
+    block-size: var(--_nk-choice-size);
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-control"]) {
@@ -58,20 +55,13 @@
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-indicator"])::after {
-    inline-size: 0.5rem;
-    block-size: 0.3rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.44);
+    block-size: calc(var(--_nk-choice-size) * 0.27);
     content: "";
-    border-block-end: 0.125rem solid currentcolor;
-    border-inline-start: 0.125rem solid currentcolor;
+    border-block-end: calc(var(--nk-border-width) * 2) solid currentcolor;
+    border-inline-start: calc(var(--nk-border-width) * 2) solid currentcolor;
     opacity: 0;
-    transform: translateY(-0.0625rem) rotate(-45deg);
-  }
-
-  :where(
-      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-    )::after {
-    inline-size: 0.625rem;
-    block-size: 0.375rem;
+    transform: translateY(calc(var(--nk-border-width) * -1)) rotate(-45deg);
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-label-text"]) {
@@ -82,17 +72,11 @@
   :where([data-nk="checkbox"] > [data-slot="checkbox-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="checkbox"][data-size="lg"] > [data-slot="checkbox-description"]
-    ) {
-    padding-inline-start: calc(1.5rem + (var(--nk-space) * 2));
-  }
 }
 
 @layer nitro-kit.state {
@@ -119,21 +103,14 @@
       [data-nk="checkbox"][data-state="indeterminate"]
         [data-slot="checkbox-indicator"]
     )::after {
-    inline-size: 0.55rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.49);
     block-size: 0;
-    border-block-end: 0.125rem solid currentcolor;
+    border-block-end: calc(var(--nk-border-width) * 2) solid currentcolor;
     border-inline-start: 0;
     opacity: 1;
     transform: none;
   }
 
-  :where(
-      [data-nk="checkbox"][data-size="lg"][data-state="indeterminate"]
-        [data-slot="checkbox-indicator"]
-    )::after {
-    inline-size: 0.7rem;
-  }
-
   :where(
       [data-nk="checkbox"]
         [data-slot="checkbox-control"]:focus-visible
@@ -145,12 +122,12 @@
 
   :where([data-nk="checkbox"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* A server-rendered error describes the value that was submitted. Once the
      user has interacted with the control and it satisfies its own constraints,
-     that error is stale, so the danger border stands down and the native
+     that error is stale, so the destructive border stands down and the native
      checked treatment takes over again. `:user-valid` never matches before the
      user touches the control, so an untouched invalid checkbox keeps its
      border. */
@@ -159,6 +136,12 @@
         [data-slot="checkbox-control"][aria-invalid="true"]:not(:user-valid)
         + [data-slot="checkbox-indicator"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="checkbox"] [data-slot="checkbox-indicator"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }

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

@@ -8,8 +8,8 @@
 
   :where([data-nk="checkbox-group"] > [data-slot="checkbox-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(
@@ -45,7 +45,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);
   }
 }
 

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

@@ -29,8 +29,8 @@
 
   :where([data-nk="combobox"] > [data-slot="combobox-status"]) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -44,7 +44,7 @@
     position: fixed;
     z-index: 50;
     inline-size: max(var(--_nk-combobox-width, 12rem), 12rem);
-    max-inline-size: min(28rem, calc(100vw - (var(--nk-space) * 8)));
+    max-inline-size: min(28rem, calc(100% - (var(--nk-space) * 8)));
     max-block-size: 15rem;
     margin-block: var(--nk-space);
     padding: var(--nk-space);
@@ -69,7 +69,7 @@
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-normal);
     cursor: pointer;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -130,7 +130,7 @@
       [data-nk="combobox"] [data-slot="combobox-option"][aria-disabled="true"]
     ) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
@@ -142,7 +142,7 @@
   @keyframes nk-combobox-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.25rem);
+      transform: translateY(calc(var(--nk-space) * -1));
     }
     to {
       opacity: 1;

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

@@ -3,12 +3,17 @@
     inline-size: 100%;
   }
 
+  /* The trigger reads as the search input it opens: Input's plain border,
+     radius, and surface instead of Button's raised treatment. */
   :where([data-nk="command-palette"] > [data-slot="command-palette-trigger"]) {
     justify-content: start;
     inline-size: 100%;
     color: var(--nk-color-muted-foreground);
     font-weight: var(--nk-font-weight-normal);
     background: var(--nk-color-surface);
+    border-color: var(--nk-color-border);
+    border-block-end-color: var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
     box-shadow: none;
   }
 
@@ -32,6 +37,17 @@
     white-space: nowrap;
   }
 
+  /* The chip floats at the trigger's end with the same inset on its top,
+     end, and bottom sides, so the trigger's text padding stands down. */
+  :where(
+      [data-nk="command-palette"]
+        > [data-slot="command-palette-trigger"]:has(
+          [data-slot="command-palette-shortcut"]
+        )
+    ) {
+    padding-inline-end: calc(var(--nk-space) * 2 - var(--nk-border-width));
+  }
+
   :where([data-nk="command-palette"] [data-slot="command-palette-shortcut"]) {
     flex: 0 0 auto;
     margin-inline-start: auto;
@@ -46,6 +62,16 @@
     border-radius: var(--nk-radius-sm);
   }
 
+  /* The panel hugs its results and stops growing at the cap; past it, the
+     shrinkable list scrolls. The flex display applies only while open, so
+     the closed dialog keeps the user-agent's display: none. */
+  :where(
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"][open]
+    ) {
+    display: flex;
+    flex-direction: column;
+  }
+
   :where([data-nk="command-palette"] > [data-slot="command-palette-panel"]) {
     inline-size: min(calc(100% - (var(--nk-space) * 8)), var(--nk-content-md));
     max-block-size: min(36rem, calc(100dvh - (var(--nk-space) * 8)));
@@ -59,6 +85,16 @@
     box-shadow: var(--nk-shadow-lg);
   }
 
+  /* The modal palette anchors near the viewport top, so hugging grows and
+     shrinks downward and the top edge never jumps while filtering. The
+     non-enhanced fallback keeps the centered default. */
+  :where(
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"]:modal
+    ) {
+    margin-block: 12dvh auto;
+    max-block-size: min(36rem, calc(88dvh - var(--nk-space) * 4));
+  }
+
   :where(
       [data-nk="command-palette"] > [data-slot="command-palette-panel"]
     )::backdrop {
@@ -70,8 +106,8 @@
       [data-nk="command-palette"] [data-slot="command-palette-status"]
     ) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -83,6 +119,7 @@
 
   :where([data-nk="command-palette"] [data-slot="command-palette-search"]) {
     display: flex;
+    flex: 0 0 auto;
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     padding: calc(var(--nk-space) * 2);
@@ -146,8 +183,10 @@
 
   :where([data-nk="command-palette"] [data-slot="command-palette-results"]) {
     display: grid;
+    flex: 0 1 auto;
     gap: var(--nk-space);
     max-block-size: 26rem;
+    min-block-size: 0;
     padding: calc(var(--nk-space) * 2);
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -171,7 +210,7 @@
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-normal);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-xl) - var(--nk-space) * 2);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -196,6 +235,25 @@
   }
 }
 
+@layer nitro-kit.compound {
+  /* The search strip is the field: the icon sits inside it and the nested
+     Input drops its own chrome, so the row reads as one input bounded by
+     the hairline below. The caret is the focus indicator, matching every
+     command palette — a ring on a borderless strip would show permanently,
+     because text inputs are always focus-visible. */
+  :where([data-nk="command-palette"] [data-slot="command-palette-input"]) {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  :where(
+      [data-nk="command-palette"]
+        [data-slot="command-palette-input"]:focus-visible
+    ) {
+    outline: none;
+  }
+}
+
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
@@ -234,7 +292,7 @@
   @keyframes nk-command-palette-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.5rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * -2)) scale(0.98);
     }
     to {
       opacity: 1;

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

@@ -1,25 +1,25 @@
 @layer nitro-kit.base {
   :where([data-nk="container"]) {
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
     margin-inline: auto;
   }
 }
 
 @layer nitro-kit.size {
   :where([data-nk="container"][data-size="sm"]) {
-    max-width: var(--nk-content-sm);
+    max-inline-size: var(--nk-content-sm);
   }
 
   :where([data-nk="container"][data-size="md"]) {
-    max-width: var(--nk-content-md);
+    max-inline-size: var(--nk-content-md);
   }
 
   :where([data-nk="container"][data-size="lg"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
   }
 
   :where([data-nk="container"][data-size="xl"]) {
-    max-width: var(--nk-content-xl);
+    max-inline-size: var(--nk-content-xl);
   }
 }

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

@@ -52,7 +52,7 @@
   }
 
   :where([data-nk="control-group"] > [data-nk="select"] > select) {
-    height: 100%;
+    block-size: 100%;
     border-radius: 0;
   }
 
@@ -73,8 +73,8 @@
           span[data-slot="control-group-addon"]
         ):first-child
     ) {
-    border-start-start-radius: var(--nk-radius-md);
-    border-end-start-radius: var(--nk-radius-md);
+    border-start-start-radius: var(--nk-radius-lg);
+    border-end-start-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -85,8 +85,8 @@
           span[data-slot="control-group-addon"]
         ):last-child
     ) {
-    border-start-end-radius: var(--nk-radius-md);
-    border-end-end-radius: var(--nk-radius-md);
+    border-start-end-radius: var(--nk-radius-lg);
+    border-end-end-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -132,12 +132,12 @@
   }
 
   :where([data-nk="control-group"] > [data-nk="select"]:first-child > select) {
-    border-start-start-radius: var(--nk-radius-md);
-    border-end-start-radius: var(--nk-radius-md);
+    border-start-start-radius: var(--nk-radius-lg);
+    border-end-start-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="control-group"] > [data-nk="select"]:last-child > select) {
-    border-start-end-radius: var(--nk-radius-md);
-    border-end-end-radius: var(--nk-radius-md);
+    border-start-end-radius: var(--nk-radius-lg);
+    border-end-end-radius: var(--nk-radius-lg);
   }
 }

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

@@ -5,14 +5,14 @@
     align-items: end;
     gap: calc(var(--nk-space) * 5);
     padding: calc(var(--nk-space) * 6);
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     background: color-mix(
       in oklab,
-      var(--nk-color-danger) 8%,
+      var(--nk-color-destructive) 8%,
       var(--nk-color-surface)
     );
     border: var(--nk-border-width) solid
-      color-mix(in oklab, var(--nk-color-danger) 50%, transparent);
+      color-mix(in oklab, var(--nk-color-destructive) 50%, transparent);
     border-radius: var(--nk-radius-lg);
   }
 
@@ -23,14 +23,14 @@
   }
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-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;
   }
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
     text-wrap: pretty;

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

@@ -19,14 +19,14 @@
   }
 
   :where([data-nk="data-section"] [data-slot="data-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;
   }
 
   :where([data-nk="data-section"] [data-slot="data-section-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
@@ -35,6 +35,6 @@
 
   :where([data-nk="data-section"] > [data-slot="data-section-table"]),
   :where([data-nk="data-section"] > [data-slot="data-section-empty-state"]) {
-    width: 100%;
+    inline-size: 100%;
   }
 }