nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2cfb9e904d8890216a6c778b5dd10655e22f77fa7508fd4d9eb9521453b61cd8
-  data.tar.gz: 3c9564fa27b68e1a10c1febe8b7104416251a5203b1bd25aa89b1617cab1e116
+  metadata.gz: f4ea3ffdd5e6404639ac11c27f5eb4798b2d29b0103b360404b964c46ffed908
+  data.tar.gz: 5a1141716d12a4e3f30969f9971da1d844d44d057e856bd6ed2d1ea0a99fec2d
 SHA512:
-  metadata.gz: de02c676e41ea2cb0d674de967efa9c73aa8d6f65195af0bfae0ce35e305dc9fb5e53979659e5feed738cf0fdc4e968902931be726a5d1bd67f22a400ce3c0b2
-  data.tar.gz: 2ffdd83fe0f4005c5146a3d9e4fa13e7ce8a6b6d84d0a7e881aace598a6ff938836b20c15f29bde5f9d72e9bed8ef2e4a6b8a083add6986a0acdacb653221a4e
+  metadata.gz: 03b102d89337de8a13f54b0e1e52163897f5d215ea1810d979f3fa4d0985b86e03bd8c9702e9aedccf21d9252e3cdfab23ccf6686cf79caa85f7d383c1af65f0
+  data.tar.gz: f2a33cc6791355080ff7439e714dd2d7c44f4ce706f36817cb7c1c9f42286323bec458c9238e1adb3bbf6807aae57ffedc40b2fd3b49b523027d7b9aa97a0d95

data/CHANGELOG.md

@@ -1,5 +1,233 @@
 # Changelog
 
