nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.3

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

@@ -20,7 +20,7 @@
 
   :where([data-nk="data-section"] [data-slot="data-section-title"]) {
     font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-semibold);
+    font-weight: var(--nk-font-weight-bold);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }

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

@@ -5,7 +5,7 @@
   }
 
   :where([data-nk="details-table"] [data-slot="table-header"][scope="row"]) {
-    inline-size: clamp(8rem, 28%, 16rem);
+    inline-size: 40%;
     vertical-align: top;
   }
 
@@ -14,16 +14,16 @@
   }
 
   :where(
-    [data-nk="details-table"] [data-slot="details-table-number"],
-    [data-nk="details-table"] [data-slot="details-table-time"]
-  ) {
+      [data-nk="details-table"] [data-slot="details-table-number"],
+      [data-nk="details-table"] [data-slot="details-table-time"]
+    ) {
     font-variant-numeric: tabular-nums;
   }
 
   :where(
-    [data-nk="details-table"] [data-slot="details-table-link"],
-    [data-nk="details-table"] [data-slot="details-table-record"]
-  ) {
+      [data-nk="details-table"] [data-slot="details-table-link"],
+      [data-nk="details-table"] [data-slot="details-table-record"]
+    ) {
     color: var(--nk-color-info-content);
     text-decoration-line: underline;
     text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
@@ -31,9 +31,9 @@
   }
 
   :where(
-    [data-nk="details-table"] [data-slot="details-table-link"]:hover,
-    [data-nk="details-table"] [data-slot="details-table-record"]:hover
-  ) {
+      [data-nk="details-table"] [data-slot="details-table-link"]:hover,
+      [data-nk="details-table"] [data-slot="details-table-record"]:hover
+    ) {
     text-decoration-color: currentcolor;
   }
 
@@ -44,10 +44,10 @@
   }
 }
 
-@media (max-width: 36rem) {
-  @layer nitro-kit.compound {
+@media (min-width: 40rem) {
+  @layer nitro-kit.base {
     :where([data-nk="details-table"] [data-slot="table-header"][scope="row"]) {
-      inline-size: 40%;
+      inline-size: clamp(8rem, 28%, 16rem);
     }
   }
 }

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

@@ -29,13 +29,14 @@
 
   :where([data-nk="dialog"] [data-slot="dialog-title"]) {
     font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-weight: var(--nk-font-weight-bold);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="dialog"] [data-slot="dialog-description"]) {
     margin-block-start: calc(var(--nk-space) * 2);
+    margin-block-end: calc(var(--nk-space) * 4);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
@@ -45,8 +46,10 @@
   /* The close control precedes the panel content and sticks to the top of the
      scrolling panel so long content never scrolls it out of reach. */
   :where(
-    [data-nk="dialog"] > [data-slot="dialog-panel"] > [data-slot="dialog-close"]
-  ) {
+      [data-nk="dialog"]
+        > [data-slot="dialog-panel"]
+        > [data-slot="dialog-close"]
+    ) {
     position: sticky;
     z-index: 1;
     float: inline-end;

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

@@ -11,7 +11,9 @@
     min-inline-size: 12rem;
     max-inline-size: min(24rem, calc(100vw - (var(--nk-space) * 8)));
     max-block-size: min(24rem, calc(100dvh - (var(--nk-space) * 8)));
-    inset: var(--_nk-overlay-top, 50%) auto auto var(--_nk-overlay-left, 50%);
+    inset: var(--nk-space);
+    inset: var(--_nk-overlay-top, var(--nk-space)) auto auto
+      var(--_nk-overlay-left, var(--nk-space));
     margin: 0;
     padding: var(--nk-space);
     overflow: auto;
@@ -61,10 +63,10 @@
   }
 
   :where(
-    [data-nk="dropdown"]
-      [data-slot="dropdown-item"]
-      > [data-slot="dropdown-item-icon"]
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"]
+        > [data-slot="dropdown-item-icon"]
+    ) {
     display: inline-flex;
     flex: none;
     margin-inline-end: calc(var(--nk-space) * 2);
@@ -81,16 +83,17 @@
 
 @layer nitro-kit.variant {
   :where(
-    [data-nk="dropdown"] [data-slot="dropdown-item"][data-variant="destructive"]
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"][data-variant="destructive"]
+    ) {
     color: var(--nk-color-danger-content);
   }
 
   :where(
-    [data-nk="dropdown"]
-      [data-slot="dropdown-item"][data-variant="destructive"]
-      > [data-slot="dropdown-item-icon"]
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"][data-variant="destructive"]
+        > [data-slot="dropdown-item-icon"]
+    ) {
     color: inherit;
   }
 }
@@ -98,19 +101,22 @@
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
-      [data-nk="dropdown"]
-        [data-slot="dropdown-item"]:hover:not(:disabled, [aria-disabled="true"])
-    ) {
+        [data-nk="dropdown"]
+          [data-slot="dropdown-item"]:hover:not(
+            :disabled,
+            [aria-disabled="true"]
+          )
+      ) {
       background: var(--nk-color-muted);
     }
 
     :where(
-      [data-nk="dropdown"]
-        [data-slot="dropdown-item"][data-variant="destructive"]:hover:not(
-          :disabled,
-          [aria-disabled="true"]
-        )
-    ) {
+        [data-nk="dropdown"]
+          [data-slot="dropdown-item"][data-variant="destructive"]:hover:not(
+            :disabled,
+            [aria-disabled="true"]
+          )
+      ) {
       color: var(--nk-color-danger-foreground);
       background: var(--nk-color-danger);
     }
@@ -122,9 +128,9 @@
   }
 
   :where(
-    [data-nk="dropdown"]
-      [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
+    ) {
     cursor: not-allowed;
     opacity: 0.6;
   }

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,16 +20,21 @@
   }
 
   :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);
@@ -37,8 +45,8 @@
   }
 
   :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;
@@ -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;
   }
 
@@ -157,9 +161,9 @@
   }
 
   :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,16 +171,18 @@
   /* 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"]) {
@@ -185,8 +191,36 @@
   }
 }
 
-@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: 2rem;
+    block-size: 2rem;
     color: var(--nk-color-muted-foreground);
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
-    max-width: var(--nk-content-md);
+    max-inline-size: var(--nk-content-md);
     font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-weight: var(--nk-font-weight-bold);
     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

@@ -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"]
-  ) {
+      [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/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

@@ -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/input.css

@@ -1,7 +1,7 @@
 @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);
@@ -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)