nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

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-semibold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
   }
 
@@ -73,12 +73,32 @@
     animation: nk-sheet-enter var(--nk-duration-slow) var(--nk-ease);
   }
 
-  :where([data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]) {
-    --_nk-sheet-from: -1rem;
+  :where(
+      [data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]
+    ) {
+    --_nk-sheet-from: calc(var(--nk-space) * -4);
   }
 
-  :where([data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]) {
-    --_nk-sheet-from: 1rem;
+  :where(
+      [data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]
+    ) {
+    --_nk-sheet-from: calc(var(--nk-space) * 4);
+  }
+
+  /* Sides are logical, but translateX is physical; RTL flips the slide so the
+     panel still enters from its own edge. */
+  :where(
+      [data-nk="sheet"][data-side="left"]:dir(rtl)
+        > [data-slot="sheet-panel"][open]
+    ) {
+    --_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: calc(var(--nk-space) * -4);
   }
 
   @keyframes nk-sheet-enter {

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

@@ -1,26 +1,27 @@
 @layer nitro-kit.base {
   :where([data-nk="stat-grid"]) {
+    inline-size: 100%;
     color: var(--nk-color-foreground);
   }
 
   :where(
-    [data-nk="stat-grid"]
-      > [data-slot="stat-grid-grid"]
-      > [data-slot="stat-grid-list"]
-  ) {
+      [data-nk="stat-grid"]
+        > [data-slot="stat-grid-grid"]
+        > [data-slot="stat-grid-list"]
+    ) {
     display: contents;
   }
 
   :where(
-    [data-nk="stat-grid"]
-      > [data-slot="stat-grid-grid"]
-      > [data-slot="stat-grid-list"]
-      > [data-slot="stat-grid-stat"]
-  ) {
+      [data-nk="stat-grid"]
+        > [data-slot="stat-grid-grid"]
+        > [data-slot="stat-grid-list"]
+        > [data-slot="stat-grid-stat"]
+    ) {
     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);
@@ -14,16 +34,16 @@
   }
 
   :where(
-    [data-nk="switch"] [data-slot="switch-control"],
-    [data-nk="switch"] [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"] [data-slot="switch-control"],
+      [data-nk="switch"] [data-slot="switch-track"]
+    ) {
     grid-area: 1 / 1;
   }
 
   :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,77 +82,68 @@
   :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 {
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"]:checked
-      + [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"]
+        [data-slot="switch-control"]:checked
+        + [data-slot="switch-track"]
+    ) {
     background: var(--nk-color-primary);
     border-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"]:checked
-      + [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);
+      [data-nk="switch"]
+        [data-slot="switch-control"]:checked
+        + [data-slot="switch-track"]
+        > [data-slot="switch-handle"]
+    ) {
+    transform: translateX(var(--_nk-switch-travel));
   }
 
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"]:focus-visible
-      + [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"]
+        [data-slot="switch-control"]:focus-visible
+        + [data-slot="switch-track"]
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }
 
   :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
+     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"]
-      + [data-slot="switch-track"]
-  ) {
-    border-color: var(--nk-color-danger);
+      [data-nk="switch"]
+        [data-slot="switch-control"][aria-invalid="true"]:not(:user-valid)
+        + [data-slot="switch-track"]
+    ) {
+    border-color: var(--nk-color-destructive);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   @layer nitro-kit.base {
     :where(
-      [data-nk="switch"] [data-slot="switch-track"],
-      [data-nk="switch"] [data-slot="switch-handle"]
-    ) {
+        [data-nk="switch"] [data-slot="switch-track"],
+        [data-nk="switch"] [data-slot="switch-handle"]
+      ) {
       transition-duration: 0.01ms;
     }
   }

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

@@ -3,6 +3,8 @@
     inline-size: 100%;
     overflow-x: auto;
     color: var(--nk-color-foreground);
+    scrollbar-width: thin;
+    scrollbar-color: var(--nk-color-border) transparent;
     -webkit-overflow-scrolling: touch;
   }
 
@@ -22,12 +24,14 @@
     border-block-end: var(--nk-border-width) solid var(--nk-color-border);
   }
 
+  /* min-block-size is undefined on table cells, so the 40px minimum comes
+     from padding around a single line box instead. */
   :where(
-    [data-nk="table"] [data-slot="table-header"],
-    [data-nk="table"] [data-slot="table-cell"]
-  ) {
-    min-block-size: var(--nk-control-height-md);
-    padding: calc(var(--nk-space) * 2);
+      [data-nk="table"] [data-slot="table-header"],
+      [data-nk="table"] [data-slot="table-cell"]
+    ) {
+    padding-block: calc((var(--nk-control-height-md) - 1lh) / 2);
+    padding-inline: calc(var(--nk-space) * 2);
     text-align: start;
     vertical-align: middle;
   }
@@ -42,41 +46,45 @@
     align-items: center;
     min-block-size: var(--nk-control-height-md);
     gap: calc(var(--nk-space) * 1.5);
-    margin-block: calc(var(--nk-space) * -2);
-    padding-block: calc(var(--nk-space) * 2);
+    margin-block: calc((var(--nk-control-height-md) - 1lh) / -2);
+    padding-block: calc((var(--nk-control-height-md) - 1lh) / 2);
     color: inherit;
     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
+    );
   }
 }
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="table"]
-      [data-slot="table-header"]:is(
-        [aria-sort="ascending"],
-        [aria-sort="descending"]
-      )
-      [data-slot="table-sort"]
-  ) {
+      [data-nk="table"]
+        [data-slot="table-header"]:is(
+          [aria-sort="ascending"],
+          [aria-sort="descending"]
+        )
+        [data-slot="table-sort"]
+    ) {
     color: var(--nk-color-foreground);
     font-weight: var(--nk-font-weight-semibold);
   }
 
   :where(
-    [data-nk="table"]
-      [data-slot="table-header"]:is(
-        [aria-sort="ascending"],
-        [aria-sort="descending"]
-      )
-      [data-slot="table-sort-indicator"]
-  ) {
+      [data-nk="table"]
+        [data-slot="table-header"]:is(
+          [aria-sort="ascending"],
+          [aria-sort="descending"]
+        )
+        [data-slot="table-sort-indicator"]
+    ) {
     color: var(--nk-color-primary);
-    opacity: 1;
   }
 
   @media (hover: hover) {
@@ -85,11 +93,11 @@
     }
 
     :where(
-      [data-nk="table"]
-        [data-slot="table-sort"]:hover
-        [data-slot="table-sort-indicator"]
-    ) {
-      opacity: 1;
+        [data-nk="table"]
+          [data-slot="table-sort"]:hover
+          [data-slot="table-sort-indicator"]
+      ) {
+      color: var(--nk-color-muted-foreground);
     }
   }
 
