nanoui 0.4.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f766927e1424d01ab34dd6f17a48b877f19de856399f5cb2584e86b6cc5accad
-  data.tar.gz: a09a0124675316288e9ac788c0207f035b379ecf305f388f9da619a82002aeae
+  metadata.gz: 7853589240e9826e1a84eacb068ffd3ec668c5c459081cfe3a8d93fd4231c096
+  data.tar.gz: d62fa64e526a04c473f30355e0cde98c5441a7e136bff1813ff08a376af0728f
 SHA512:
-  metadata.gz: ce86b42ceaf868b5fcc626d2f7cabcce77bfe273636e78cca191adbf783473c1b92fa0e44de1e0c1d44360aa9095048d78a0f959fb287a7aca4a55d576ae7d53
-  data.tar.gz: 50b79fafd8493e2981d864cce626b121096eebd24a0206c670496bdace202bc6d85196bedd235ca2963b612a9418775c444b55fed8f7ae92f723057e46212e52
+  metadata.gz: bb21d047b98e632f831fdf5dc96a0001f7cb6222ca566dd60b72a3b23ac5968f15b6b07dc0a4d0b7a7c35410607c4f1defcc1a858ce468a50f165f085e5c0a96
+  data.tar.gz: f1710c2cc03164d20663095e0b0acb7fae811498f754c43c23236d02c99e400c6e85f5771168ae56a628d7526c3181049af08886e6957df09e5bc9c9e770f1a7

data/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## 0.6.0 (2026-04-17)
+
+### Added
+
+- **Stat** component — dashboard KPI card with label, value, delta, and optional footer (CSS only)
+- **Empty state** component — centered "no data yet" / "get started" layout with icon, title, description, and actions (CSS only)
+- **Timeline** component — vertical activity feed with color-coded markers for retry history, audit logs, and status changes (CSS only)
+- **Checklist** component — onboarding / setup checklist with pending / current / done states and optional progress summary (CSS only)
+- **Copy** component — one-click copy-to-clipboard button with transient success state and `execCommand` fallback (CSS + Stimulus)
+- **Code** component — monospace block for snippets, inline fragments, and terminal-style output (CSS only)
+- **Upload** component — drag-and-drop file input with preview, size/type validation, and accessible fallback (CSS + Stimulus)
+- **Data-table Stimulus controller** — click-to-sort headers (`string` / `number` / `date`), dispatches `nanoui-data-table:sort` for server-side sorting; paired with new CSS for `.nano-table__header--sortable` and `.nano-table-pagination`
+- **Toast action buttons** — `.nano-toast__action` is now a fully styled inline CTA that adopts each variant's accent color
+- New component groups: `dashboard` (stat, empty, timeline, checklist) and `utilities` (copy, code)
+- GitHub Actions workflows for CI (RSpec on Ruby 3.1 / 3.2 / 3.3 + Rubocop) and Release (automated gem publish on `v*.*.*` tags)
+- Rubocop config with `rubocop-rspec` plugin
+
+### Changed
+
+- Component count: 23 → 30
+- Stimulus controllers: 9 → 12
+- Component generator now maps each component to its controller files via `CONTROLLER_FILES`; installing `table` automatically installs the richer `data_table` controller
+- Gemspec declares `rubocop` and `rubocop-rspec` as development dependencies
+
+## 0.5.0 (2026-03-21)
+
+### Added
+
+- **Navbar** component — Responsive top navigation bar with mobile hamburger menu (CSS + Stimulus)
+- **Sidebar** component — Collapsible sidebar navigation panel with groups and icons (CSS + Stimulus)
+- **Breadcrumb** component — Navigation trail with separators (CSS only)
+- **Avatar** component — Circular avatar with image/initials fallback and status indicator (CSS only)
+- **Skeleton** component — Loading placeholder with shimmer animation (CSS only)
+- New component groups: `navigation` (navbar, sidebar, breadcrumb) and `feedback` (avatar, skeleton)
+
+### Changed
+
+- Refactored all CSS to use native CSS nesting for improved readability and maintainability
+- Component count: 18 → 23
+- Stimulus controllers: 7 → 9
+
+---
+
+## 0.4.0 (2026-03-15)
+
+### Added
+
+- **Container** layout component with sm, md, lg sizes
+
+---
+
 ## 0.3.0 (2026-03-12)
 
 ### Breaking changes

data/README.md

@@ -2,15 +2,17 @@
 
 Vanilla CSS + Stimulus component library for Rails. Zero runtime dependencies.
 
