nanoui 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f766927e1424d01ab34dd6f17a48b877f19de856399f5cb2584e86b6cc5accad
-  data.tar.gz: a09a0124675316288e9ac788c0207f035b379ecf305f388f9da619a82002aeae
+  metadata.gz: 82bc23f334e4806d1a963f7076b8ae2a91ccbd6cc29661313ccb183a390271e6
+  data.tar.gz: dc7f106ca2619cbeeb427f5adf5bd61f9dbe874a904cf3d8aba830935f1c7c23
 SHA512:
-  metadata.gz: ce86b42ceaf868b5fcc626d2f7cabcce77bfe273636e78cca191adbf783473c1b92fa0e44de1e0c1d44360aa9095048d78a0f959fb287a7aca4a55d576ae7d53
-  data.tar.gz: 50b79fafd8493e2981d864cce626b121096eebd24a0206c670496bdace202bc6d85196bedd235ca2963b612a9418775c444b55fed8f7ae92f723057e46212e52
+  metadata.gz: 86caab6ae5da7d790a717af769fbc5af29ab6ab9a0581a9fe5c1a4469171f48aef242af66d805dfebe03db9818b57a42a107b101312a7d1fa922176500e1ef28
+  data.tar.gz: f3b1f8bd33b51c66be3bc939302d7a7f3acc4d42272863e49aa336257409a61805e22f35ddb4a1787c17d4eff396a0cc4da0030cc239d3e0b499f55b343633c3

data/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 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,15 @@
 
 Vanilla CSS + Stimulus component library for Rails. Zero runtime dependencies.
 
-18 components. Semantic HTML. Accessible by default. No build step.
+23 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 23 components with interactive examples.
 
-## What's New in v0.3.0
+## What's New in v0.5.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.
+- **5 new components** — Navbar, Sidebar, Breadcrumb, Avatar, and Skeleton
+- **Native CSS nesting** — All component CSS refactored to use native nesting for better readability
+- **New component groups** — `navigation` (navbar, sidebar, breadcrumb) and `feedback` (avatar, skeleton)
 
 ## Installation
 
@@ -68,6 +68,8 @@ 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"
 ```
 
 Or register manually:
@@ -464,6 +466,123 @@ 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)
+
+---
+
 ## Design Tokens
 
 Customize your theme by editing the CSS custom properties:
@@ -498,12 +617,17 @@ All components update automatically, including dark mode.
 | **Forms** | Checkbox, Radio, Switch, Select |
 | **Overlays** | Dialog, Dropdown, Tooltip, Toast |
 | **Data** | Table, Tabs, Accordion, Progress |
+| **Navigation** | Navbar, Sidebar, Breadcrumb |
+| **Feedback** | Avatar, Skeleton |
+| **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 --all
 ```
 

data/lib/generators/nanoui/component_generator.rb

@@ -22,6 +22,11 @@ module Nanoui
         tabs
         accordion
         progress
+        navbar
+        sidebar
+        breadcrumb
+        avatar
+        skeleton
         container
       ].freeze
 
@@ -33,14 +38,16 @@ module Nanoui
       class_option :all, type: :boolean, default: false, desc: "Install all components"
 
       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],
+        "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],
+        "navigation"  => %w[navbar sidebar breadcrumb],
+        "feedback"    => %w[avatar skeleton],
+        "layout"      => %w[container],
       }.freeze
 
-      STIMULUS_COMPONENTS = %w[dialog dropdown tooltip toast tabs accordion switch].freeze
+      STIMULUS_COMPONENTS = %w[dialog dropdown tooltip toast tabs accordion switch navbar sidebar].freeze
 
       def resolve_components
         @resolved = if options[:all]

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

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

@@ -5,74 +5,74 @@
   border-radius: var(--radius-lg);
   border: 1px solid hsl(var(--color-border));
   background-color: hsl(var(--color-background));
-}
 
-.nano-alert__icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  margin-top: var(--space-0-5);
-}
+  .nano-alert__icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    margin-top: var(--space-0-5);
 
-.nano-alert__icon svg {
-  width: 1rem;
-  height: 1rem;
-}
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
 
-.nano-alert__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
+  .nano-alert__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
 
-.nano-alert__title {
-  font-size: var(--text-sm);
-  font-weight: var(--font-semibold);
-  line-height: var(--leading-normal);
-  color: hsl(var(--color-foreground));
-}
+  .nano-alert__title {
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+    line-height: var(--leading-normal);
+    color: hsl(var(--color-foreground));
+  }
 
-.nano-alert__description {
-  font-size: var(--text-sm);
-  line-height: var(--leading-normal);
-  color: hsl(var(--color-foreground));
-}
+  .nano-alert__description {
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+    color: hsl(var(--color-foreground));
+  }
 
