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

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

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

@@ -10,7 +10,7 @@
     inset-block-end: calc(var(--nk-space) * 5);
     display: flex;
     flex-direction: column;
-    inline-size: min(26rem, calc(100vw - (var(--nk-space) * 10)));
+    inline-size: min(26rem, calc(100% - (var(--nk-space) * 10)));
     gap: calc(var(--nk-space) * 3);
     margin: 0;
     padding: 0;
@@ -33,7 +33,7 @@
     background: var(--_nk-toast-background);
     border: var(--nk-border-width) solid var(--_nk-toast-border);
     border-radius: var(--nk-radius-lg);
-    box-shadow: var(--nk-shadow-lg);
+    box-shadow: var(--nk-shadow-md);
     transition:
       opacity var(--nk-duration-normal) var(--nk-ease),
       transform var(--nk-duration-normal) var(--nk-ease);
@@ -47,8 +47,8 @@
   }
 
   :where([data-nk="toast-item"] [data-slot="toast-item-title"]) {
-    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);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -66,60 +66,13 @@
 }
 
 @layer nitro-kit.variant {
-  :where([data-nk="toast-item"][data-variant="info"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-info) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-info-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-info) 45%,
-      transparent
-    );
-  }
-
-  :where([data-nk="toast-item"][data-variant="success"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-success) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-success-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-success) 45%,
-      transparent
-    );
-  }
-
-  :where([data-nk="toast-item"][data-variant="warning"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-warning) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-warning-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-warning) 45%,
-      transparent
-    );
-  }
-
-  :where([data-nk="toast-item"][data-variant="error"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-danger) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-danger-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-danger) 45%,
-      transparent
-    );
+  /* Colour, tint strength, and appearance switching all come from the shared
+     semantic palette, so a Toast and an Alert of the same variant render
+     identically. */
+  :where([data-nk="toast-item"][data-variant]) {
+    --_nk-toast-background: var(--_nk-semantic-surface);
+    --_nk-toast-border: var(--_nk-semantic-border);
+    --_nk-toast-foreground: var(--_nk-semantic-content);
   }
 }
 

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

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="toolbar"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
@@ -13,7 +13,7 @@
       [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
     ) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     /* Regions never exceed the toolbar, so nested content such as a
        scrolling ButtonGroup receives real width pressure when stacked. */
     max-inline-size: 100%;

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

@@ -8,6 +8,10 @@
     position: absolute;
     z-index: 50;
     inline-size: max-content;
+    /* Absolutely positioned inside its wrapper, so a percentage would resolve
+       against the trigger, not the viewport. 100vw can overshoot by a classic
+       scrollbar's width, but only below a 22.5rem viewport, where scrollbars
+       overlay. The fixed overlays use 100% of the initial containing block. */
     max-inline-size: min(20rem, calc(100vw - (var(--nk-space) * 8)));
     padding: calc(var(--nk-space) * 1.5) calc(var(--nk-space) * 2.5);
     color: var(--nk-color-foreground);

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

@@ -106,7 +106,7 @@
     border-radius: var(--nk-radius-sm);
   }
   :where([data-nk="typeset"]) > table:not([data-nk], [data-typeset="off"]) {
-    width: 100%;
+    inline-size: 100%;
     border-collapse: collapse;
     font-size: 0.925em;
   }
@@ -250,7 +250,7 @@
     }
 
     table {
-      width: 100%;
+      inline-size: 100%;
       border-collapse: collapse;
       font-size: 0.925em;
     }
@@ -267,8 +267,8 @@
     }
 
     :where(img, video, svg) {
-      max-width: 100%;
-      height: auto;
+      max-inline-size: 100%;
+      block-size: auto;
       border-radius: var(--nk-radius-md);
     }
 

data/src/stylesheets/nitro_kit/reset.css

@@ -19,7 +19,7 @@
   /* Nitro-owned boxes never establish a min-content floor, so long slot
      content shrinks instead of overflowing its flex or grid parent. */
   :where([data-nk], [data-nk] [data-slot]) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where(html, :host) {
@@ -119,7 +119,7 @@
   }
 
   :where(input)::-webkit-date-and-time-value {
-    min-height: 1lh;
+    min-block-size: 1lh;
     text-align: inherit;
   }
 
@@ -134,7 +134,7 @@
 
   :where(input)::-webkit-inner-spin-button,
   :where(input)::-webkit-outer-spin-button {
-    height: auto;
+    block-size: auto;
   }
 
   :where(input):-moz-ui-invalid {
@@ -164,12 +164,12 @@
   }
 
   :where(img, video) {
-    max-width: 100%;
-    height: auto;
+    max-inline-size: 100%;
+    block-size: auto;
   }
 
   :where(hr) {
-    height: 0;
+    block-size: 0;
     color: inherit;
     border-top-width: var(--nk-border-width);
   }