-18 components. Semantic HTML. Accessible by default. No build step.
+30 components. Semantic HTML. Accessible by default. No build step.
 
-**[Documentation & Live Previews](https://chille1987.github.io/nanoui/)** — Browse all 18 components with interactive examples.
+**[Documentation & Live Previews](https://chille1987.github.io/nanoui/)** — Browse all 30 components with interactive examples.
 
-## What's New in v0.3.0
+## What's New in v0.6.0
 
-- **Native element styling** — Bare `<button>`, `<input>`, `<select>`, and `<label>` elements are styled out of the box. No `.nano-*` classes needed for default styling. Classes still work for variants.
-- **No @import needed** — Propshaft auto-loads all CSS files. Just run the generators and go.
-- **HTML-only components** — No ERB partials. Use plain HTML with CSS classes directly.
+- **7 new components** — Stat, Empty state, Timeline, Checklist, Copy, Code, Upload
+- **Sortable data tables** — `nanoui-data-table` Stimulus controller with client- or server-side sorting + pagination styling
+- **Toast action buttons** — inline CTAs styled to match each toast variant
+- **New component groups** — `dashboard` (stat, empty, timeline, checklist) and `utilities` (copy, code)
+- **CI + release automation** — GitHub Actions for RSpec / Rubocop and tag-driven gem publishing
 
 ## Installation
 
@@ -61,13 +63,18 @@ If NanoUI falls back to system fonts instead of Inter:
 With Rails 8 + importmap + `eagerLoadControllersFrom`, controllers auto-register by file name. Rename the controllers with a `nanoui_` prefix:
 
 ```
-nanoui_dialog_controller.js    → data-controller="nanoui-dialog"
-nanoui_dropdown_controller.js  → data-controller="nanoui-dropdown"
-nanoui_tooltip_controller.js   → data-controller="nanoui-tooltip"
-nanoui_toast_controller.js     → data-controller="nanoui-toast"
-nanoui_tabs_controller.js      → data-controller="nanoui-tabs"
-nanoui_accordion_controller.js → data-controller="nanoui-accordion"
-nanoui_switch_controller.js    → data-controller="nanoui-switch"
+nanoui_dialog_controller.js      → data-controller="nanoui-dialog"
+nanoui_dropdown_controller.js    → data-controller="nanoui-dropdown"
+nanoui_tooltip_controller.js     → data-controller="nanoui-tooltip"
+nanoui_toast_controller.js       → data-controller="nanoui-toast"
+nanoui_tabs_controller.js        → data-controller="nanoui-tabs"
+nanoui_accordion_controller.js   → data-controller="nanoui-accordion"
+nanoui_switch_controller.js      → data-controller="nanoui-switch"
+nanoui_navbar_controller.js      → data-controller="nanoui-navbar"
+nanoui_sidebar_controller.js     → data-controller="nanoui-sidebar"
+nanoui_copy_controller.js        → data-controller="nanoui-copy"
+nanoui_upload_controller.js      → data-controller="nanoui-upload"
+nanoui_data_table_controller.js  → data-controller="nanoui-data-table"
 ```
 
 Or register manually:
@@ -464,6 +471,328 @@ Native `<progress>` element with custom styling.
 
 ---
 
+### Navigation
+
+#### Navbar
+
+Responsive top navigation bar with mobile hamburger menu.
+
+```html
+<nav class="nano-navbar nano-navbar--sticky" data-controller="nanoui-navbar">
+  <a href="/" class="nano-navbar__brand">MyApp</a>
+  <ul class="nano-navbar__links" data-nanoui-navbar-target="links">
+    <li><a href="/dashboard" class="nano-navbar__link nano-navbar__link--active">Dashboard</a></li>
+    <li><a href="/projects" class="nano-navbar__link">Projects</a></li>
+    <li><a href="/settings" class="nano-navbar__link">Settings</a></li>
+  </ul>
+  <div class="nano-navbar__actions">
+    <button class="nano-btn--outline nano-btn--sm">Log out</button>
+  </div>
+  <button class="nano-navbar__toggle" data-action="nanoui-navbar#toggle"
+          data-nanoui-navbar-target="toggle" aria-label="Toggle menu">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M3 12h18M3 6h18M3 18h18"/>
+    </svg>
+  </button>
+</nav>
+```
+
+**Modifiers:** `--sticky`
+
+#### Sidebar
+
+Collapsible sidebar navigation panel with groups and icons.
+
+```html
+<aside class="nano-sidebar" data-controller="nanoui-sidebar">
+  <div class="nano-sidebar__header">
+    <span>MyApp</span>
+    <button class="nano-sidebar__toggle" data-action="nanoui-sidebar#toggle"
+            data-nanoui-sidebar-target="toggle">⟨</button>
+  </div>
+  <nav class="nano-sidebar__nav">
+    <div class="nano-sidebar__group">
+      <span class="nano-sidebar__group-label">Main</span>
+      <a href="/dashboard" class="nano-sidebar__item nano-sidebar__item--active">
+        <svg><!-- icon --></svg> <span>Dashboard</span>
+      </a>
+      <a href="/projects" class="nano-sidebar__item">
+        <svg><!-- icon --></svg> <span>Projects</span>
+      </a>
+    </div>
+  </nav>
+  <div class="nano-sidebar__footer">
+    <a href="/settings" class="nano-sidebar__item">
+      <svg><!-- icon --></svg> <span>Settings</span>
+    </a>
+  </div>
+</aside>
+```
+
+#### Breadcrumb
+
+Navigation trail with separators.
+
+```html
+<nav class="nano-breadcrumb" aria-label="Breadcrumb">
+  <ol class="nano-breadcrumb__list">
+    <li class="nano-breadcrumb__item">
+      <a href="/" class="nano-breadcrumb__link">Home</a>
+      <span class="nano-breadcrumb__separator" aria-hidden="true"></span>
+    </li>
+    <li class="nano-breadcrumb__item">
+      <a href="/projects" class="nano-breadcrumb__link">Projects</a>
+      <span class="nano-breadcrumb__separator" aria-hidden="true"></span>
+    </li>
+    <li class="nano-breadcrumb__item">
+      <span class="nano-breadcrumb__link" aria-current="page">Settings</span>
+    </li>
+  </ol>
+</nav>
+```
+
+---
+
+### Feedback
+
+#### Avatar
+
+Circular avatar with image or initials fallback and optional status indicator.
+
+```html
+<div class="nano-avatar">
+  <img src="/avatar.jpg" alt="Jane Doe" class="nano-avatar__image">
+  <span class="nano-avatar__status nano-avatar__status--online"></span>
+</div>
+
+<div class="nano-avatar nano-avatar--lg">
+  <span class="nano-avatar__fallback">JD</span>
+</div>
+```
+
+**Sizes:** sm (32px), default (40px), lg (48px), xl (64px)
+**Status:** `--online`, `--offline`, `--busy`
+
+#### Skeleton
+
+Loading placeholder with shimmer animation.
+
+```html
+<div class="nano-skeleton" style="width: 200px;"></div>
+<div class="nano-skeleton nano-skeleton--text" style="width: 80%;"></div>
+<div class="nano-skeleton nano-skeleton--circle"></div>
+<div class="nano-skeleton nano-skeleton--card"></div>
+```
+
+**Variants:** default (1rem line), `--text` (0.75rem), `--circle` (40px), `--card` (200px)
+
+---
+
+### Dashboard
+
+#### Stat
+
+Dashboard KPI card with label, value, optional delta, helper text, and footer. Group multiples with `.nano-stat-grid`.
+
+```html
+<div class="nano-stat">
+  <span class="nano-stat__label">Recovered revenue</span>
+  <span class="nano-stat__value">$4,238</span>
+  <span class="nano-stat__delta nano-stat__delta--up">12% vs last month</span>
+</div>
+
+<div class="nano-stat-grid">
+  <div class="nano-stat">…</div>
+  <div class="nano-stat nano-stat--compact">…</div>
+</div>
+```
+
+**Variants:** default, `--elevated`, `--bordered`, `--compact`
+
+#### Empty state
+
+Centered layout for "no data yet" or "get started" screens.
+
+```html
+<div class="nano-empty">
+  <div class="nano-empty__icon"><!-- SVG --></div>
+  <h3 class="nano-empty__title">No failed payments yet</h3>
+  <p class="nano-empty__description">When Stripe reports a failed charge we'll queue retries here.</p>
+  <div class="nano-empty__actions">
+    <button class="nano-btn nano-btn--primary">Connect Stripe</button>
+  </div>
+</div>
+```
+
+**Variants:** default, `--bordered` (dashed outline), `--compact`
+
+#### Timeline
+
+Vertical activity feed with color-coded markers.
+
+```html
+<ol class="nano-timeline">
+  <li class="nano-timeline__item nano-timeline__item--destructive">
+    <span class="nano-timeline__marker"><!-- SVG --></span>
+    <span class="nano-timeline__line"></span>
+    <div class="nano-timeline__body">
+      <div class="nano-timeline__header">
+        <span class="nano-timeline__title">Payment failed</span>
+        <time class="nano-timeline__time">3 days ago</time>
+      </div>
+      <span class="nano-timeline__description">Card declined — insufficient funds.</span>
+    </div>
+  </li>
+</ol>
+```
+
+**Item states:** default, `--info`, `--success`, `--warning`, `--destructive`
+
+#### Checklist
+
+Onboarding / setup checklist with pending, current, and done states. Drive the summary bar with the `--nano-checklist-progress` CSS variable.
+
+```html
+<div class="nano-checklist">
+  <div class="nano-checklist__summary">
+    <span><span class="nano-checklist__count">2 of 4</span> complete</span>
+    <span class="nano-checklist__bar" style="--nano-checklist-progress: 50%;">
+      <span class="nano-checklist__bar-fill"></span>
+    </span>
+  </div>
+  <div class="nano-checklist__item nano-checklist__item--done">
+    <span class="nano-checklist__indicator"><!-- check SVG --></span>
+    <div class="nano-checklist__body">
+      <span class="nano-checklist__title">Connect Stripe</span>
+    </div>
+  </div>
+  <div class="nano-checklist__item nano-checklist__item--current">
+    <span class="nano-checklist__indicator">3</span>
+    <div class="nano-checklist__body">
+      <span class="nano-checklist__title">Pick an email template</span>
+      <a class="nano-checklist__action" href="#">Choose template →</a>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+### Utilities
+
+#### Copy to clipboard
+
+Button (or button + value) that copies to clipboard with a transient success state. Uses the Clipboard API with a `document.execCommand` fallback.
+
+```html
+<div class="nano-copy" data-controller="nanoui-copy">
+  <span class="nano-copy__value" data-nanoui-copy-target="source">
+    https://app.example.com/webhooks/stripe
+  </span>
+  <button class="nano-copy__button"
+          data-nanoui-copy-target="button"
+          data-action="nanoui-copy#copy"
+          type="button">
+    <span data-nanoui-copy-target="idle">Copy</span>
+    <span data-nanoui-copy-target="copied" hidden>Copied</span>
+  </button>
+</div>
+```
+
+Dispatches `nanoui-copy:copied` with `{ text }` in the event detail.
+
+#### Code
+
+Monospace block with optional header, inline variant, terminal (dark) variant, and wrap mode.
+
+```html
+<div class="nano-code">
+  <div class="nano-code__header">
+    <span class="nano-code__language">shell</span>
+  </div>
+  <pre class="nano-code__body"><code>stripe listen --forward-to localhost:3000/webhooks/stripe</code></pre>
+</div>
+
+<!-- Inline -->
+<p>Set <code class="nano-code nano-code--inline">STRIPE_WEBHOOK_SECRET</code> before deploying.</p>
+```
+
+**Variants:** default, `--inline`, `--terminal`, `--wrap`
+
+---
+
+### Data table enhancements (built on Table)
+
+Add sortable columns and pagination to any existing table. Installing the `table` component also copies `nanoui_data_table_controller.js`.
+
+```html
+<div class="nano-table-wrapper" data-controller="nanoui-data-table">
+  <table class="nano-table nano-table--hoverable">
+    <thead class="nano-table__head">
+      <tr>
+        <th class="nano-table__header nano-table__header--sortable"
+            data-nanoui-data-table-target="header"
+            data-sort-key="amount"
+            data-sort-type="number"
+            data-action="click->nanoui-data-table#sort">
+          <button type="button" class="nano-table__sort">Amount</button>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="nano-table__body" data-nanoui-data-table-target="body">
+      <tr class="nano-table__row" data-nanoui-data-table-target="row">
+        <td class="nano-table__cell" data-sort-value="49">$49.00</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<nav class="nano-table-pagination" aria-label="Table pagination">
+  <span class="nano-table-pagination__info">Showing <strong>1–10</strong> of <strong>42</strong></span>
+  <span class="nano-table-pagination__controls">
+    <a class="nano-table-pagination__button" aria-current="page" href="?page=1">1</a>
+    <a class="nano-table-pagination__button" href="?page=2">2</a>
+  </span>
+</nav>
+```
+
+Set `data-nanoui-data-table-server-value="true"` to skip client-side sorting and only dispatch the `nanoui-data-table:sort` event (e.g. for Turbo Frames).
+
+Supported `data-sort-type` values: `string` (default), `number`, `date`.
+
+---
+
+### Forms (extended)
+
+#### Upload
+
+Drag-and-drop file input with preview, `maxSize` / `accept` validation, and accessible fallback to the native picker. Wraps a hidden `<input type="file">` so standard form submission works unchanged (including `form_with` + Active Storage).
+
+```html
+<div class="nano-upload"
+     data-controller="nanoui-upload"
+     data-nanoui-upload-accept-value="image/*"
+     data-nanoui-upload-max-size-value="2097152"
+     data-action="dragover->nanoui-upload#onDragover dragleave->nanoui-upload#onDragleave drop->nanoui-upload#onDrop">
+  <input type="file" name="logo" class="nano-upload__input"
+         data-nanoui-upload-target="input"
+         data-action="change->nanoui-upload#onChange">
+  <label class="nano-upload__dropzone"
+         data-nanoui-upload-target="dropzone"
+         data-action="click->nanoui-upload#openPicker"
+         tabindex="0">
+    <span class="nano-upload__icon"><!-- SVG --></span>
+    <span class="nano-upload__prompt"><strong>Click to upload</strong> or drag and drop</span>
+    <span class="nano-upload__hint">PNG or JPG up to 2 MB</span>
+  </label>
+  <!-- preview element is toggled automatically via data-state -->
+</div>
+```
+
+Dispatches `nanoui-upload:selected` and `nanoui-upload:removed`.
+
+---
+
 ## Design Tokens
 
 Customize your theme by editing the CSS custom properties:
@@ -495,15 +824,24 @@ All components update automatically, including dark mode.
 | Group | Components |
 |---|---|
 | **Essentials** | Button, Input, Label, Card, Badge, Alert |
-| **Forms** | Checkbox, Radio, Switch, Select |
+| **Forms** | Checkbox, Radio, Switch, Select, Upload |
 | **Overlays** | Dialog, Dropdown, Tooltip, Toast |
-| **Data** | Table, Tabs, Accordion, Progress |
+| **Data** | Table (with sortable data-table controller), Tabs, Accordion, Progress |
+| **Navigation** | Navbar, Sidebar, Breadcrumb |
+| **Feedback** | Avatar, Skeleton |
+| **Dashboard** | Stat, Empty state, Timeline, Checklist |
+| **Utilities** | Copy to clipboard, Code block |
+| **Layout** | Container |
 
 ```bash
 rails generate nanoui:component --group essentials
 rails generate nanoui:component --group forms
 rails generate nanoui:component --group overlays
 rails generate nanoui:component --group data
+rails generate nanoui:component --group navigation
+rails generate nanoui:component --group feedback
+rails generate nanoui:component --group dashboard
+rails generate nanoui:component --group utilities
 rails generate nanoui:component --all
 ```
 

data/lib/generators/nanoui/component_generator.rb

@@ -22,6 +22,18 @@ module Nanoui
         tabs
         accordion
         progress
+        navbar
+        sidebar
+        breadcrumb
+        avatar
+        skeleton
+        stat
+        empty
+        timeline
+        checklist
+        copy
+        code
+        upload
         container
       ].freeze
 
@@ -34,22 +46,44 @@ module Nanoui
 
       GROUPS = {
         "essentials" => %w[button input label card badge alert],
-        "forms"      => %w[button input label checkbox radio switch select badge alert],
-        "overlays"   => %w[dialog dropdown tooltip toast],
-        "data"       => %w[table tabs accordion progress],
-        "layout"     => %w[container],
+        "forms" => %w[button input label checkbox radio switch select badge alert upload],
+        "overlays" => %w[dialog dropdown tooltip toast],
+        "data" => %w[table tabs accordion progress],
+        "navigation" => %w[navbar sidebar breadcrumb],
+        "feedback" => %w[avatar skeleton],
+        "dashboard" => %w[stat empty timeline checklist],
+        "utilities" => %w[copy code],
+        "layout" => %w[container],
       }.freeze
 
-      STIMULUS_COMPONENTS = %w[dialog dropdown tooltip toast tabs accordion switch].freeze
+      # Maps a component name to the Stimulus controller files it installs.
+      # Most components ship with a same-named controller, but `table` ships
+      # with the richer `data_table` controller for sort + pagination behavior.
+      CONTROLLER_FILES = {
+        "dialog" => %w[dialog],
+        "dropdown" => %w[dropdown],
+        "tooltip" => %w[tooltip],
+        "toast" => %w[toast],
+        "tabs" => %w[tabs],
+        "accordion" => %w[accordion],
+        "switch" => %w[switch],
+        "navbar" => %w[navbar],
+        "sidebar" => %w[sidebar],
+        "copy" => %w[copy],
+        "upload" => %w[upload],
+        "table" => %w[data_table],
+      }.freeze
+
+      STIMULUS_COMPONENTS = CONTROLLER_FILES.keys.freeze
 
       def resolve_components
         @resolved = if options[:all]
-          GROUPS.values.flatten.uniq
-        elsif options[:group]
-          GROUPS.fetch(options[:group]) { abort "Unknown group: #{options[:group]}" }
-        else
-          components
-        end
+                      GROUPS.values.flatten.uniq
+                    elsif options[:group]
+                      GROUPS.fetch(options[:group]) { abort "Unknown group: #{options[:group]}" }
+                    else
+                      components
+                    end
 
         abort "Specify components, --group, or --all" if @resolved.empty?
       end
@@ -64,9 +98,10 @@ module Nanoui
 
       def copy_stimulus_controllers
         @resolved.each do |name|
-          next unless STIMULUS_COMPONENTS.include?(name)
-          copy_file "js/controllers/#{name}_controller.js",
-                    "app/javascript/controllers/nanoui_#{name}_controller.js"
+          CONTROLLER_FILES.fetch(name, []).each do |controller|
+            copy_file "js/controllers/#{controller}_controller.js",
+                      "app/javascript/controllers/nanoui_#{controller}_controller.js"
+          end
         end
       end
 

data/lib/generators/nanoui/templates/css/components/accordion.css

@@ -1,63 +1,63 @@
 .nano-accordion {
   border: 1px solid hsl(var(--color-border));
   border-radius: var(--radius-lg);
-}
-
-.nano-accordion__item {
-  border-bottom: 1px solid hsl(var(--color-border));
-}
-
-.nano-accordion__item:first-child {
-  border-top-left-radius: var(--radius-lg);
-  border-top-right-radius: var(--radius-lg);
-}
-
-.nano-accordion__item:last-child {
-  border-bottom: none;
-  border-bottom-left-radius: var(--radius-lg);
-  border-bottom-right-radius: var(--radius-lg);
-}
-
-.nano-accordion__trigger {
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--space-4);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: hsl(var(--color-foreground));
-  cursor: pointer;
-  transition: background-color var(--duration-fast) var(--ease-default);
-}
-
-.nano-accordion__trigger:hover {
-  background-color: hsl(var(--color-muted) / 0.5);
-}
-
-.nano-accordion__trigger:focus-visible {
-  outline: 2px solid hsl(var(--color-ring));
-  outline-offset: -2px;
-}
-
-.nano-accordion__icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  color: hsl(var(--color-muted-foreground));
-  transition: transform var(--duration-normal) var(--ease-default);
-}
-
-.nano-accordion__item[open] .nano-accordion__icon {
-  transform: rotate(180deg);
-}
 
-.nano-accordion__content {
-  padding: 0 var(--space-4) var(--space-4);
-  font-size: var(--text-sm);
-  line-height: var(--leading-normal);
-  color: hsl(var(--color-muted-foreground));
-  display: grid;
-  grid-template-rows: 1fr;
+  .nano-accordion__item {
+    border-bottom: 1px solid hsl(var(--color-border));
+
+    &:first-child {
+      border-top-left-radius: var(--radius-lg);
+      border-top-right-radius: var(--radius-lg);
+    }
+
+    &:last-child {
+      border-bottom: none;
+      border-bottom-left-radius: var(--radius-lg);
+      border-bottom-right-radius: var(--radius-lg);
+    }
+
+    &[open] .nano-accordion__icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  .nano-accordion__trigger {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space-4);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: hsl(var(--color-foreground));
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-default);
+
+    &:hover {
+      background-color: hsl(var(--color-muted) / 0.5);
+    }
+
+    &:focus-visible {
+      outline: 2px solid hsl(var(--color-ring));
+      outline-offset: -2px;
+    }
+  }
+
+  .nano-accordion__icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: hsl(var(--color-muted-foreground));
+    transition: transform var(--duration-normal) var(--ease-default);
+  }
+
+  .nano-accordion__content {
+    padding: 0 var(--space-4) var(--space-4);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+    color: hsl(var(--color-muted-foreground));
+    display: grid;
+    grid-template-rows: 1fr;
+  }
 }