-.nano-alert--destructive {
-  border-color: hsl(var(--color-destructive) / 0.5);
-  background-color: hsl(var(--color-destructive) / 0.08);
-}
+  &--destructive {
+    border-color: hsl(var(--color-destructive) / 0.5);
+    background-color: hsl(var(--color-destructive) / 0.08);
 
-.nano-alert--destructive .nano-alert__icon {
-  color: hsl(var(--color-destructive));
-}
+    .nano-alert__icon {
+      color: hsl(var(--color-destructive));
+    }
 
-.nano-alert--destructive .nano-alert__title {
-  color: hsl(var(--color-destructive));
-}
+    .nano-alert__title {
+      color: hsl(var(--color-destructive));
+    }
+  }
 
-.nano-alert--success {
-  border-color: hsl(var(--color-success) / 0.5);
-  background-color: hsl(var(--color-success) / 0.08);
-}
+  &--success {
+    border-color: hsl(var(--color-success) / 0.5);
+    background-color: hsl(var(--color-success) / 0.08);
 
-.nano-alert--success .nano-alert__icon {
-  color: hsl(var(--color-success));
-}
+    .nano-alert__icon {
+      color: hsl(var(--color-success));
+    }
 
-.nano-alert--success .nano-alert__title {
-  color: hsl(var(--color-success));
-}
+    .nano-alert__title {
+      color: hsl(var(--color-success));
+    }
+  }
 
-.nano-alert--warning {
-  border-color: hsl(var(--color-warning) / 0.5);
-  background-color: hsl(var(--color-warning) / 0.08);
-}
+  &--warning {
+    border-color: hsl(var(--color-warning) / 0.5);
+    background-color: hsl(var(--color-warning) / 0.08);
 
-.nano-alert--warning .nano-alert__icon {
-  color: hsl(var(--color-warning));
-}
+    .nano-alert__icon {
+      color: hsl(var(--color-warning));
+    }
 
-.nano-alert--warning .nano-alert__title {
-  color: hsl(var(--color-warning));
+    .nano-alert__title {
+      color: hsl(var(--color-warning));
+    }
+  }
 }

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

@@ -0,0 +1,88 @@
+.nano-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  background-color: hsl(var(--color-muted));
+  position: relative;
+  flex-shrink: 0;
+
+  .nano-avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nano-avatar__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: hsl(var(--color-muted-foreground));
+  }
+
+  .nano-avatar__status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border: 2px solid hsl(var(--color-background));
+    border-radius: var(--radius-full);
+
+    &--online {
+      background-color: hsl(var(--color-success));
+    }
+
+    &--offline {
+      background-color: hsl(var(--color-muted-foreground));
+    }
+
+    &--busy {
+      background-color: hsl(var(--color-destructive));
+    }
+  }
+
+  &--sm {
+    width: 32px;
+    height: 32px;
+
+    .nano-avatar__fallback {
+      font-size: var(--text-xs);
+    }
+
+    .nano-avatar__status {
+      width: 8px;
+      height: 8px;
+    }
+  }
+
+  &--lg {
+    width: 48px;
+    height: 48px;
+
+    .nano-avatar__fallback {
+      font-size: var(--text-base);
+    }
+  }
+
+  &--xl {
+    width: 64px;
+    height: 64px;
+
+    .nano-avatar__fallback {
+      font-size: var(--text-lg);
+    }
+
+    .nano-avatar__status {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}

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

@@ -8,41 +8,41 @@
   line-height: var(--leading-none);
   padding: var(--space-1) var(--space-2-5);
   white-space: nowrap;
-}
 
-.nano-badge--primary {
-  background-color: hsl(var(--color-primary));
-  color: hsl(var(--color-primary-foreground));
-}
+  &--primary {
+    background-color: hsl(var(--color-primary));
+    color: hsl(var(--color-primary-foreground));
+  }
 
-.nano-badge--secondary {
-  background-color: hsl(var(--color-secondary));
-  color: hsl(var(--color-secondary-foreground));
-}
+  &--secondary {
+    background-color: hsl(var(--color-secondary));
+    color: hsl(var(--color-secondary-foreground));
+  }
 
-.nano-badge--destructive {
-  background-color: hsl(var(--color-destructive));
-  color: hsl(var(--color-destructive-foreground));
-}
+  &--destructive {
+    background-color: hsl(var(--color-destructive));
+    color: hsl(var(--color-destructive-foreground));
+  }
 
-.nano-badge--outline {
-  background-color: transparent;
-  border: 1px solid hsl(var(--color-border));
-  color: hsl(var(--color-foreground));
-}
+  &--outline {
+    background-color: transparent;
+    border: 1px solid hsl(var(--color-border));
+    color: hsl(var(--color-foreground));
+  }
 
-.nano-badge--success {
-  background-color: hsl(var(--color-success));
-  color: hsl(var(--color-success-foreground));
-}
+  &--success {
+    background-color: hsl(var(--color-success));
+    color: hsl(var(--color-success-foreground));
+  }
 
-.nano-badge--warning {
-  background-color: hsl(var(--color-warning));
-  color: hsl(var(--color-warning-foreground));
-}
+  &--warning {
+    background-color: hsl(var(--color-warning));
+    color: hsl(var(--color-warning-foreground));
+  }
 
-.nano-badge svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  flex-shrink: 0;
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    flex-shrink: 0;
+  }
 }