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

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

@@ -1,12 +1,15 @@
 @layer nitro-kit.base {
   :where([data-nk="dropzone"]) {
+    position: relative;
     display: grid;
     gap: calc(var(--nk-space) * 3);
+    min-inline-size: 16rem;
     padding: calc(var(--nk-space) * 4);
     color: var(--nk-color-foreground);
     background: var(--nk-color-surface);
     border: calc(var(--nk-border-width) * 2) dashed var(--nk-color-border);
     border-radius: var(--nk-radius-lg);
+    container: nk-dropzone / inline-size;
   }
 
   :where([data-nk="dropzone"] > [data-slot="dropzone-message"]) {
@@ -17,28 +20,33 @@
   }
 
   :where(
-    [data-nk="dropzone"] [data-slot="dropzone-instruction"],
-    [data-nk="dropzone"] [data-slot="dropzone-description"],
-    [data-nk="dropzone"] [data-slot="dropzone-file-size"],
-    [data-nk="dropzone"] [data-slot="dropzone-file-status"],
-    [data-nk="dropzone"] > [data-slot="dropzone-status"]
-  ) {
+      [data-nk="dropzone"] [data-slot="dropzone-instruction"],
+      [data-nk="dropzone"] [data-slot="dropzone-compact-instruction"],
+      [data-nk="dropzone"] [data-slot="dropzone-description"],
+      [data-nk="dropzone"] [data-slot="dropzone-file-size"],
+      [data-nk="dropzone"] [data-slot="dropzone-file-status"],
+      [data-nk="dropzone"] > [data-slot="dropzone-status"]
+    ) {
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
   }
 
+  :where([data-nk="dropzone"] [data-slot="dropzone-compact-instruction"]) {
+    display: none;
+  }
+
   :where([data-nk="dropzone"] > [data-slot="dropzone-input"]) {
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
     color: var(--nk-color-foreground);
     background: var(--nk-color-canvas);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
-    [data-nk="dropzone"] > [data-slot="dropzone-input"]
-  )::file-selector-button {
+      [data-nk="dropzone"] > [data-slot="dropzone-input"]
+    )::file-selector-button {
     min-block-size: calc(
       var(--nk-control-height-md) - (var(--nk-border-width) * 2)
     );
@@ -55,14 +63,10 @@
      accessibility tree while the drop target is the only visible affordance.
      The label already points at the input, so clicking anywhere in the message
      still opens the file picker. */
-  :where([data-nk="dropzone"][data-presentation="minimal"]) {
-    position: relative;
-  }
-
   :where(
-    [data-nk="dropzone"][data-presentation="minimal"]
-      > [data-slot="dropzone-input"]
-  ) {
+      [data-nk="dropzone"][data-presentation="minimal"]
+        > [data-slot="dropzone-input"]
+    ) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -86,13 +90,13 @@
     padding: calc(var(--nk-space) * 2);
     background: var(--nk-color-canvas);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="dropzone"] [data-slot="dropzone-preview-image"]) {
     grid-row: span 2;
-    inline-size: 3rem;
-    block-size: 3rem;
+    inline-size: calc(var(--nk-space) * 12);
+    block-size: calc(var(--nk-space) * 12);
     object-fit: cover;
     border-radius: var(--nk-radius-sm);
   }
@@ -133,9 +137,9 @@
   }
 
   :where(
-    [data-nk="dropzone"][data-presentation="minimal"][data-state="idle"]
-      > [data-slot="dropzone-status"]
-  ) {
+      [data-nk="dropzone"][data-presentation="minimal"][data-state="idle"]
+        > [data-slot="dropzone-status"]
+    ) {
     text-align: center;
   }
 
