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

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

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

@@ -22,11 +22,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"]) {
@@ -38,7 +38,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;
   }

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

@@ -26,12 +26,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;
     }
 

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

@@ -19,6 +19,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);
@@ -27,7 +30,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) {
@@ -111,8 +115,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) {
@@ -120,8 +129,13 @@
         [data-nk="tooltip"]:not([data-dismissed]):hover
           > [data-slot="tooltip-content"]
       ) {
+      display: block;
       visibility: visible;
       opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
     }
   }
 

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

@@ -118,6 +118,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);
   }
 
@@ -259,6 +262,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);
     }
 

data/src/stylesheets/nitro_kit/reset.css

@@ -17,9 +17,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) {

data/src/stylesheets/nitro_kit/tokens.css

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nitro_kit
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.6
+  version: 2.0.0.beta.2
 platform: ruby
 authors:
 - Mikkel Malmberg
@@ -179,6 +179,7 @@ files:
 - docs/browser_support.md
 - docs/component_contracts.md
 - docs/customization.md
+- docs/eject.md
 - docs/hotwire.md
 - docs/initialization_prompt.md
 - docs/migration_1_to_2.md
@@ -192,9 +193,11 @@ files:
 - docs/patterns/resource_form.md
 - docs/rails_conventions.md
 - docs/rails_integration.md
+- lib/generators/nitro_kit/eject_generator.rb
 - lib/generators/nitro_kit/install_generator.rb
 - lib/generators/nitro_kit/upgrade_smoke_tests_generator.rb
 - lib/nitro_kit.rb
+- lib/nitro_kit/ejection.rb
 - lib/nitro_kit/engine.rb
 - lib/nitro_kit/installation.rb
 - lib/nitro_kit/migration_inventory.rb
@@ -290,7 +293,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.16
+rubygems_version: 4.0.20
 specification_version: 4
 summary: An agent-native Phlex UI system for Rails
 test_files: []