nitro_kit 2.0.0.beta.1 → 2.0.0.beta.2

data/docs/eject.md

@@ -0,0 +1,86 @@
+# Eject one component
+
+Gem-owned components, token overrides, and composition remain the default.
+Eject is an explicit source-level customization opt-out, never an installation
+step. Free eject turns a gem component into your code; Pro exemplars are already
+your code when retrieved.
+
+```sh
+bin/rails generate nitro_kit:eject Button
+```
+
+Use the ordinary Phlex constructor:
+
+```ruby
+render Ui::EjectedButton::Button.new("Save", icon: :check)
+```
+
+## Files and integration
+
+- `app/components/ui/ejected_button/`: Button, nested slot classes, transitive
+  Ruby component/support dependencies (such as Icon), and an application-owned
+  Component adapter with a snapshot of base component-level helpers.
+- `app/assets/stylesheets/ejected_button.css`: those components' CSS plus shared
+  palette/layout rules where needed, with explicit cascade-layer order.
+- `app/javascript/controllers/ui/ejected_button/`: referenced Stimulus
+  controllers and their local JavaScript imports.
+- `config/nitro_kit/ejected/button.json`: source version, component, namespace,
+  and generated file inventory. Every source file also records the version.
+
+Keep Nitro Kit installed. The attribute/render kernel (`NitroKit::Component`),
+public `--nk-*` tokens, global reset, translations, appearance document runtime,
+and third-party integrations (Phlex, Lucide, Turbo, Active Storage) stay shared.
+This is not a standalone replacement for the gem. Pin the gem and test kernel
+upgrades even after ejecting.
+
+Load the generated CSS after Nitro Kit and before application overrides:
+
+```erb
+<%= stylesheet_link_tag "nitro_kit", "ejected_button", "application",
+  "data-turbo-track": "reload" %>
+```
+
+In Phlex, use the Rails `stylesheet_link_tag` adapter with the same asset names;
+CSS bundlers may import the generated file instead. The generator reports this
+manual step rather than guessing which of your layouts or CSS entrypoints owns
+the page. Keep the app's normal Stimulus loader enabled. Standard Rails importmap
+apps already pin `app/javascript/controllers` recursively; bundler apps must
+include the generated controllers in their controller loader/build as usual.
+
+Dropzone's copied controller imports Active Storage's JavaScript even when
+`direct_upload: false`. If the app omits Active Storage, its JavaScript asset
+must still be available; eject does not install third-party integrations.
+
+## Isolation and composition
+
+Each ejection has its own dependency snapshot. Ruby uses `Ui::EjectedButton`,
+not `NitroKit` or an existing `Ui::Button`. Root/slot identities use
+`ui-ejected-button-*`; controller identifiers follow Rails filename conventions
+(`ui--ejected-button--button`); CSS layers, private variables, and keyframes
+are renamed. Public tokens and the global reset deliberately remain shared.
+Gem Buttons and ejected Buttons can render on the same page without sharing
+component CSS or controller identifiers.
+
+Namespace spelling follows the host application's inflections (for example,
+an app with the `UI` acronym gets `UI::EjectedButton`). Use the constructor
+printed by the generator.
+
+For typed slots, construct children from the same snapshot, for example
+`Ui::EjectedEmptyState::Button`. Arbitrary content blocks may still compose gem
+components, but snapshot-specific contextual styling targets snapshot children.
+Separate ejections do not silently share mutable dependencies.
+
+## Existing files and updates
+
+Unknown names fail with a list of supported names before writing. CamelCase,
+snake_case, and `NitroKit::Button` names are accepted. If any snapshot file
+already exists, the entire operation skips without changing anything (including
+with `--skip`). `--force` explicitly replaces the entire generated snapshot;
+commit your modifications first. Stale files from older dependency graphs are
+not deleted automatically.
+
+Bundler updates do not update ejected component implementations, styles, or
+controllers. Compare the recorded version to the changelog and port fixes
+yourself, or generate a new snapshot in a disposable application and diff it.
+The manifest enables future update notices; no updater or notice UI ships yet.
+Commit all generated files and the stylesheet integration together.

