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

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/layers.css

@@ -1,3 +1,11 @@
+/*
+ * Global cascade-layer order. Declared first so that, when an application also
+ * loads a compiled Tailwind CSS v4 stylesheet, Nitro Kit sits between
+ * Tailwind's base and components layers and Tailwind utilities still win.
+ * Without Tailwind the extra layers are simply unused.
+ */
+@layer properties, theme, base, nitro-kit, components, utilities;
+
 @layer nitro-kit.tokens,
   nitro-kit.reset,
   nitro-kit.base,

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) {
@@ -106,7 +116,7 @@
   }
 
   :where(:disabled),
-  ::file-selector-button:disabled {
+  :disabled::file-selector-button {
     cursor: default;
   }
 

data/{app/assets/stylesheets/nitro_kit-tailwind-v4.css → src/stylesheets/nitro_kit/tailwind.css}

@@ -1,10 +1,9 @@
 /*
- * Nitro Kit Tailwind CSS v4 adapter.
- * Load this before both Nitro Kit and compiled Tailwind stylesheets.
+ * Tailwind CSS v4 theme aliases. Maps Nitro tokens onto the theme variables
+ * Tailwind utilities read, so bg-background, rounded-md, shadow-sm and friends
+ * share one palette with the components. Tailwind itself stays an application
+ * concern: Nitro Kit never compiles, configures, or depends on it.
  */
-
-@layer properties, theme, base, nitro-kit, components, utilities;
-
 @layer nitro-kit.tokens {
   :where(:root, [data-theme]) {
     --font-sans: var(--nk-font-sans);

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.beta.1
+  version: 2.0.0.beta.3
 platform: ruby
 authors:
 - Mikkel Malmberg
@@ -92,8 +92,8 @@ files:
 - LICENSE
 - README.md
 - STYLE_GUIDE.md
-- app/assets/stylesheets/nitro_kit-tailwind-v4.css
 - app/assets/stylesheets/nitro_kit.css
+- app/assets/tailwind/nitro_kit/engine.css
 - app/components/nitro_kit/accordion.rb
 - app/components/nitro_kit/alert.rb
 - app/components/nitro_kit/app_navigation.rb
@@ -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
@@ -267,6 +270,7 @@ files:
 - src/stylesheets/nitro_kit/components/typeset.css
 - src/stylesheets/nitro_kit/layers.css
 - src/stylesheets/nitro_kit/reset.css
+- src/stylesheets/nitro_kit/tailwind.css
 - src/stylesheets/nitro_kit/tokens.css
 homepage: https://nitrokit.dev
 licenses:
@@ -290,7 +294,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: []