@@ -101,15 +109,15 @@
 
 @layer nitro-kit.compound {
   :where(
-    [data-nk="table"] [data-slot="table-header"][data-align="center"],
-    [data-nk="table"] [data-slot="table-cell"][data-align="center"]
-  ) {
+      [data-nk="table"] [data-slot="table-header"][data-align="center"],
+      [data-nk="table"] [data-slot="table-cell"][data-align="center"]
+    ) {
     text-align: center;
   }
   :where(
-    [data-nk="table"] [data-slot="table-header"][data-align="right"],
-    [data-nk="table"] [data-slot="table-cell"][data-align="right"]
-  ) {
+      [data-nk="table"] [data-slot="table-header"][data-align="right"],
+      [data-nk="table"] [data-slot="table-cell"][data-align="right"]
+    ) {
     font-variant-numeric: tabular-nums;
     text-align: right;
   }

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

@@ -1,26 +1,29 @@
 @layer nitro-kit.base {
   :where([data-nk="tabs"]) {
-    width: 100%;
+    inline-size: 100%;
     color: var(--nk-color-foreground);
   }
 
   :where([data-nk="tabs"] > [data-slot="tabs-list"]) {
     display: flex;
-    max-width: 100%;
+    max-inline-size: 100%;
     overflow-x: auto;
     border-block-end: var(--nk-border-width) solid var(--nk-color-border);
   }
 
   :where([data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]) {
-    display: flex;
-    min-height: 2.5rem;
-    align-items: center;
-    justify-content: center;
+    display: block;
+    min-inline-size: 0;
+    min-block-size: var(--nk-control-height-md);
+    align-content: center;
     padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
     font: inherit;
     font-weight: var(--nk-font-weight-medium);
     color: var(--nk-color-muted-foreground);
+    text-align: center;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     cursor: pointer;
     background: transparent;
     border: 0;
@@ -34,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 {
@@ -44,8 +51,8 @@
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"]
+    ) {
     flex-direction: column;
     grid-column: 1;
     grid-row: 1;
@@ -56,27 +63,26 @@
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"]
-  ) {
-    justify-content: flex-start;
+      [data-nk="tabs"][data-orientation="vertical"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]
+    ) {
     text-align: start;
     border-block-end: 0;
     border-inline-end: var(--nk-focus-width) solid transparent;
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"][aria-selected="true"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"][aria-selected="true"]
+    ) {
     border-inline-end-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-panel"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-panel"]
+    ) {
     grid-column: 2;
     grid-row: 1;
     padding-block-start: calc(var(--nk-space) * 2);
@@ -86,52 +92,54 @@
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
-      [data-nk="tabs"]
-        > [data-slot="tabs-list"]
-        > [data-slot="tabs-tab"]:hover:not(:disabled)
-    ) {
+        [data-nk="tabs"]
+          > [data-slot="tabs-list"]
+          > [data-slot="tabs-tab"]:hover:not(:disabled)
+      ) {
       color: var(--nk-color-foreground);
     }
   }
 
   :where(
-    [data-nk="tabs"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"][aria-selected="true"]
-  ) {
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"][aria-selected="true"]
+    ) {
     color: var(--nk-color-foreground);
     border-block-end-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"][aria-selected="true"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"][aria-selected="true"]
+    ) {
     border-block-end-color: transparent;
   }
 
   :where(
-    [data-nk="tabs"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"]:focus-visible
-  ) {
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]:focus-visible
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: calc(var(--nk-focus-offset) * -1);
   }
 
   :where(
-    [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]:disabled
-  ) {
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]:disabled
+    ) {
     color: var(--nk-color-muted-foreground);
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--nk-disabled-opacity);
   }
 
   @media (prefers-reduced-motion: reduce) {
     :where(
-      [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]
-    ) {
+        [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]
+      ) {
       transition-duration: 0.01ms;
     }
   }

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