nitro_kit 2.0.0.alpha.6 → 2.0.0.beta.2

data/app/assets/stylesheets/nitro_kit.css

@@ -40,8 +40,9 @@
 
     /* The title scale. Four roles cover every owned title and legend: page
        for the one page heading, section for full-width section headers,
-       surface for cards, dialogs, sheets, empty states, and fieldsets, and
-       compact for control-group legends and status titles. */
+       surface for dialogs, sheets, empty states, and fieldsets, and compact
+       for control-group legends and status titles. Card titles scale with
+       the card's own size instead. */
     --nk-title-page-size: var(--nk-text-2xl);
     --nk-title-page-weight: var(--nk-font-weight-bold);
     --nk-title-section-size: var(--nk-text-xl);
@@ -654,9 +655,19 @@
   }
 
   /* Nitro-owned boxes never establish a min-content floor, so long slot
-     content shrinks instead of overflowing its flex or grid parent. */
+     content shrinks instead of overflowing its flex or grid parent, and a
+     word too long for its line breaks rather than painting past the box.
+     `break-word` leaves intrinsic sizing alone, so nothing shrinks that would
+     not have shrunk already; `nowrap` slots keep their single line. */
   :where([data-nk], [data-nk] [data-slot]) {
     min-inline-size: 0;
+    overflow-wrap: break-word;
+  }
+
+  /* A legend sizes to its content regardless of its fieldset, so a long
+     label would widen the page; cap it and let it wrap like any label. */
+  :where([data-nk] legend) {
+    max-inline-size: 100%;
   }
 
   :where(html, :host) {
@@ -1105,6 +1116,8 @@
     min-block-size: var(--nk-control-height-md);
     margin: var(--nk-space) 0;
     padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    /* The label text is an anonymous flex item with a min-content floor. */
+    overflow-wrap: anywhere;
     list-style: none;
     user-select: none;
     cursor: pointer;
@@ -1162,7 +1175,8 @@
     border-radius: var(--nk-radius-lg);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
-      background-color var(--nk-duration-normal) var(--nk-ease);
+      background-color var(--nk-duration-normal) var(--nk-ease),
+      inline-size var(--nk-duration-fast) var(--nk-ease);
   }
 
   :where([data-nk="app-navigation"] [data-slot="app-navigation-item-label"]) {
@@ -1614,6 +1628,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);
@@ -1831,6 +2048,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"]
@@ -2052,6 +2275,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 {
@@ -2133,7 +2366,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 "+". */
@@ -2143,16 +2378,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);
   }
@@ -2161,7 +2398,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);
   }
@@ -2170,7 +2407,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);
   }
@@ -2179,7 +2416,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);
   }
@@ -2666,26 +2903,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);
@@ -2698,10 +2997,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. */
@@ -2713,27 +3098,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);
@@ -3616,7 +4044,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"]) {
@@ -4464,6 +4892,21 @@
   }
 }
 
+@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%;
+  }
+}
+
 /* Source: src/stylesheets/nitro_kit/components/empty_state.css */
 @layer nitro-kit.base {
   :where([data-nk="empty-state"]) {
@@ -4476,7 +4919,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"]) {
@@ -4486,7 +4929,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);
@@ -4494,7 +4937,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);
@@ -4619,8 +5062,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);
   }
 }
@@ -6238,6 +6685,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;
     }
 
@@ -6506,6 +6956,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;
   }
 }
 
@@ -6991,6 +7443,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);
@@ -7297,11 +7751,11 @@
     align-content: start;
     gap: calc(var(--nk-space) * 2);
     min-block-size: 100%;
-    padding: calc(var(--nk-space) * 5);
+    padding: calc(var(--nk-space) * 6);
     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-radius-xl);
+    box-shadow: var(--nk-shadow-xs);
   }
 
   :where([data-nk="stat-grid"] [data-slot="stat-grid-label"]) {
@@ -7313,7 +7767,7 @@
   :where([data-nk="stat-grid"] [data-slot="stat-grid-value"]) {
     font-size: var(--nk-text-2xl);
     font-variant-numeric: tabular-nums;
-    font-weight: var(--nk-font-weight-bold);
+    font-weight: var(--nk-font-weight-semibold);
     line-height: var(--nk-leading-tight);
     overflow-wrap: anywhere;
   }
@@ -7935,12 +8389,24 @@
     justify-content: flex-end;
     margin-inline-start: auto;
   }
+
+  /* Application content in a region is a flex item; without this a heading
+     holding one long word keeps its min-content width and widens the page. */
+  :where(
+      [data-nk="toolbar"] > [data-slot="toolbar-leading"] > *,
+      [data-nk="toolbar"] > [data-slot="toolbar-trailing"] > *
+    ) {
+    min-inline-size: 0;
+  }
 }
 
 @layer nitro-kit.state {
   @media (width < 48rem) {
     :where([data-nk="toolbar"]) {
       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;
     }
 
@@ -7973,6 +8439,9 @@
     line-height: var(--nk-leading-normal);
     text-wrap: pretty;
     pointer-events: auto;
+    /* Hidden tooltips leave layout entirely; a merely invisible one still
+       widens the page when it hangs past the viewport edge. */
+    display: none;
     visibility: hidden;
     background: var(--nk-color-elevated);
     border: var(--nk-border-width) solid var(--nk-color-border);
@@ -7981,7 +8450,8 @@
     opacity: 0;
     transition:
       opacity var(--nk-duration-fast) var(--nk-ease),
-      visibility var(--nk-duration-fast) var(--nk-ease) allow-discrete;
+      visibility var(--nk-duration-fast) var(--nk-ease) allow-discrete,
+      display var(--nk-duration-fast) var(--nk-ease) allow-discrete;
   }
 
   :where([data-nk="tooltip"] > [data-slot="tooltip-content"]::before) {
@@ -8065,8 +8535,13 @@
       [data-nk="tooltip"]:not([data-dismissed]):focus-within
         > [data-slot="tooltip-content"]
     ) {
+    display: block;
     visibility: visible;
     opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
   }
 
   @media (hover: hover) {
@@ -8074,8 +8549,13 @@
         [data-nk="tooltip"]:not([data-dismissed]):hover
           > [data-slot="tooltip-content"]
       ) {
+      display: block;
       visibility: visible;
       opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
     }
   }
 
@@ -8207,6 +8687,9 @@
     padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
     text-align: start;
     vertical-align: top;
+    /* Prose tables have no scroll wrapper, so an unbroken email or
+       identifier must be allowed to break inside its cell. */
+    overflow-wrap: anywhere;
     border-block-end: var(--nk-border-width) solid var(--nk-color-border);
   }
 
@@ -8348,6 +8831,7 @@
       padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
       text-align: start;
       vertical-align: top;
+      overflow-wrap: anywhere;
       border-block-end: var(--nk-border-width) solid var(--nk-color-border);
     }