@@ -148,18 +152,18 @@
   }
 
   :where([data-nk="dropzone"][data-state="error"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 
   :where([data-nk="dropzone"][data-state="disabled"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
-    [data-nk="dropzone"] > [data-slot="dropzone-input"]:focus-visible,
-    [data-nk="dropzone"] [data-slot="dropzone-remove-control"]:focus-visible
-  ) {
+      [data-nk="dropzone"] > [data-slot="dropzone-input"]:focus-visible,
+      [data-nk="dropzone"] [data-slot="dropzone-remove-control"]:focus-visible
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }
@@ -167,26 +171,56 @@
   /* The clipped input cannot carry a visible ring, so the drop target it
      labels wears the focus treatment on its behalf. */
   :where(
-    [data-nk="dropzone"][data-presentation="minimal"]:has(
-        > [data-slot="dropzone-input"]:focus-visible
-      )
-  ) {
+      [data-nk="dropzone"][data-presentation="minimal"]:has(
+          > [data-slot="dropzone-input"]:focus-visible
+        )
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }
 
-  :where([data-nk="dropzone"] [data-slot="dropzone-remove-control"]:hover) {
-    background: var(--nk-color-surface-hover);
+  @media (hover: hover) {
+    :where([data-nk="dropzone"] [data-slot="dropzone-remove-control"]:hover) {
+      background: var(--nk-color-surface-hover);
+    }
   }
 
   :where([data-nk="dropzone"] > [data-slot="dropzone-error"]) {
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     font-size: var(--nk-text-sm);
   }
 }
 
-@media (max-width: 40rem) {
+@container nk-dropzone (max-width: 24rem) {
   @layer nitro-kit.base {
+    :where([data-nk="dropzone"] [data-slot="dropzone-instruction"]) {
+      display: none;
+    }
+
+    :where([data-nk="dropzone"] [data-slot="dropzone-compact-instruction"]) {
+      display: inline;
+    }
+
+    :where([data-nk="dropzone"] > [data-slot="dropzone-input"]) {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      white-space: nowrap;
+      clip-path: inset(50%);
+    }
+
+    :where(
+        [data-nk="dropzone"][data-state="idle"] > [data-slot="dropzone-status"]
+      ) {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      white-space: nowrap;
+      clip-path: inset(50%);
+    }
+
     :where([data-nk="dropzone"] [data-slot="dropzone-preview"]) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
@@ -195,4 +229,13 @@
       display: none;
     }
   }
+
+  @layer nitro-kit.state {
+    :where(
+        [data-nk="dropzone"]:has(> [data-slot="dropzone-input"]:focus-visible)
+      ) {
+      outline: var(--nk-focus-width) solid var(--nk-color-focus);
+      outline-offset: var(--nk-focus-offset);
+    }
+  }
 }

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

@@ -3,7 +3,7 @@
     display: grid;
     justify-items: center;
     gap: calc(var(--nk-space) * 3);
-    width: 100%;
+    inline-size: 100%;
     padding: calc(var(--nk-space) * 10) calc(var(--nk-space) * 5);
     color: var(--nk-color-foreground);
     text-align: center;
@@ -13,21 +13,21 @@
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-icon"]) {
-    width: 2rem;
-    height: 2rem;
+    inline-size: calc(var(--nk-space) * 8);
+    block-size: calc(var(--nk-space) * 8);
     color: var(--nk-color-muted-foreground);
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
-    max-width: var(--nk-content-md);
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    max-inline-size: var(--nk-content-md);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-description"]) {
-    max-width: var(--nk-content-md);
+    max-inline-size: var(--nk-content-md);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);

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

@@ -18,7 +18,7 @@
 
   :where([data-nk="field"] > [data-slot="field-error"]) {
     padding: 0;
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     font-size: var(--nk-text-sm);
     list-style: none;
   }
@@ -30,50 +30,54 @@
 
 @layer nitro-kit.compound {
   :where(
-    [data-nk="field"] > [data-slot="field-label"] + [data-slot="field-control"]
-  ) {
+      [data-nk="field"]
+        > [data-slot="field-label"]
+        + [data-slot="field-control"]
+    ) {
     margin-block-start: calc(var(--nk-space) * 2);
   }
 
   :where(
-    [data-nk="field"]
-      > [data-slot="field-label"]
-      + [data-slot="field-description"]
-  ) {
+      [data-nk="field"]
+        > [data-slot="field-label"]
+        + [data-slot="field-description"]
+    ) {
     margin-block-start: var(--nk-space);
   }
 
   :where(
-    [data-nk="field"]
-      > [data-slot="field-description"]
-      + [data-slot="field-control"]
-  ) {
+      [data-nk="field"]
+        > [data-slot="field-description"]
+        + [data-slot="field-control"]
+    ) {
     margin-block-start: calc(var(--nk-space) * 3);
   }
 
   :where(
-    [data-nk="field"]
-      > [data-slot="field-control"]
-      + [data-slot="field-description"],
-    [data-nk="field"] > [data-slot="field-control"] + [data-slot="field-error"],
-    [data-nk="field"]
-      > [data-slot="field-description"]
-      + [data-slot="field-error"]
-  ) {
+      [data-nk="field"]
+        > [data-slot="field-control"]
+        + [data-slot="field-description"],
+      [data-nk="field"]
+        > [data-slot="field-control"]
+        + [data-slot="field-error"],
+      [data-nk="field"]
+        > [data-slot="field-description"]
+        + [data-slot="field-error"]
+    ) {
     margin-block-start: calc(var(--nk-space) * 2);
   }
 }
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="field"][data-state="invalid"]
-      > [data-slot="field-control"][data-nk="select"]
-      > [data-slot="select-control"],
-    [data-nk="field"][data-state="invalid"]
-      > [data-slot="field-control"][data-nk="textarea"],
-    [data-nk="field"][data-state="invalid"]
-      > [data-slot="field-control"][data-nk="input"]
-  ) {
-    border-color: var(--nk-color-danger);
+      [data-nk="field"][data-state="invalid"]
+        > [data-slot="field-control"][data-nk="select"]
+        > [data-slot="select-control"],
+      [data-nk="field"][data-state="invalid"]
+        > [data-slot="field-control"][data-nk="textarea"],
+      [data-nk="field"][data-state="invalid"]
+        > [data-slot="field-control"][data-nk="input"]
+    ) {
+    border-color: var(--nk-color-destructive);
   }
 }

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