data/docs/migration_1_to_2.md

@@ -12,7 +12,7 @@ Treat a 1.x migration as a product-flow review, not a helper rename. Nitro Kit
 Add the 2.0 prerelease to the application's Gemfile:
 
 ```ruby
-gem "nitro_kit", "2.0.0.beta.1"
+gem "nitro_kit", "2.0.0.beta.2"
 ```
 
 Bundler records the exact released version in `Gemfile.lock`; commit `Gemfile`

data/docs/patterns/application_foundation.md

@@ -45,6 +45,28 @@ Nitro owns responsive disclosure and focus behavior. Put infrequent account
 destinations after `navigation.spacer`. Add one `CommandPalette` only when the
 destination count warrants search, and render only authorized routes.
 
+The sidebar stays expanded by default, without a toggle or hover peek. Opt in
+with `AppShell(id: "workspace", collapsible: true)` to include the bottom
+**Pin sidebar** toggle that switches between the full sidebar and an icon rail.
+Hovering with a fine pointer or focusing within the navigation or brand
+reveals the full navigation as an overlay without moving page content.
+The pin control does not trigger peek on hover or focus, so directly pinning
+the rail starts the sidebar and content resize together.
+Clicking the toggle pins the sidebar and reserves its full layout width.
+Pointer-clicking to unpin collapses it immediately and suppresses hover peek
+until the pointer leaves the sidebar once; keyboard focus still peeks. Use
+`AppShell(id: "workspace", collapsible: true, sidebar: :collapsed)` to start with the rail, and
+give navigation items icons so they remain recognizable. Labels keep their
+accessible names and vertical positions. Touch does not hover-peek; narrow
+screens still use the modal drawer. Pin state survives Turbo morph refreshes
+of the same shell, but is not persisted across page loads.
+`sidebar_toggle_label:` overrides its name.
+
+For a brand mark that stays visible on the rail, declare
+`shell.brand(icon: :zap) { ... }`. The icon stays aligned with navigation;
+the full brand content appears on hover/focus or when pinned instead of being
+cropped to fit the rail.
+
 Use `AuthShell` with Rails `form_with` and `NitroKit::FormBuilder` for
 authentication. Put visible fields, submit, and recovery link in one
 `form.group`.

data/docs/patterns/inset_workspace.md

@@ -67,6 +67,13 @@ For `topbar`, put that Toolbar first inside `workspace-content` and omit
 `shell.topbar`. Keep one route title and one set of actions. The header and
 body in `sidebar` form one continuous canvas, not two stacked cards.
 
+The inset composition also works with `collapsible: true`. Add
+`sidebar: :expanded` to start pinned open, or `sidebar: :collapsed` to start
+as an icon rail, and give `shell.brand` an `icon:` for its compact mark.
+Pinning reserves navigation space; hover or keyboard-focus peeking overlays
+the inset canvas without moving its toolbar or content. The App shell and
+Sidebar operations galleries show static and collapsible inset examples.
+
 Load this stylesheet after Nitro Kit:
 
 ```css
@@ -165,7 +172,8 @@ Load this stylesheet after Nitro Kit:
 
 Navigation, mobile disclosure, and focus restoration remain Nitro-owned.
 Application code owns the destinations and the composition. The public
-Product resource gallery runs the sidebar example with this stylesheet at
+App shell, Sidebar operations application, and Product resource galleries
+run inset sidebar examples with this stylesheet at
 `test/dummy/app/assets/stylesheets/inset_workspace.css`.
 
 ## Verify the result

data/docs/rails_integration.md

@@ -12,7 +12,7 @@ There are no `nk_form_with` helpers or general ERB component bridge.
 Pin the current prerelease:
 
 ```ruby