+## Unreleased
+
+## 2.0.0.alpha.4
+
+### Added
+
+- Add `label_visible: false` to `AppearancePicker`'s segmented presentation:
+  the legend hides visually while the fieldset keeps its accessible name,
+  and the segmented row now fills its container like every other control,
+  with the segments sharing the width equally.
+- Add collapsible `AppNavigation` sections: `section(label:, collapsible:
+true, expanded:)` renders native `details` and `summary` with an owned
+  chevron, so groups disclose without JavaScript and open state stays on
+  the native `open` attribute. Collapsible sections require a label.
+- Assert the stylesheet conventions as tests. Spacing steps, geometry
+  through tokens, the type and shadow scales, themeable opacity, guarded
+  motion and hover, the four z-index tiers, and the destructive spellings
+  are now nine architecture tests with no allowlist, so a new violation
+  fails instead of accumulating. The conventions themselves are documented
+  in the style guide: the spacing step set, the z-index tiers, the
+  color-mix percentage vocabulary, and the single deliberate easing curve.
+- Add `--nk-icon-size-{xs,sm,md,lg,xl}` and `--nk-avatar-size-{xs,sm,md,lg}`.
+  The Icon and Avatar ladders were literals repeated across five files;
+  AvatarStack duplicated the entire avatar ladder. Alert's status icon and
+  Accordion's chevron now resolve through the icon axis, so an application
+  retheming icon sizes moves every owned glyph with them.
+- Document the size vocabularies: one contract table of the six size ramps
+  and why each stops where it does, so a caller can predict which sizes a
+  component accepts without trying them.
+- Add `--nk-choice-size-{md,lg}` and derive every checkbox and radio
+  dimension from them: box, glyph proportions, description indent, and the
+  native input sizes. The two sizes are one rule apart, the large radio dot
+  finally scales with its control, and both indicators share one guarded
+  transition.
+- Add `--nk-control-padding-inline`. Buttons, inputs, selects, and textareas
+  share one inline padding instead of two nearby values.
+- Add the full color scales as public tokens: `--nk-{family}-{50..950}` for all
+  twenty-two families — the five neutrals slate, gray, zinc, neutral, and stone,
+  plus seventeen chromatic hues. Every semantic role and badge color samples
+  these scales, so swapping the neutral or the accent means re-pointing roles at
+  another family rather than inventing values. Scale values are Nitro's own
+  harmonized ramps: smooth lightness, chroma, and hue curves fitted through the
+  familiar palette, bounded to an imperceptible perceptual distance per value.
+  The customization guide documents every step and ships neutral-swap and
+  accent recipes.
+- Add `--nk-white` and `--nk-black`. The surface, foreground, and overlay
+  roles that used raw white and black resolve through them, so warm-paper and
+  true-black themes are two overrides.
+- Add the public tint palette: `--nk-palette-*` roles for all twenty-two
+  badge colors — the five semantic families and the seventeen decorative hues —
+  so `Badge`'s colors are themeable like every other part of the system. Each
+  resolves to a scale step: the 400 tint with a 700-800 foreground in light and
+  the 200 foreground in dark. Semantic families default to the same steps as
+  their hue families, so an `info` badge renders exactly like a `blue` badge
+  and a `warning` alert is amber in both appearances, until a theme separates
+  them.
+- Add the title scale: `--nk-title-{page,section,surface,compact}-{size,weight}`.
+  Every owned title and legend resolves through one of four roles instead of
+  fifteen components choosing among six sizes and two weights. Fieldset
+  legends join the other surface titles at bold, and Alert titles match
+  Toast titles, which the shared status palette already made visual twins.
+- Add `--nk-disabled-opacity` and `--nk-shadow-xs`, and resolve every
+  disabled control and Button's raised shadow through them. Disabled state
+  was four different opacities; Button drew its shadows by hand.
+
+### Breaking changes
+
+- Settle the destructive vocabulary on two deliberate spellings. Actions and
+  Alert say `destructive`: Button and Dropdown items keep their variant,
+  and Alert renames its `:error` variant to `:destructive`. Toast items
+  keep `:error`, the announcement spelling, and both resolve to the same
+  tint family in the shared palette. Badge and AppNavigation rename their
+  `danger` semantic color to `destructive`, and the tokens follow:
+  `--nk-color-danger*` becomes `--nk-color-destructive*` and
+  `--nk-palette-danger*` becomes `--nk-palette-destructive*`. Form and
+  field error semantics are unchanged.
+- Remove `Alert::VARIANT_PALETTE`. Alert variants resolve through the shared
+  semantic palette instead of mapping to hue families.
+- Remove `zinc` from `Badge`'s color vocabulary; use `neutral`, which renders
+  the same by default and follows an application's neutral theme. A gray badge
+  frozen to one gray family had no categorical job the semantic name does not
+  do better.
+- Change `Badge`'s default color from `:zinc` to `:neutral`. Both render the
+  same way; the semantic name is now the default because it follows an
+  application's theme.
+
+### Changed
+
+- Quiet the dark-mode borders one step, from `--nk-zinc-700` to
+  `--nk-zinc-800`, so dark surfaces read as soft fills instead of outlined
+  boxes.
+- Render every owned glyph through the Icon component. Accordion, Select,
+  Combobox, and AppNavigation drew their chevrons as hand-approximated SVG
+  paths; they now render the real Lucide `chevron-down` at the same sizes,
+  so one icon set covers the whole library and the glyphs ride the
+  `--nk-icon-size-*` axis.
+- Default Dropzone to the `minimal` presentation: the drop target is the
+  only visible affordance, and the native file input stays focusable,
+  named, and operable underneath — file selection and keyboard flows are
+  unchanged. `presentation: :input` still shows the native control beside
+  the drop target.
+- Align the default radius at `--nk-radius-lg` (8px): inputs, selects,
+  textareas, the rich text editor, navigation rows, pagination links,
+  dropzone, grouped choice frames, and the segmented appearance picker now
+  share Button's radius instead of sitting one step smaller. Nested pieces
+  are concentric — inner radius is the container's minus its padding — so
+  segmented options, dropdown items, combobox options, and command palette
+  destinations sit flush inside their containers. Buttons' smaller sizes
+  keep their own ramp; badges, tooltips, and chips keep their compact radii.
+- Lower the default control height from 40px to 36px:
+  `--nk-control-height-md` is now `2.25rem`, so medium buttons, inputs,
+  selects, menu rows, and the choice controls' hit areas tighten together.
+- Meet the 44px touch target on coarse pointers: Button extends an
+  invisible tap area to the large control step, so a touch just outside a
+  small or default button still lands on it while the rendered size stays
+  put, asserted by a touch-emulation hit test.
+- Derive the remaining owned geometry from the token system. Switch is now
+  four declared inputs — block heights ride the control ramp, the track is
+  the block plus the handle's travel — so density presets finally reach
+  switches, and Textarea's minimum height rides `--nk-space`. The
+  AppearancePicker control resolves through `--nk-choice-size-md` and the
+  Accordion trigger through `--nk-control-height-lg`, the values they
+  already rendered. Every dimension was verified pixel-identical.
+- Widen the Select chevron gutter from 36px to 40px. The gutter is now
+  derived — inline padding, icon, inline padding — so the chevron sits
+  symmetrically instead of at an arbitrary offset.
+- Tighten extra-small Badge inline padding from 5px to 4px, making the
+  badge padding ramp an even 4/6/8.
+- Size fixed overlays with `100%` instead of `100vw`. Dropdown menus, the
+  combobox listbox, the toast column, and the app shell drawer capped
+  themselves against `100vw`, which includes the scrollbar, so classic
+  scrollbars pushed them past the visible viewport. Percentages resolve
+  against the initial containing block, which excludes it. Tooltip keeps
+  `100vw` deliberately and documents why.
+- Finish the logical-property pass: the remaining physical `width`,
+  `height`, and `min-/max-` declarations now use their logical forms, so
+  every component behaves in vertical writing modes.
+- Dim Table's sort indicator through the color channel instead of a raw
+  `opacity`, and guard the remaining control transitions and the
+  DetailsTable hover for reduced motion and touch.
+- Dress the AvatarStack overflow chip as one of the heads: the same neutral
+  fill as the avatar fallbacks and the same hairline ring, instead of an
+  elevated fill with no ring.
+- Read data-entry controls at `--nk-text-base` below the md breakpoint and
+  `--nk-text-sm` from md up, so a focused control never zooms the viewport
+  on small screens; buttons read `--nk-text-sm` at every width. Select and
+  Textarea follow the same rule instead of inheriting the page font.
+- Even the control height ramp: `--nk-control-height-sm` is the 2rem small
+  Button already rendered, and Button consumes the token, so the theme
+  customizer's density exports reach small buttons instead of being
+  silently ignored.
+- Resolve `Badge`, `Alert`, and `Toast::Item` colors from public tokens through
+  one shared palette. Badge colors were previously hardcoded in private
+  `--_nk-*` variables, which are not a theme API, so badge color was the one
+  thing in the library an application could not rebrand.
+- Separate `Badge`'s two color axes. Semantic families follow the
+  `--nk-palette-{family}` tint roles and move with an application's brand;
+  decorative hues follow the `--nk-palette-{hue}` roles and stay the color they
+  name. `red` and `danger` previously resolved to identical CSS and are now
+  independently themeable.
+
+- Soften the toast shadow from the dialog tier to the floating-element tier,
+  matching dropdowns and comboboxes. It carried the strongest shadow in the
+  system on a card-radius surface, fitting no rung of the elevation ladder.
+
+### Fixed
+
+- Stop Avatar rings from painting through overlapping stack siblings. The
+  ring pseudo-element carries a z-index but the avatar root was not a
+  stacking context, so in an AvatarStack every ring floated above every
+  neighboring avatar's fill and the stack looked translucent. Avatars are
+  now isolated, so each one paints atomically and covers the ring beneath
+  it.
+- Render an `Alert` and a `Toast::Item` of the same variant identically. Both
+  declare the same variant vocabulary but resolved it from different sources, so
+  one "success" appeared as two different greens and rethemeing a semantic token
+  moved only the toast.
+- Raise the orange badge foreground so it clears WCAG AA against its own tint.
+  It rendered at 4.31:1 in light appearance. Every semantic family and hue is
+  now asserted at 4.5:1 or better in both appearances.
+
+## 2.0.0.alpha.3
+
+### Added
+
+- Add a dated browser verification matrix with full Chrome coverage, focused
+  Firefox and macOS Safari lanes, and explicit Android, iOS, and near-floor
+  release checks.
+- Add `--nk-button-radius` so applications can preserve a button-specific shape without changing inputs and surfaces.
+- Add structured JSON output to `nitro_kit:doctor` for migration automation.
+
+### Changed
+
+- Accept Rails-style nested and conditional class values through `desperately_need_a_class:`, normalizing retained external-integration hooks without manual string formatting, while directing migrations to review every use and aim for zero.
+- Make migration diagnostics surface usages of application-owned button treatments and provable 2.0 Table/Button runtime contract errors, and require semantic theme translation plus wide and narrow browser comparison.
+- Recognize explicit Stimulus controller registration used by JavaScript bundlers.
+- Explain the purpose and limits of generated host-integration smoke tests in each generated file.
+
+### Documentation
+
+- Define the rolling evergreen browser-support policy, with Mobile Safari as a
+  first-class target and standards-first, feature-detected fallbacks for core
+  behavior.
+- Classify every interactive component's no-JavaScript baseline as full,
+  reduced, or unavailable.
+- Document native month and week inputs as progressive enhancement, including
+  server-side ISO validation and bounded Select guidance.
+- Document Accordion's reduced single-group behavior where named details are
+  unavailable instead of adding a compatibility controller.
+
+### Fixed
+
+- Keep Dialog, Sheet, and CommandPalette controls working when Invoker Commands
+  are unavailable while preserving the native declarative path and consistent
+  focus restoration in Safari.
+- Stack AppShell toolbar actions below the title on narrow screens instead of
+  clipping child-route titles when a Back affordance and several actions share
+  the header.
+- Restore Dropdown outside-tap dismissal on affected Mobile Safari Popover
+  implementations and keep its reduced placement inside the viewport.
+- Provide readable Typeset styling in Firefox versions without CSS `@scope`.
+- Keep settled progressive images visible when Turbo restores a cached page.
+- Keep arbitrary multi-element Button content aligned inside the label slot.
+- Keep the command palette at a stable height while filtering destinations.
+- Use a neutral elevated surface instead of the primary accent for tooltips.
+- Resolve implicit FormBuilder labels only when rendered, so custom field blocks work under strict i18n.
+- Allow generated upgrade smoke tests to coexist with host catch-all routes while still rejecting exact route collisions.
+
 ## 2.0.0.alpha.2
 
 This alpha keeps the 2.0 API experimental while incorporating the first full
@@ -73,7 +301,7 @@ Nitro Kit 2.0 alpha is a ground-up, intentionally incompatible rebuild around ge
 - Static zero-specificity CSS, light and dark theme tokens with a no-JavaScript system fallback, and a separate Tailwind CSS v4 adapter.
 - Responsive Flex and Grid layouts with fixed mobile-first breakpoints, closed values, classless data contracts, and no Tailwind runtime; plus the constrained-width Container.
 - Sortable `Table` headers with caller-owned URLs, native `aria-sort`, and an optional Ransack gallery recipe.
-- Eleven blocks and shells: AuthShell, AppShell, SettingsLayout, Toolbar, PaginationBar, PageHeader, StatGrid, DataSection, FormSection, DangerZone, and EmptyState.
+- Eleven blocks and shells: AuthShell, AppShell, SettingsLayout, Toolbar, PaginationBar, PageHeader, StatGrid, DataSection, SettingsSection, DangerZone, and EmptyState.
 - AppNavigation, AppearancePicker, DetailsTable, Dropzone, and ProgressiveImage components, plus the non-visual AppearanceBootstrap runtime.
 - Typed Choice values and direct-Phlex Rails FormBuilder integration with Active Model errors, native and direct uploads, and Turbo Frame/Stream examples.
 - Direct optional Pagy integration through `Pagination(pagy:)`, with an explicit URL callable for caller-owned destinations.

data/README.md

@@ -4,32 +4,47 @@
 
 # Nitro Kit
 
-**Rails front-end for the agent era.**
+**Audience:** Rails developers evaluating or installing Nitro Kit.
 
-Nitro Kit is a gem-owned, agent-native UI system for Ruby on Rails. The `2.0.0.alpha.2` prerelease is a ground-up rebuild under active testing and must not be treated as stable. New documentation and the Nitro Kit Pro alpha catalog are coming next.
+Nitro Kit is a gem-owned Phlex UI system for Rails. The `2.0.0.alpha.4` prerelease
+is under active testing and is not stable.
 
 [![RubyGems](https://img.shields.io/gem/v/nitro_kit.svg)](https://rubygems.org/gems/nitro_kit)
 
-## Installation
+## Install
 
-Install the alpha explicitly and keep it pinned while evaluating it.
+Pin the prerelease:
 
 ```ruby
-gem "nitro_kit", "2.0.0.alpha.2"
+gem "nitro_kit", "2.0.0.alpha.4"
 ```
 
-Use the released gem and commit `Gemfile` with `Gemfile.lock`. Before upgrading, review the changelog, run `bundle update nitro_kit`, rerun the installer, and test the application.
-
 ```sh
 bundle install
 bin/rails generate nitro_kit:install
 bin/rails nitro_kit:doctor
 ```
 
-The [agent guide](docs/agent_guide.md), [Rails integration guide](docs/rails_integration.md), and [component contracts](docs/component_contracts.md) are included with the gem.
+Commit `Gemfile` and `Gemfile.lock`. Before upgrading, review the changelog,
+run `bundle update nitro_kit`, rerun the installer, and test the application.
+Production applications should use a released gem with a committed lockfile.
+
+Start with:
+
+- [Rails integration](docs/rails_integration.md)
+- [Component contracts](docs/component_contracts.md)
+- [Customization](docs/customization.md)
+- [Browser support](docs/browser_support.md)
+- [Nitro Kit 1.x migration](docs/migration_1_to_2.md)
+- [Coding-agent guide](docs/agent_guide.md)
+
+Nitro Kit targets maintained evergreen browsers from roughly the previous two
+years, with Mobile Safari as a first-class target. See the
+[browser support policy](docs/browser_support.md) for exact fallback behavior.
 
-Maintaining Nitro Kit 1? Its frozen documentation remains at [v1.nitrokit.dev](https://v1.nitrokit.dev).
+Maintaining Nitro Kit 1? Its frozen documentation remains at
+[v1.nitrokit.dev](https://v1.nitrokit.dev).
 
 ## License
 
-Nitro Kit is distributed under the custom [NitroKit License](LICENSE).
+Nitro Kit uses the custom [NitroKit License](LICENSE).

data/STYLE_GUIDE.md

@@ -32,6 +32,35 @@ render immediately and only work from a Phlex context; they do not work in ERB.
 - Let applications customize themes and compose product-specific UI without editing Nitro internals.
 - Keep behavior minimal, progressive, and Turbo-safe.
 
+## Browser compatibility
+
+The public compatibility contract lives in
+[`docs/browser_support.md`](docs/browser_support.md). Use modern standards while
+keeping essential behavior usable for the overwhelming majority of people on
+maintained browsers. The practical target is current stable and popular
+evergreen Chrome, Edge, Firefox, macOS Safari, and iOS Safari releases from
+roughly the previous two years. Treat Mobile Safari as a primary browser. The
+dated release matrix sets the actual floor by release date and usage, not equal
+major-version counts.
+
+Prefer approved native standards even when their support is newer than the
+window, but do not confuse standards adoption with baseline availability.
+Feature-detect the preferred path and add the smallest Nitro-owned fallback
+when its absence breaks core content, navigation, submission, disclosure, or
+overlay operation. A simpler layout, placement, wrapping, or animation is an
+acceptable fallback. Copying controllers into applications, requiring every
+consumer to choose a polyfill, or silently leaving a control inert is not.
+
+Record no-JavaScript behavior per interactive component. Test the native and
+fallback paths, Turbo cache and reconnect lifecycles, keyboard behavior, and a
+representative browser near the support-window floor. Chromium emulation alone
+does not establish Safari or iOS compatibility.
+
+Place a broadly supported CSS declaration before a newer visual enhancement,
+or use a feature query when unsupported syntax would invalidate layout, color,
+contrast, focus visibility, or interaction. Unsupported polish may disappear;
+readability and operability may not.
+
 ## File layout
 
 ```text
@@ -206,7 +235,7 @@ component translates each string the controller needs and emits it through the
 Stimulus values API:
 
 ```html
-<div data-nk--dropzone-queued-value="Queued">
+<div data-nk--dropzone-queued-value="Queued"></div>
 ```
 
 The controller reads the value and keeps the shipped English literal only as an
@@ -219,10 +248,13 @@ a translator sees one grammar in both languages.
 Nitro components never emit or depend on classes. The only exception is:
 
 ```ruby
-desperately_need_a_class: "external-widget-hook"
+desperately_need_a_class: [
+  "external-widget-hook",
+  { "is-active": active? }
+]
 ```
 
-It must produce both the class and `data-nk-escape="class"`. Blank or non-string values raise. Implement this once in the base component.
+It accepts Rails `class_names` values—strings, symbols, nested arrays, and conditional hashes—and normalizes them into a deduplicated string. It must contain at least one class and produce both the class and `data-nk-escape="class"`. Implement this once in the base component. Tailwind applications may run a Tailwind-aware merger before passing classes when conflicting utilities need resolution; Nitro does not require one.
 
 ## CSS architecture
 
@@ -271,11 +303,21 @@ Variants assign private values and generic state consumes them:
 
 Never target an unqualified `[data-slot]`. Never use `transition: all`.
 
+Interaction treatments respond to capability: hover effects sit under `@media (hover: hover)`, and Button extends an invisible touch target to the large control step under `@media (pointer: coarse)`, so taps meet the 44px minimum while the rendered size stays put. Control text keys to the width axis: data-entry controls read `--nk-text-base` below the `md` breakpoint, where a focused control under 16px zooms the viewport, and `--nk-text-sm` from `md` up; buttons read `--nk-text-sm` at every width.
+
+Spacing multipliers on `--nk-space` come from the step set `0.5 1 1.5 2 2.5 3 4 5 6 7 8 10 12 16 24`. Panel and overlay maximums are viewport policy and stay literal rem values; everything a component owns rides a token or a step.
+
+`z-index` has four tiers and no other values: `1`–`3` layer parts inside one component, `10`–`30` layer application-shell chrome, `50` lifts the floating overlays that are not top-layer elements, and `100` is the system tier for the toast column and the skip link. Native dialogs and popovers rely on the top layer instead of a z-index. An element that carries a z-index inside a component must also make its component a stacking context (`isolation: isolate`), or the index leaks into sibling components.
+
+Translucency is mixed in `oklab`, never applied through `opacity`, so dimming cannot cascade into descendants; `opacity` is reserved for `--nk-disabled-opacity` and animating whole overlays. The mixing percentages are a fixed vocabulary: hairline rings and quiet borders mix `10%` of the foreground or black pole, hover washes mix `5%` in light and `15%` of white in dark, inset bevel highlights mix `15–20%` of white, status surfaces tint `12%` in light and `20%` in dark, status borders carry `45%` of their accent, and de-emphasized fills mix `40–65%` toward the surface. A new value in this list is a design decision, not a rounding choice.
+
+Motion uses the one easing curve `--nk-ease` in both directions, deliberately: enter and exit stay interruptible and reversible, and a dedicated accelerate/decelerate pair is a future decision to make once, globally, not per component. Durations come from the three `--nk-duration-*` steps, and every transition and animation stands down under `prefers-reduced-motion`.
+
 ## Tokens and themes
 
 Public `--nk-*` variables cover themeable decisions: semantic colors, paired foregrounds, typography, spacing, radii, control dimensions, shadows, borders, motion, and content widths.
 
-Buttons and data-entry controls share control heights, radii, border geometry, focus treatment, and disabled treatment, but they do not share one surface role. Inputs, selects, textareas, and unchecked controls use the general surface tokens. The raised default Button uses the public `--nk-button-default-background`, `--nk-button-default-hover-background`, `--nk-button-default-foreground`, and `--nk-button-default-border` tokens. Button-like controls such as the native file selector may consume the same treatment; do not make ordinary data-entry surfaces depend on it.
+Buttons and data-entry controls share control heights, the default radius scale, border geometry, focus treatment, and disabled treatment, but they do not share one surface role. `--nk-button-radius` may override only Button shape when an application deliberately distinguishes buttons from inputs and surfaces. Inputs, selects, textareas, and unchecked controls use the general surface tokens. The raised default Button uses the public `--nk-button-default-background`, `--nk-button-default-hover-background`, `--nk-button-default-foreground`, and `--nk-button-default-border` tokens. Button-like controls such as the native file selector may consume the same treatment; do not make ordinary data-entry surfaces depend on it.
 
 Private `--_nk-*` variables coordinate component mechanics and are not a theme API.
 
@@ -370,7 +412,7 @@ Do not add mandatory Dropzone.js, Ransack, or image-processing dependencies to N
 
 Native HTML and CSS own behavior when they already provide the required semantics. Stimulus adds the smallest missing enhancement.
 
-- Use `details`/`summary` for disclosure, declarative `command`/`commandfor` for dialogs, native Popover for dropdown visibility, and CSS hover/focus for tooltips.
+- Prefer `details`/`summary` for disclosure, declarative `command`/`commandfor` for dialogs, native Popover for dropdown visibility, and CSS hover/focus for tooltips. Before making one authoritative, verify that it covers `docs/browser_support.md` or pair it with the smallest capability-detected fallback.
 - Do not mirror browser-owned open state into `data-state`, `aria-expanded`, or hidden attributes. Use targets and values only for state Nitro genuinely owns.
 - The exception is state HTML cannot express as an attribute at all. A checkbox's `indeterminate` is a DOM property with no markup form, so `Checkbox` mounts `nk--checkable` only when `indeterminate: true`, and that controller's whole scope is applying the property and owning the matching `data-state="indeterminate"`. Ordinary checked state stays native, with no controller and no mirrored `data-state`. Do not widen a controller past the one state the browser cannot express.
 - Keep native state selectors such as `[open]` and `:popover-open` authoritative in CSS.

data/app/assets/stylesheets/nitro_kit-tailwind-v4.css

@@ -19,9 +19,9 @@
     --color-ring: var(--nk-color-focus);
     --color-primary: var(--nk-color-primary);
     --color-primary-foreground: var(--nk-color-primary-foreground);
-    --color-destructive: var(--nk-color-danger);
-    --color-destructive-content: var(--nk-color-danger-content);
-    --color-destructive-foreground: var(--nk-color-danger-foreground);
+    --color-destructive: var(--nk-color-destructive);
+    --color-destructive-content: var(--nk-color-destructive-content);
+    --color-destructive-foreground: var(--nk-color-destructive-foreground);
 
     --radius-sm: var(--nk-radius-sm);
     --radius-md: var(--nk-radius-md);