@@ -3,4 +3,17 @@
     display: grid;
     gap: calc(var(--nk-space) * 6);
   }
+
+  /* Buttons keep their intrinsic width instead of stretching to the grid
+     column, so a trailing submit stays left-aligned. */
+  :where([data-nk="field-group"] > [data-nk="button"]) {
+    justify-self: start;
+  }
+
+  /* A group keeps the same rhythm at either boundary as the fields inside it,
+     so introductory copy and trailing actions never read as attached to the
+     nearest control. */
+  :where(* + [data-nk="field-group"], [data-nk="field-group"] + *) {
+    margin-block-start: calc(var(--nk-space) * 6);
+  }
 }

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

@@ -8,8 +8,8 @@
 
   :where([data-nk="fieldset"] > [data-slot="fieldset-legend"]) {
     padding: 0;
-    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);
   }
 
@@ -25,4 +25,10 @@
     gap: calc(var(--nk-space) * 6);
     margin-block-start: calc(var(--nk-space) * 6);
   }
+
+  :where(
+      [data-nk="fieldset"] > [data-slot="fieldset-fields"] > [data-nk="button"]
+    ) {
+    justify-self: start;
+  }
 }

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

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="flex"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-direction: var(--_nk-flex-direction);
     flex-wrap: var(--_nk-flex-wrap);
     gap: var(--_nk-layout-gap);

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

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="grid"]) {
     display: grid;
-    min-width: 0;
+    min-inline-size: 0;
     grid-template-columns: repeat(var(--_nk-grid-columns), minmax(0, 1fr));
     gap: var(--_nk-layout-gap);
   }

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

@@ -9,18 +9,18 @@
 
 @layer nitro-kit.size {
   :where([data-nk="icon"][data-size="xs"]) {
-    --_nk-icon-size: 0.75rem;
+    --_nk-icon-size: var(--nk-icon-size-xs);
   }
   :where([data-nk="icon"][data-size="sm"]) {
-    --_nk-icon-size: 1rem;
+    --_nk-icon-size: var(--nk-icon-size-sm);
   }
   :where([data-nk="icon"][data-size="md"]) {
-    --_nk-icon-size: 1.25rem;
+    --_nk-icon-size: var(--nk-icon-size-md);
   }
   :where([data-nk="icon"][data-size="lg"]) {
-    --_nk-icon-size: 1.75rem;
+    --_nk-icon-size: var(--nk-icon-size-lg);
   }
   :where([data-nk="icon"][data-size="xl"]) {
-    --_nk-icon-size: 2.25rem;
+    --_nk-icon-size: var(--nk-icon-size-xl);
   }
 }

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

@@ -1,24 +1,24 @@
 @layer nitro-kit.base {
   :where(
-    [data-nk="input"]:not([type="checkbox"], [type="radio"], [type="hidden"])
-  ) {
+      [data-nk="input"]:not([type="checkbox"], [type="radio"], [type="hidden"])
+    ) {
     display: block;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
-    padding-inline: calc(var(--nk-space) * 3);
+    padding-inline: var(--nk-control-padding-inline);
     color: var(--nk-color-foreground);
     font-size: var(--nk-text-base);
     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);
   }
 
   :where([data-nk="input"][type="checkbox"], [data-nk="input"][type="radio"]) {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--nk-choice-size-md);
+    block-size: var(--nk-choice-size-md);
     accent-color: var(--nk-color-primary);
   }
 
@@ -36,6 +36,13 @@
     padding-inline-start: 0;
   }
 
+  /* Password masking glyphs come from the user agent and are not guaranteed
+     to exist in a consumer's subsetted brand font. Keep them on a complete
+     platform font stack so they cannot render as missing-glyph boxes. */
+  :where([data-nk="input"][type="password"]) {
+    font-family: ui-sans-serif, system-ui, sans-serif;
+  }
+
   :where([data-nk="input"][type="file"])::file-selector-button {
     min-block-size: calc(
       var(--nk-control-height-md) - (var(--nk-border-width) * 2)
@@ -48,6 +55,33 @@
     border-inline-end: var(--nk-border-width) solid
       var(--nk-button-default-border);
   }
+
+  /* Data-entry controls read --nk-text-base below the md breakpoint, where
+     a focused control under 16px would zoom the viewport, and --nk-text-sm
+     from md up, beside 14px labels and body text. */
+  @media (min-width: 48rem) {
+    :where(
+        [data-nk="input"]:not(
+            [type="checkbox"],
+            [type="radio"],
+            [type="hidden"]
+          )
+      ) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+        [data-nk="input"]:not(
+            [type="checkbox"],
+            [type="radio"],
+            [type="hidden"]
+          )
+      ) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -71,10 +105,10 @@
 
   :where([data-nk="input"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="input"][aria-invalid="true"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }