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

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);

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

@@ -1,9 +1,29 @@
 @layer nitro-kit.base {
+  /* Four declared inputs; everything else derives. The block heights ride the
+     control ramp, the track is the block plus the handle's travel, and the
+     handle inset is whatever centers it inside the bordered track. */
   :where([data-nk="switch"]) {
+    --_nk-switch-block-size: var(--nk-control-height-xs);
+    --_nk-switch-handle-size: calc(var(--nk-space) * 4);
+    --_nk-switch-travel: calc(var(--nk-space) * 4);
+    --_nk-switch-track-size: calc(
+      var(--_nk-switch-block-size) + var(--_nk-switch-travel)
+    );
+    --_nk-switch-pad: calc(
+      (var(--_nk-switch-block-size) - var(--_nk-switch-handle-size)) / 2 -
+        var(--nk-border-width)
+    );
+
     display: inline-grid;
     color: var(--nk-color-foreground);
   }
 
+  :where([data-nk="switch"][data-size="lg"]) {
+    --_nk-switch-block-size: var(--nk-control-height-sm);
+    --_nk-switch-handle-size: calc(var(--nk-space) * 6);
+    --_nk-switch-travel: calc(var(--nk-space) * 5);
+  }
+
   :where([data-nk="switch"] > [data-slot="switch-label"]) {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
@@ -22,8 +42,8 @@
 
   :where([data-nk="switch"] [data-slot="switch-control"]) {
     z-index: 1;
-    inline-size: 2.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-switch-track-size);
+    block-size: var(--_nk-switch-block-size);
     margin: 0;
     cursor: pointer;
     appearance: none;
@@ -33,9 +53,9 @@
   :where([data-nk="switch"] [data-slot="switch-track"]) {
     display: flex;
     align-items: center;
-    inline-size: 2.5rem;
-    block-size: 1.5rem;
-    padding: 0.1875rem;
+    inline-size: var(--_nk-switch-track-size);
+    block-size: var(--_nk-switch-block-size);
+    padding: var(--_nk-switch-pad);
     pointer-events: none;
     background: var(--nk-color-muted);
     border: var(--nk-border-width) solid var(--nk-color-border);
@@ -45,28 +65,15 @@
       border-color var(--nk-duration-normal) var(--nk-ease);
   }
 
-  :where(
-      [data-nk="switch"][data-size="lg"] [data-slot="switch-control"],
-      [data-nk="switch"][data-size="lg"] [data-slot="switch-track"]
-    ) {
-    inline-size: 3.25rem;
-    block-size: 2rem;
-  }
-
   :where([data-nk="switch"] [data-slot="switch-handle"]) {
-    inline-size: 1rem;
-    block-size: 1rem;
+    inline-size: var(--_nk-switch-handle-size);
+    block-size: var(--_nk-switch-handle-size);
     background: var(--nk-color-surface);
     border-radius: var(--nk-radius-full);
     box-shadow: var(--nk-shadow-sm);
     transition: transform var(--nk-duration-normal) var(--nk-ease);
   }
 
-  :where([data-nk="switch"][data-size="lg"] [data-slot="switch-handle"]) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-
   :where([data-nk="switch"] [data-slot="switch-label-text"]) {
     display: block;
     grid-column: 2;
@@ -75,18 +82,14 @@
   :where([data-nk="switch"] > [data-slot="switch-description"]) {
     display: block;
     margin-block-start: var(--nk-space);
-    padding-inline-start: calc(2.5rem + (var(--nk-space) * 3));
+    padding-inline-start: calc(
+      var(--_nk-switch-track-size) + (var(--nk-space) * 3)
+    );
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-normal);
     text-wrap: pretty;
   }
-
-  :where(
-      [data-nk="switch"][data-size="lg"] > [data-slot="switch-description"]
-    ) {
-    padding-inline-start: calc(3.25rem + (var(--nk-space) * 3));
-  }
 }
 
 @layer nitro-kit.state {
@@ -105,16 +108,7 @@
         + [data-slot="switch-track"]
         > [data-slot="switch-handle"]
     ) {
-    transform: translateX(1rem);
-  }
-
-  :where(
-      [data-nk="switch"][data-size="lg"]
-        [data-slot="switch-control"]:checked
-        + [data-slot="switch-track"]
-        > [data-slot="switch-handle"]
-    ) {
-    transform: translateX(1.25rem);
+    transform: translateX(var(--_nk-switch-travel));
   }
 
   :where(
@@ -128,19 +122,19 @@
 
   :where([data-nk="switch"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* The server error describes the submitted value. Once the user toggles the
      control and it satisfies its own constraints the error is stale, so the
-     danger border stands down. `:user-valid` never matches before the user
+     destructive border stands down. `:user-valid` never matches before the user
      touches the control, so an untouched invalid switch keeps its border. */
   :where(
       [data-nk="switch"]
         [data-slot="switch-control"][aria-invalid="true"]:not(:user-valid)
         + [data-slot="switch-track"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 

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

@@ -52,9 +52,14 @@
     text-decoration: none;
   }
 
+  /* Half-strength through the color channel rather than opacity, so the
+     dimming is one declaration and never cascades into descendants. */
   :where([data-nk="table"] [data-slot="table-sort-indicator"]) {
-    color: var(--nk-color-muted-foreground);
-    opacity: 0.5;
+    color: color-mix(
+      in oklab,
+      var(--nk-color-muted-foreground) 50%,
+      transparent
+    );
   }
 }
 
@@ -80,7 +85,6 @@
         [data-slot="table-sort-indicator"]
     ) {
     color: var(--nk-color-primary);
-    opacity: 1;
   }
 
   @media (hover: hover) {
@@ -93,7 +97,7 @@
           [data-slot="table-sort"]:hover
           [data-slot="table-sort-indicator"]
       ) {
-      opacity: 1;
+      color: var(--nk-color-muted-foreground);
     }
   }
 

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

@@ -37,6 +37,10 @@
     padding-block: calc(var(--nk-space) * 4);
     line-height: var(--nk-leading-normal);
   }
+
+  :where([data-nk="tabs"] > [data-slot="tabs-panel"][hidden="until-found"]) {
+    padding-block: 0;
+  }
 }
 
 @layer nitro-kit.variant {
@@ -129,7 +133,7 @@
     ) {
     color: var(--nk-color-muted-foreground);
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--nk-disabled-opacity);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -2,19 +2,34 @@
   :where([data-nk="textarea"]) {
     display: block;
     inline-size: 100%;
-    min-block-size: 6rem;
-    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    min-block-size: calc(var(--nk-space) * 24);
+    padding-block: calc(var(--nk-space) * 2);
+    padding-inline: var(--nk-control-padding-inline);
     color: var(--nk-color-foreground);
     font: inherit;
+    font-size: var(--nk-text-base);
     line-height: var(--nk-leading-normal);
     resize: vertical;
     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);
   }
+
+  /* Matches the Input width split. */
+  @media (min-width: 48rem) {
+    :where([data-nk="textarea"]) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="textarea"]) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -30,10 +45,10 @@
 
   :where([data-nk="textarea"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="textarea"][aria-invalid="true"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }