nitro_kit 2.0.0.beta.1 → 2.0.0.beta.3

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

@@ -357,6 +357,209 @@
 }
 
 @layer nitro-kit.compound {
+  :where(
+      [data-nk="app-shell"]
+        > [data-slot="app-shell-sidebar"]
+        > [data-slot="app-shell-sidebar-toggle"]
+    ) {
+    display: none;
+  }
+
+  @media (width >= 48rem) {
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+      ) {
+      --_nk-shell-rail-width: calc(var(--nk-space) * 16);
+      --_nk-shell-panel-width: var(--nk-app-shell-sidebar-width);
+      --_nk-shell-label-clip: none;
+      transition: grid-template-columns var(--nk-duration-fast) var(--nk-ease);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+      ) {
+      z-index: 30;
+      inline-size: var(--_nk-shell-panel-width);
+      background-color: var(--nk-app-shell-background);
+      background-image: linear-gradient(
+        var(--nk-app-shell-sidebar-background),
+        var(--nk-app-shell-sidebar-background)
+      );
+      transition: inline-size var(--nk-duration-fast) var(--nk-ease);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-header"]
+          > [data-slot="app-shell-brand"]:has(
+            > [data-slot="app-shell-brand-icon"]
+          )
+      ) {
+      gap: calc(var(--nk-space) * 2);
+      padding-inline: calc(var(--nk-space) * 6);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-header"]
+          > [data-slot="app-shell-brand"]
+          > [data-slot="app-shell-brand-icon"]
+      ) {
+      flex: none;
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-header"]
+          > [data-slot="app-shell-brand"]
+          > [data-slot="app-shell-brand-content"]
+      ) {
+      min-inline-size: 0;
+      overflow: hidden;
+      clip-path: var(--_nk-shell-label-clip, none);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-header"]
+          > [data-slot="app-shell-brand"]
+      ) {
+      z-index: 30;
+      inline-size: var(--_nk-shell-panel-width);
+      overflow: hidden;
+      white-space: nowrap;
+      background-color: var(--nk-app-shell-background);
+      background-image: linear-gradient(
+        var(--nk-app-shell-sidebar-background),
+        var(--nk-app-shell-sidebar-background)
+      );
+      transition: inline-size var(--nk-duration-fast) var(--nk-ease);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          > [data-slot="app-shell-navigation"]
+      ) {
+      flex: 1 1 0;
+      inline-size: calc(
+        var(--nk-app-shell-sidebar-width) - var(--nk-border-width)
+      );
+      min-inline-size: calc(
+        var(--nk-app-shell-sidebar-width) - var(--nk-border-width)
+      );
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          > [data-slot="app-shell-sidebar-toggle"]
+      ) {
+      display: inline-flex;
+      flex: none;
+      align-self: flex-start;
+      margin: calc(var(--nk-space) * 3);
+      margin-inline-start: calc(
+        (var(--_nk-shell-rail-width) - var(--nk-control-height-md)) / 2
+      );
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-item-link"]
+      ) {
+      inline-size: min(
+        100%,
+        calc(
+          var(--_nk-shell-panel-width) - (var(--_nk-app-navigation-inset) * 2)
+        )
+      );
+      overflow: hidden;
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"][data-nk--app-shell-pinned-value="false"]
+      ) {
+      --_nk-shell-panel-width: var(--_nk-shell-rail-width);
+      grid-template-columns: var(--_nk-shell-rail-width) minmax(0, 1fr);
+    }
+
+    /* Keep the full navigation geometry: only its labels disappear. Focus
+       reveals arbitrary header/footer content before it can be activated. */
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"][data-nk--app-shell-pinned-value="false"]:not(
+            :has(
+                > [data-slot="app-shell-sidebar"]
+                  > [data-slot="app-shell-navigation"]:focus-within,
+                > [data-slot="app-shell-header"]
+                  > [data-slot="app-shell-brand"]:focus-within
+              )
+          )
+      ) {
+      --_nk-shell-label-clip: inset(50%);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-item-label"],
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-section-label"],
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-item-badge"],
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-item-icon-end"],
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-header"],
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"]
+          [data-slot="app-navigation-footer"]
+      ) {
+      clip-path: var(--_nk-shell-label-clip, none);
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]:has(
+            > [data-slot="app-shell-sidebar"]
+              > [data-slot="app-shell-navigation"]:focus-within,
+            > [data-slot="app-shell-header"]
+              > [data-slot="app-shell-brand"]:focus-within
+          )
+      ) {
+      --_nk-shell-panel-width: var(--nk-app-shell-sidebar-width);
+      --_nk-shell-label-clip: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      :where(
+          [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"]:not(
+              [data-nk--app-shell-hover-suppressed-value="true"]
+            ):has(
+              > [data-slot="app-shell-sidebar"]
+                > [data-slot="app-shell-navigation"]:hover,
+              > [data-slot="app-shell-header"]
+                > [data-slot="app-shell-brand"]:hover
+            )
+        ) {
+        --_nk-shell-panel-width: var(--nk-app-shell-sidebar-width);
+        --_nk-shell-label-clip: none;
+      }
+    }
+
+    :where(
+        [data-nk="app-shell"][data-layout="sidebar"][data-enhanced][data-nk--app-shell-collapsible-value="true"][data-nk--app-shell-pinned-value="false"]
+          > [data-slot="app-shell-sidebar"]
+      ) {
+      box-shadow: var(--nk-shadow-md);
+    }
+  }
+
   @media (width < 48rem) {
     :where([data-nk="app-shell"]) {
       grid-template-rows: auto auto minmax(0, 1fr);
@@ -574,6 +777,12 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(
+        [data-nk="app-shell"][data-nk--app-shell-collapsible-value="true"],
+        [data-nk="app-shell"][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-sidebar"],
+        [data-nk="app-shell"][data-nk--app-shell-collapsible-value="true"]
+          > [data-slot="app-shell-header"]
+          > [data-slot="app-shell-brand"],
         [data-nk="app-shell"] > [data-slot="app-shell-skip-link"],
         [data-nk="app-shell"] > [data-slot="app-shell-dialog"],
         [data-nk="app-shell"]

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

@@ -52,6 +52,16 @@
     z-index: 1;
     object-fit: cover;
   }
+
+  /* Derived initials are two characters. Explicit fallbacks may run to four,
+     so longer ones step the type down instead of clipping mid-letter. */
+  :where([data-nk="avatar"] > [data-slot="avatar-fallback"][data-length="3"]) {
+    font-size: 80%;
+  }
+
+  :where([data-nk="avatar"] > [data-slot="avatar-fallback"][data-length="4"]) {
+    font-size: 62.5%;
+  }
 }
 
 @layer nitro-kit.state {

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

@@ -46,7 +46,9 @@
   }
 
   /* The chip is one of the heads: same fill as the avatar fallbacks and the
-     same hairline ring, drawn as a real border since nothing overlaps it. */
+     same hairline ring, drawn as a real border since nothing overlaps it.
+     Its size is a minimum, so a wide count grows it into a pill instead of
+     spilling past the circle. */
   :where([data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]) {
     /* Preceding avatars are positioned, so the overflow chip must be too or
        their paint order covers its leading "+". */
@@ -56,16 +58,18 @@
     font-weight: var(--nk-font-weight-semibold);
     line-height: 1;
     color: var(--nk-color-muted-foreground);
+    white-space: nowrap;
     border: var(--nk-border-width) solid
       color-mix(in oklab, var(--nk-color-foreground) 10%, transparent);
     border-radius: var(--nk-radius-full);
+    padding-inline: var(--nk-space);
   }
 
   :where(
       [data-nk="avatar-stack"][data-size="xs"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    inline-size: var(--nk-avatar-size-xs);
+    min-inline-size: var(--nk-avatar-size-xs);
     block-size: var(--nk-avatar-size-xs);
     font-size: calc(var(--nk-text-xs) * 0.875);
   }
@@ -74,7 +78,7 @@
       [data-nk="avatar-stack"][data-size="sm"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    inline-size: var(--nk-avatar-size-sm);
+    min-inline-size: var(--nk-avatar-size-sm);
     block-size: var(--nk-avatar-size-sm);
     font-size: var(--nk-text-xs);
   }
@@ -83,7 +87,7 @@
       [data-nk="avatar-stack"][data-size="md"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    inline-size: var(--nk-avatar-size-md);
+    min-inline-size: var(--nk-avatar-size-md);
     block-size: var(--nk-avatar-size-md);
     font-size: var(--nk-text-sm);
   }
@@ -92,7 +96,7 @@
       [data-nk="avatar-stack"][data-size="lg"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    inline-size: var(--nk-avatar-size-lg);
+    min-inline-size: var(--nk-avatar-size-lg);
     block-size: var(--nk-avatar-size-lg);
     font-size: var(--nk-text-base);
   }

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

@@ -1,26 +1,88 @@
 @layer nitro-kit.base {
   :where([data-nk="card"]) {
     --_nk-card-padding: calc(var(--nk-space) * 6);
+    --_nk-card-gap: calc(var(--nk-space) * 4);
+    --_nk-card-radius: var(--nk-radius-xl);
+    --_nk-card-title-size: var(--nk-text-base);
+    --_nk-card-title-leading: calc(
+      var(--_nk-card-title-size) * var(--nk-leading-tight)
+    );
 
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: calc(var(--nk-space) * 4);
+    gap: var(--_nk-card-gap);
     padding: var(--_nk-card-padding);
     color: var(--nk-color-foreground);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-lg);
-    box-shadow: var(--nk-shadow-sm);
+    border-radius: var(--_nk-card-radius);
+    box-shadow: var(--nk-shadow-xs);
   }
 
-  :where([data-nk="card"] > [data-slot="card-title"]) {
-    font-size: var(--nk-title-surface-size);
-    font-weight: var(--nk-title-surface-weight);
-    line-height: var(--nk-leading-tight);
+  :where(
+    [data-nk="card"] > [data-slot="card-title"],
+    [data-nk="card"] > [data-slot="card-header"] > [data-slot="card-title"]
+  ) {
+    font-size: var(--_nk-card-title-size);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--_nk-card-title-leading);
     text-wrap: balance;
   }
 
+  :where(
+    [data-nk="card"] > [data-slot="card-description"],
+    [data-nk="card"]
+      > [data-slot="card-header"]
+      > [data-slot="card-description"]
+  ) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-normal);
+    text-wrap: pretty;
+  }
+
+  /* The header pairs a title and description with trailing actions centred
+     beside them. Actions take negative block margins so a small button never
+     makes a title-only header taller than its title line. */
+  :where([data-nk="card"] > [data-slot="card-header"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: calc(var(--nk-space) * 4);
+    align-items: start;
+  }
+
+  :where(
+    [data-nk="card"]
+      > [data-slot="card-header"]
+      > [data-slot="card-title"]
+      + [data-slot="card-description"]
+  ) {
+    margin-block-start: calc(var(--nk-space) * 1);
+  }
+
+  :where([data-nk="card"] > [data-slot="card-header"] > *) {
+    grid-column: 1;
+  }
+
+  :where(
+    [data-nk="card"] > [data-slot="card-header"] > [data-slot="card-actions"]
+  ) {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: center;
+    margin-block: calc(
+      (var(--_nk-card-title-leading) - var(--nk-control-height-sm)) / 2
+    );
+  }
+
+  :where([data-nk="card"] [data-slot="card-actions"]) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: calc(var(--nk-space) * 2);
+  }
+
   :where([data-nk="card"] > [data-slot="card-body"]) {
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
@@ -33,10 +95,96 @@
     align-items: center;
     flex-wrap: wrap;
     gap: calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-normal);
+    /* Raw text becomes an anonymous flex item. Include emergency breaks in
+       its intrinsic width so long URLs can shrink with the footer. */
+    overflow-wrap: anywhere;
+  }
+
+  :where(
+    [data-nk="card"] > [data-slot="card-footer"] > [data-slot="card-actions"]
+  ) {
+    margin-inline-start: auto;
+  }
+}
+
+@layer nitro-kit.variant {
+  :where([data-nk="card"][data-variant="outline"]) {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :where([data-nk="card"][data-variant="muted"]) {
+    background: color-mix(in oklab, var(--nk-color-foreground) 4%, transparent);
+    box-shadow: none;
+  }
+}
+
+@layer nitro-kit.size {
+  :where([data-nk="card"][data-size="sm"]) {
+    --_nk-card-padding: calc(var(--nk-space) * 4);
+    --_nk-card-gap: calc(var(--nk-space) * 3);
+    --_nk-card-radius: var(--nk-radius-lg);
+    --_nk-card-title-size: var(--nk-text-sm);
+  }
+
+  :where([data-nk="card"][data-size="lg"]) {
+    --_nk-card-padding: calc(var(--nk-space) * 8);
+    --_nk-card-gap: calc(var(--nk-space) * 6);
+    --_nk-card-radius: calc(var(--nk-radius-xl) + var(--nk-space));
+    --_nk-card-title-size: var(--nk-text-lg);
   }
 }
 
 @layer nitro-kit.compound {
+  /* A description directly under a root-level title belongs to it. */
+  :where(
+    [data-nk="card"] > [data-slot="card-title"] + [data-slot="card-description"]
+  ) {
+    margin-block-start: calc(var(--nk-space) * 1 - var(--_nk-card-gap));
+  }
+
+  /* A section set apart by a divider at the card's edge is a band: the space
+     between the band and the edge matches the space between the band and its
+     divider, so a footer's actions or a header's title sit evenly. Full
+     regions keep the padding because they bleed through it. */
+  :where(
+    [data-nk="card"]:has(
+      > :first-child:not([data-slot="card-full"]):not(
+          [data-slot="card-divider"]
+        )
+        + [data-slot="card-divider"]
+    )
+  ) {
+    padding-block-start: var(--_nk-card-gap);
+  }
+
+  :where(
+    [data-nk="card"]:has(
+      > [data-slot="card-divider"]
+        + :last-child:not([data-slot="card-full"]):not(
+          [data-slot="card-divider"]
+        )
+    )
+  ) {
+    padding-block-end: var(--_nk-card-gap);
+  }
+
+  /* When a parent stretches the card, such as a grid row, the spare height
+     goes above a trailing footer and its divider, keeping actions on the
+     card's bottom edge across a row. */
+  :where(
+    [data-nk="card"]
+      > :not([data-slot="card-divider"])
+      + [data-slot="card-footer"]:last-child,
+    [data-nk="card"]
+      > [data-slot="card-divider"]:has(+ [data-slot="card-footer"]:last-child)
+  ) {
+    margin-block-start: auto;
+  }
+
   /* Only the region that bleeds to the edge clips, never the card itself, so
      an edge-to-edge image cannot break the card's corners while tooltips,
      dropdowns, and other overlays inside a card stay free to escape its box. */
@@ -48,27 +196,70 @@
   :where([data-nk="card"] > [data-slot="card-full"]:first-child) {
     margin-block-start: calc(var(--_nk-card-padding) * -1);
     border-start-start-radius: calc(
-      var(--nk-radius-lg) - var(--nk-border-width)
+      var(--_nk-card-radius) - var(--nk-border-width)
+    );
+    border-start-end-radius: calc(
+      var(--_nk-card-radius) - var(--nk-border-width)
     );
-    border-start-end-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
   }
 
   :where([data-nk="card"] > [data-slot="card-full"]:last-child) {
     margin-block-end: calc(var(--_nk-card-padding) * -1);
-    border-end-start-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
-    border-end-end-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
+    border-end-start-radius: calc(
+      var(--_nk-card-radius) - var(--nk-border-width)
+    );
+    border-end-end-radius: calc(
+      var(--_nk-card-radius) - var(--nk-border-width)
+    );
   }
 
   /* Full-width media fills the card edge to edge, so the card owns the corner
      radius and the media drops its own. */
   :where(
-      [data-nk="card"]
-        > [data-slot="card-full"]
-        :is(img, [data-nk="progressive-image"])
-    ) {
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      :is(img, [data-nk="progressive-image"])
+  ) {
     border-radius: 0;
   }
 
+  /* A table bleeding to the card's edges keeps its first and last columns
+     and its caption on the card's content gutter. */
+  :where(
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      > [data-nk="table"]
+      [data-slot="table-header"]:first-child,
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      > [data-nk="table"]
+      [data-slot="table-cell"]:first-child
+  ) {
+    padding-inline-start: var(--_nk-card-padding);
+  }
+
+  :where(
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      > [data-nk="table"]
+      [data-slot="table-header"]:last-child,
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      > [data-nk="table"]
+      [data-slot="table-cell"]:last-child
+  ) {
+    padding-inline-end: var(--_nk-card-padding);
+  }
+
+  :where(
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      > [data-nk="table"]
+      [data-slot="table-caption"]
+  ) {
+    padding-inline: var(--_nk-card-padding);
+  }
+
   :where([data-nk="card"] > [data-slot="card-divider"]) {
     margin-inline: calc(var(--_nk-card-padding) * -1);
     border-block-start: var(--nk-border-width) solid var(--nk-color-border);

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

@@ -13,7 +13,7 @@
     );
     border: var(--nk-border-width) solid
       color-mix(in oklab, var(--nk-color-destructive) 50%, transparent);
-    border-radius: var(--nk-radius-lg);
+    border-radius: var(--nk-radius-xl);
   }
 
   :where([data-nk="danger-zone"] > [data-slot="danger-zone-header"]) {

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

@@ -443,3 +443,18 @@
     }
   }
 }