-gem "nitro_kit", "2.0.0.beta.1"
+gem "nitro_kit", "2.0.0.beta.2"
 ```
 
 Use the released gem and commit `Gemfile` with `Gemfile.lock`. Before upgrading,

data/lib/generators/nitro_kit/eject_generator.rb

@@ -0,0 +1,26 @@
+require "rails/generators"
+require "nitro_kit/ejection"
+
+module NitroKit
+  class EjectGenerator < Rails::Generators::Base
+    argument :component, type: :string, desc: "Component to eject (for example Button)"
+    desc "Copy one component and its dependencies into isolated application-owned code."
+
+    def eject_component
+      ejection = Ejection.new(component)
+      files = ejection.files
+      existing = files.keys.select { |path| File.exist?(File.join(destination_root, path)) }
+      if existing.any? && !options[:force]
+        say_status :skip, "Already ejected or conflicting files: #{existing.join(', ')}. No files changed; use --force to replace the entire snapshot.", :yellow
+        return
+      end
+
+      files.each { |path, content| create_file(path, content) }
+      say "Render #{ejection.namespace}::#{ejection.component_name}.new(...)"
+      say "Load #{ejection.stylesheet_name}.css after nitro_kit.css (stylesheet_link_tag, or your CSS entrypoint)."
+      say "Keep Nitro Kit installed and keep the application's Stimulus controller loader enabled. See docs/eject.md."
+    rescue ArgumentError => error
+      raise Rails::Generators::Error, error.message
+    end
+  end
+end

data/lib/nitro_kit/ejection.rb

@@ -0,0 +1,136 @@
+require "ripper"
+require "json"
+require "nitro_kit/version"
+
+module NitroKit
+  class Ejection
+    ROOT = File.expand_path("../..", __dir__)
+    SUPPORT_FILES = %w[component layout_options responsive_value].freeze
+
+    def initialize(name)
+      @name = name.delete_prefix("NitroKit::").underscore
+      @sources = Dir["#{ROOT}/app/components/nitro_kit/*.rb"].to_h do |path|
+        [ File.basename(path, ".rb").camelize, File.read(path) ]
+      end
+      unless @sources.key?(component_name) && !SUPPORT_FILES.include?(@name)
+        raise ArgumentError, "Unknown component #{name.inspect}. Choose one of: #{(@sources.keys - SUPPORT_FILES.map(&:camelize)).sort.join(', ')}"
+      end
+    end
+
+    def component_name = @name.camelize
+    def stylesheet_name = "ejected_#{@name}"
+    def namespace = directory.camelize
+    def prefix = "ui-ejected-#{@name.dasherize}"
+    def directory = "ui/ejected_#{@name}"
+
+    def files
+      result = {}
+      ruby_names.each do |name|
+        result["app/components/#{directory}/#{name.underscore}.rb"] = header("#") + rewrite_ruby(@sources.fetch(name))
+      end
+      result["app/components/#{directory}/component.rb"] = header("#") + component_adapter
+      result["app/assets/stylesheets/#{stylesheet_name}.css"] = header("/*", " */") + stylesheet
+      javascript_paths.each do |path|
+        relative = path.delete_prefix("#{ROOT}/app/javascript/controllers/nk/")
+        source = rewrite_contracts(File.read(path))
+          .gsub("controllers/nk/", "controllers/#{directory}/")
+        result["app/javascript/controllers/#{directory}/#{relative}"] = header("//") + source
+      end
+      result["config/nitro_kit/ejected/#{@name}.json"] = JSON.pretty_generate(
+        component: component_name, version: VERSION, namespace:, files: result.keys
+      ) + "\n"
+      result
+    end
+
+    private
+      def header(open, close = "")
+        "#{open} Ejected from Nitro Kit #{VERSION}: #{component_name}. Application-owned; not automatically upgraded.#{close}\n"
+      end
+
+      def ruby_names
+        @ruby_names ||= begin
+          names = [ component_name ]
+          names.each do |name|
+            Ripper.lex(@sources.fetch(name)).each do |_, type, token, _|
+              names << token if type == :on_const && @sources.key?(token) && token != "Component" && !names.include?(token)
+            end
+          end
+          names
+        end
+      end
+
+      def stylesheet
+        names = ruby_names.map(&:underscore)
+        names << "palette" if (ruby_names & %w[Badge Alert Toast]).any?
+        names << "layout" if (ruby_names & %w[Flex Grid]).any?
+        rules = names.filter_map do |name|
+          path = "#{ROOT}/src/stylesheets/nitro_kit/components/#{name}.css"
+          rewrite_contracts(File.read(path)) if File.file?(path)
+        end
+        layers = %w[base variant size state compound].map { |layer| "#{prefix}.#{layer}" }.join(", ")
+        "@layer #{layers};\n" + rules.join("\n")
+      end
+
+      def javascript_paths
+        ruby_source = ruby_names.map { |name| @sources.fetch(name) }.join("\n")
+        paths = Dir["#{ROOT}/app/javascript/controllers/nk/*_controller.js"].select do |path|
+          name = File.basename(path, "_controller.js")
+          ruby_source.include?("nk--#{name.dasherize}") || ruby_source.include?("nk__#{name}")
+        end
+        # Shared overlay command plumbing lives in the component adapter.
+        paths |= [ "#{ROOT}/app/javascript/controllers/nk/dialog_controller.js" ] if ruby_source.include?("command_data(")
+        paths.each do |path|
+          File.read(path).scan(/(?:from\s*|import\s*)["']([^"']+)["']/).flatten.each do |import|
+            dependency = if import.start_with?("controllers/nk/")
+              "#{ROOT}/app/javascript/#{import}.js"
+            elsif import.start_with?(".")
+              File.expand_path(import.end_with?(".js") ? import : "#{import}.js", File.dirname(path))
+            end
+            paths << dependency if dependency && File.file?(dependency) && !paths.include?(dependency)
+          end
+        end
+        paths
+      end
+
+      def rewrite_ruby(source)
+        rewrite_contracts(source.gsub("module NitroKit", "module #{namespace}").gsub("NitroKit::", "#{namespace}::"))
+      end
+
+      def rewrite_contracts(source)
+        source.gsub("nk--", "ui--ejected-#{@name.dasherize}--")
+          .gsub("nk__", "ui__ejected_#{@name}__")
+          .gsub(/(data-(?:nk|slot)(?:[~|^$*]?=)["'])([^"']+)/) { "#{$1}#{prefix}-#{$2}" }
+          .gsub(/(dataset\.slot\s*=\s*["'])([^"']+)/) { "#{$1}#{prefix}-#{$2}" }
+          .gsub("--_nk-", "--_#{prefix}-")
+          .gsub(/(?<![-\w])nk-(?!-)[a-z][a-z0-9-]*/) { |name| "#{prefix}-#{name.delete_prefix('nk-')}" }
+          .gsub("nitro-kit.", "#{prefix}.")
+      end
+
+      def component_adapter
+        # Copy component helpers, not the attribute kernel or the enclosing class.
+        helpers = @sources.fetch("Component").lines
+          .drop_while { |line| !line.start_with?("    def description_id") }[...-2].join
+        <<~RUBY
+          module #{namespace}
+            class Component < NitroKit::Component
+              def initialize(component:, **attributes)
+                super(component: "#{prefix}-\#{component.to_s.tr('_', '-')}", **attributes)
+              end
+
+              private
+
+              def qualified_slot(slot)
+                name = slot.to_s.tr("_", "-")
+                original = @component_name.delete_prefix("#{prefix}-")
+                name = name.delete_prefix("\#{original}-")
+                "\#{@component_name}-\#{name}"
+              end
+
+              # Snapshot of component-level helpers; attribute/render kernel stays gem-owned.
+          #{rewrite_contracts(helpers)}
+            end
+          end
+        RUBY
+      end
+  end
+end

data/lib/nitro_kit/version.rb

@@ -1,3 +1,3 @@
 module NitroKit
-  VERSION = "2.0.0.beta.1"
+  VERSION = "2.0.0.beta.2"
 end

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

@@ -78,6 +78,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;
@@ -135,7 +137,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"]) {

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