+
+@layer nitro-kit.base {
+  /* Message children are grid items placed at start, so they size to their
+     content; cap them at the cell so one long word wraps inside the target. */
+  :where(
+      [data-nk="dropzone"]
+        [data-slot="dropzone-message"]
+        > [data-slot="dropzone-title"],
+      [data-nk="dropzone"]
+        [data-slot="dropzone-message"]
+        > [data-slot="dropzone-description"]
+    ) {
+    max-inline-size: 100%;
+  }
+}

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

@@ -9,7 +9,7 @@
     text-align: center;
     background: var(--nk-color-surface);
     border: var(--nk-border-width) dashed var(--nk-color-border);
-    border-radius: var(--nk-radius-lg);
+    border-radius: var(--nk-radius-xl);
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-icon"]) {
@@ -19,7 +19,7 @@
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
-    max-inline-size: var(--nk-content-md);
+    max-inline-size: min(100%, var(--nk-content-md));
     font-size: var(--nk-title-surface-size);
     font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
@@ -27,7 +27,7 @@
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-description"]) {
-    max-inline-size: var(--nk-content-md);
+    max-inline-size: min(100%, 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_group.css

@@ -12,8 +12,12 @@
 
   /* 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"] + *) {
+     nearest control. Hidden inputs, such as the ones Rails emits at the top of
+     every form, are not visible neighbours and do not count. */
+  :where(
+    :not(input[type="hidden"]) + [data-nk="field-group"],
+    [data-nk="field-group"] + :not(input[type="hidden"])
+  ) {
     margin-block-start: calc(var(--nk-space) * 6);
   }
 }

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

@@ -28,6 +28,9 @@
   @media (width < 48rem) {
     :where([data-nk="pagination-bar"]) {
       flex-direction: column;
+      /* A wrapping column sizes its line to the widest item, so stretch
+         could not narrow anything; one column never needs to wrap. */
+      flex-wrap: nowrap;
       align-items: stretch;
     }
 

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

@@ -70,6 +70,8 @@
     font-size: var(--nk-text-sm);
     text-align: center;
     text-wrap: pretty;
+    /* The alt text is an anonymous grid item with a min-content floor. */
+    overflow-wrap: anywhere;
   }
 }
 

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

@@ -29,6 +29,8 @@
     display: flex;
     gap: calc(var(--nk-space) * 2);
     align-items: center;
+    /* The label text is an anonymous flex item with a min-content floor. */
+    overflow-wrap: anywhere;
     min-block-size: var(--nk-control-height-sm);
     padding: var(--nk-space) calc(var(--nk-space) * 2);
     color: var(--nk-color-muted-foreground);