nanoui 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e93a8fd3240f6ca51636ddf4607fa5b98d75ffd3d9d3d89f5a07e587ccf5dd41
-  data.tar.gz: 678d26f0b38587acf444cb685cd9ae3d6587f14868b515ca92ff019058f7c162
+  metadata.gz: 1ee0efe5f709d40b9486a2becffafaebc490c770ff33b2ecc5b10133626bc37d
+  data.tar.gz: 873b05607d941e5515a5a699947ce4b03b70a18d21bde51b71f0b8ea1f8e3586
 SHA512:
-  metadata.gz: 32cf0b6c85d29c62a970991e2970acb7e9f0f6fa013aef378f8f21c1317f9f07a92fb8c7f3ec2524fe24fea8dc4b35614dcaff20e5f671c717c533fab739e512
-  data.tar.gz: 75bfb7626afff70a8734733979f5bf372074d4ce7c0e43217498d74140d5d9b165032e8311be11959c6d71c7ba44f2e5010a667e71bb6076bf7ab40ea12f51da
+  metadata.gz: 38d72d4d339a553ce778d211b7bea7cf323205126de29307a6aac578457197b5042e243779c6aa874cf772ef8c58be14d1589a0079b42528deddfc43e7f26a44
+  data.tar.gz: bb3401e429e2c28f4e6e416988ac37822572afdc466140cdab8648b361f10c185fd1261372d85ac10ff138ac9c73b2acd3aed2332dae17e3420e7a8f1447811e

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.3.0 (2026-03-12)
+
+### Breaking changes
+
+- Removed `@import`-based CSS entry point (incompatible with Propshaft)
+- Removed ERB view partials
+
+### Added
+
+- Native HTML element styling (button, input, select, label styled without classes)
+- GitHub Pages documentation site with live component previews
+
+### Changed
+
+- Simplified generators (no more import management)
+
+---
+
 ## 0.1.0 (2026-03-09)
 
 ### Initial release

data/README.md

@@ -4,6 +4,14 @@ Vanilla CSS + Stimulus component library for Rails. Zero runtime dependencies.
 
 18 components. Semantic HTML. Accessible by default. No build step.
 
+**[Documentation & Live Previews](https://chille1987.github.io/nanoui/)** — Browse all 18 components with interactive examples.
+
+## What's New in v0.3.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.
+
 ## Installation
 
 ### Option A: Rubygem with Generators (recommended)
@@ -19,46 +27,28 @@ rails generate nanoui:install          # Base styles and fonts
 rails generate nanoui:component --all  # All components
 ```
 
+Propshaft auto-loads the CSS files — no imports or entry points to manage.
+
 ### Option B: Manual Installation
 
 Copy files directly into your Rails 8 app:
 
 ```bash
-# 1. CSS (base, components, entrypoint, Inter Variable font)
+# 1. CSS (base, components, Inter Variable font)
 mkdir -p app/assets/stylesheets/nanoui
 cp -r lib/generators/nanoui/templates/css/base app/assets/stylesheets/nanoui/
 cp -r lib/generators/nanoui/templates/css/components app/assets/stylesheets/nanoui/
 cp -r lib/generators/nanoui/templates/css/fonts app/assets/stylesheets/nanoui/
-cp lib/generators/nanoui/templates/css/nanoui.css app/assets/stylesheets/nanoui/
 
 # 2. Stimulus controllers
 cp lib/generators/nanoui/templates/js/controllers/*_controller.js \
    app/javascript/controllers/
-
-# 3. ERB partials (optional — you can use CSS classes directly)
-cp lib/generators/nanoui/templates/views/components/ app/views/components/
-```
-
-### Import CSS
-
-Add to `app/assets/stylesheets/application.css`:
-
-```css
-@import "nanoui/nanoui.css";
-```
-
-`rails generate nanoui:install` now creates a foundation-only `nanoui.css`, and each `nanoui:component` run rewrites the component imports so the file only references CSS that actually exists.
-
-NanoUI ships with Inter Variable and expects it at `app/assets/stylesheets/nanoui/fonts/inter-variable.ttf`, which `rails generate nanoui:install` now copies automatically.
-
-Or if using Propshaft, add the import to your layout:
-
-```erb
-<%= stylesheet_link_tag "nanoui/nanoui.css" %>
 ```
 
 ### Troubleshooting Fonts
 
+NanoUI ships with Inter Variable and expects it at `app/assets/stylesheets/nanoui/fonts/inter-variable.ttf`, which `rails generate nanoui:install` copies automatically.
+
 If NanoUI falls back to system fonts instead of Inter:
 
 - Confirm the font file exists at `app/assets/stylesheets/nanoui/fonts/inter-variable.ttf`
@@ -93,9 +83,8 @@ application.register("nanoui-dialog", DialogController)
 
 Add the `.dark` class to `<html>` to toggle dark mode. All color tokens swap automatically.
 
-```erb
-<!-- In your layout -->
-<html class="<%= "dark" if user_prefers_dark? %>">
+```html
+<html class="dark">
 ```
 
 Or toggle via JavaScript:
@@ -106,94 +95,98 @@ document.documentElement.classList.toggle("dark")
 
 ---
 
-## Component Reference
-
-### Essentials
-
-#### Button
+## Native Element Styling
 
-6 variants, 3 sizes, icon-only, loading state.
+NanoUI styles bare HTML elements automatically. No classes required for the defaults:
 
-```erb
-<%= render "components/button", variant: "primary" do %>
-  Save Changes
-<% end %>
+```html
+<!-- Renders as a styled primary button -->
+<button>Save Changes</button>
 
-<%= render "components/button", variant: "outline", size: "sm" do %>
-  Cancel
-<% end %>
+<!-- Renders with input styling -->
+<input type="text" placeholder="Enter your name">
 
-<%= render "components/button", variant: "destructive" do %>
-  Delete
-<% end %>
+<!-- Renders with select styling -->
+<select>
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
 
-<%# Link styled as button %>
-<%= render "components/button", href: "/about", variant: "ghost" do %>
-  Learn More
-<% end %>
+<!-- Renders with label styling -->
+<label for="name">Name</label>
 ```
 
-Or use classes directly:
+Use `.nano-*` classes when you need variants:
 
 ```html
-<button class="nano-btn nano-btn--primary" type="button">Save</button>
-<button class="nano-btn nano-btn--outline nano-btn--sm" type="button">Cancel</button>
-<button class="nano-btn nano-btn--primary" disabled>Disabled</button>
+<button class="nano-btn--outline">Cancel</button>
+<button class="nano-btn--destructive">Delete</button>
+<button class="nano-btn--sm">Small</button>
 ```
 
-**Options:** `variant` (primary, secondary, destructive, outline, ghost, link), `size` (sm, lg, icon), `tag` (:button), `href`, `class`, `html`
+---
 
-#### Input
+## Component Reference
 
-Text fields wrapped in `.nano-field` with label and error support.
+### Essentials
 
-```erb
-<%= render "components/input", label: "Email", type: "email", required: true,
-    html: { placeholder: "you@example.com" } %>
+#### Button
 
-<%= render "components/input", label: "Name", error: "Name is required" %>
+6 variants, 3 sizes, icon-only, loading state. Bare `<button>` renders as a primary button.
+
+```html
+<button>Save Changes</button>
+<button class="nano-btn--outline nano-btn--sm">Cancel</button>
+<button class="nano-btn--destructive">Delete</button>
+<a href="/about" class="nano-btn nano-btn--ghost">Learn More</a>
+<button disabled>Disabled</button>
 ```
 
+**Variants:** primary (default), secondary, destructive, outline, ghost, link
+**Sizes:** sm, lg, icon
+
+#### Input
+
+Text fields wrapped in `.nano-field` with label and error support. Bare `<input>` gets input styling automatically.
+
 ```html
 <div class="nano-field">
-  <label for="email" class="nano-label nano-label--required">Email</label>
-  <input id="email" type="email" class="nano-input" placeholder="you@example.com" required>
+  <label for="email">Email</label>
+  <input id="email" type="email" placeholder="you@example.com" required>
 </div>
-```
 
-**Options:** `label`, `type` ("text"), `required`, `error`, `id`, `class`, `html`
+<div class="nano-field nano-field--error">
+  <label for="name">Name</label>
+  <input id="name" type="text">
+  <p class="nano-field__error">Name is required</p>
+</div>
+```
 
 #### Label
 
-```erb
-<%= render "components/label", for: "name", required: true do %>Name<% end %>
-```
+Bare `<label>` gets label styling. Add `nano-label--required` for the required indicator.
 
 ```html
-<label for="name" class="nano-label nano-label--required">Name</label>
+<label for="name">Name</label>
+<label for="email" class="nano-label--required">Email</label>
 ```
 
 #### Card
 
 Container with header, content, and footer sections.
 
-```erb
-<%= render "components/card",
-    title: "Settings",
-    description: "Manage your account.",
-    footer: render("components/button", variant: "primary") { "Save" } do %>
-  <p>Card body content here.</p>
-<% end %>
-```
-
 ```html
 <article class="nano-card">
   <div class="nano-card__header">
     <h3 class="nano-card__title">Settings</h3>
     <p class="nano-card__description">Manage your account.</p>
   </div>
-  <div class="nano-card__content">...</div>
-  <div class="nano-card__footer">...</div>
+  <div class="nano-card__content">
+    <p>Card body content here.</p>
+  </div>
+  <div class="nano-card__footer">
+    <button>Save</button>
+  </div>
 </article>
 ```
 
@@ -203,13 +196,9 @@ Container with header, content, and footer sections.
 
 Inline status indicators.
 
-```erb
-<%= render "components/badge", variant: "success" do %>Active<% end %>
-<%= render "components/badge", variant: "warning" do %>Pending<% end %>
-```
-
 ```html
 <span class="nano-badge nano-badge--success">Active</span>
+<span class="nano-badge nano-badge--warning">Pending</span>
 <span class="nano-badge nano-badge--destructive">Failed</span>
 ```
 
@@ -219,12 +208,6 @@ Inline status indicators.
 
 Contextual feedback with icon, title, and description.
 
-```erb
-<%= render "components/alert", variant: "success", title: "Saved!" do %>
-  Your changes have been saved successfully.
-<% end %>
-```
-
 ```html
 <div class="nano-alert nano-alert--success" role="alert">
   <div class="nano-alert__icon"><!-- SVG --></div>
@@ -243,11 +226,6 @@ Contextual feedback with icon, title, and description.
 
 #### Checkbox
 
-```erb
-<%= render "components/checkbox", label: "Accept terms", name: "tos", error: true %>
-<%= render "components/checkbox", label: "Remember me", checked: true %>
-```
-
 ```html
 <div class="nano-checkbox">
   <input type="checkbox" id="tos" class="nano-checkbox__input" name="tos">
@@ -255,29 +233,23 @@ Contextual feedback with icon, title, and description.
 </div>
 ```
 
-**Options:** `label`, `name`, `value`, `checked`, `disabled`, `error`, `id`
-
 #### Radio Group
 
-```erb
-<%= render "components/radio_group",
-    legend: "Plan",
-    name: "plan",
-    options: [
-      { label: "Free", value: "free", checked: true },
-      { label: "Pro", value: "pro" },
-      { label: "Enterprise", value: "enterprise" }
-    ] %>
-```
-
 ```html
 <fieldset class="nano-radio-group">
   <legend class="nano-radio-group__legend">Plan</legend>
   <div class="nano-radio">
-    <input type="radio" id="plan-0" name="plan" value="free" class="nano-radio__input" checked>
-    <label for="plan-0" class="nano-radio__label">Free</label>
+    <input type="radio" id="plan-free" name="plan" value="free" class="nano-radio__input" checked>
+    <label for="plan-free" class="nano-radio__label">Free</label>
+  </div>
+  <div class="nano-radio">
+    <input type="radio" id="plan-pro" name="plan" value="pro" class="nano-radio__input">
+    <label for="plan-pro" class="nano-radio__label">Pro</label>
+  </div>
+  <div class="nano-radio">
+    <input type="radio" id="plan-ent" name="plan" value="enterprise" class="nano-radio__input">
+    <label for="plan-ent" class="nano-radio__label">Enterprise</label>
   </div>
-  <!-- ... -->
 </fieldset>
 ```
 
@@ -285,10 +257,6 @@ Contextual feedback with icon, title, and description.
 
 Toggle switch with Stimulus controller.
 
-```erb
-<%= render "components/switch", label: "Enable notifications", checked: true %>
-```
-
 ```html
 <button type="button" role="switch" aria-checked="true" class="nano-switch"
         data-controller="nanoui-switch" data-action="nanoui-switch#toggle">
@@ -299,24 +267,19 @@ Toggle switch with Stimulus controller.
 
 #### Select
 
-Native `<select>` with custom styling.
-
-```erb
-<%= render "components/select",
-    label: "Country",
-    placeholder: "Select a country",
-    options: ["United States", "Canada", "United Kingdom"] %>
-
-<%= render "components/select",
-    label: "Role",
-    required: true,
-    options: [
-      { label: "Admin", value: "admin" },
-      { label: "Editor", value: "editor" }
-    ] %>
-```
+Native `<select>` with custom styling. Bare `<select>` gets styled automatically.
 
-**Options:** `label`, `placeholder`, `options`, `required`, `error`, `disabled`, `name`, `id`
+```html
+<div class="nano-field">
+  <label for="country">Country</label>
+  <select id="country">
+    <option value="">Select a country</option>
+    <option>United States</option>
+    <option>Canada</option>
+    <option>United Kingdom</option>
+  </select>
+</div>
+```
 
 ---
 
@@ -326,19 +289,6 @@ Native `<select>` with custom styling.
 
 Native `<dialog>` with `showModal()` — free focus trap, Escape close, and `::backdrop`.
 
-```erb
-<%= render "components/dialog",
-    title: "Edit Profile",
-    description: "Update your info.",
-    trigger: render("components/button") { "Open" },
-    footer: safe_join([
-      render("components/button", variant: "outline", html: { data: { action: "nanoui-dialog#close" } }) { "Cancel" },
-      render("components/button", variant: "primary") { "Save" }
-    ]) do %>
-  <p>Dialog body content.</p>
-<% end %>
-```
-
 ```html
 <div data-controller="nanoui-dialog">
   <button data-action="nanoui-dialog#open">Open</button>
@@ -347,12 +297,18 @@ Native `<dialog>` with `showModal()` — free focus trap, Escape close, and `::b
           aria-labelledby="dialog-title">
     <div class="nano-dialog__content">
       <header class="nano-dialog__header">
-        <h2 id="dialog-title" class="nano-dialog__title">Title</h2>
+        <h2 id="dialog-title" class="nano-dialog__title">Edit Profile</h2>
+        <p class="nano-dialog__description">Update your info.</p>
       </header>
-      <div class="nano-dialog__body">...</div>
-      <footer class="nano-dialog__footer">...</footer>
+      <div class="nano-dialog__body">
+        <p>Dialog body content.</p>
+      </div>
+      <footer class="nano-dialog__footer">
+        <button class="nano-btn--outline" data-action="nanoui-dialog#close">Cancel</button>
+        <button>Save</button>
+      </footer>
       <button class="nano-dialog__close" data-action="nanoui-dialog#close"
-              aria-label="Close dialog">...</button>
+              aria-label="Close dialog">&times;</button>
     </div>
   </dialog>
 </div>
@@ -364,14 +320,16 @@ Native `<dialog>` with `showModal()` — free focus trap, Escape close, and `::b
 
 Click-activated menu with keyboard navigation.
 
-```erb
-<%= render "components/dropdown",
-    trigger: render("components/button", variant: "outline") { "Options" } do %>
-  <button class="nano-dropdown__item">Profile</button>
-  <button class="nano-dropdown__item">Settings</button>
-  <div class="nano-dropdown__separator"></div>
-  <button class="nano-dropdown__item">Log out</button>
-<% end %>
+```html
+<div data-controller="nanoui-dropdown">
+  <button class="nano-btn--outline" data-action="nanoui-dropdown#toggle">Options</button>
+  <div class="nano-dropdown__menu" data-nanoui-dropdown-target="menu">
+    <button class="nano-dropdown__item">Profile</button>
+    <button class="nano-dropdown__item">Settings</button>
+    <div class="nano-dropdown__separator"></div>
+    <button class="nano-dropdown__item">Log out</button>
+  </div>
+</div>
 ```
 
 Keyboard: Arrow Up/Down navigates items, Escape closes, click outside closes.
@@ -380,12 +338,12 @@ Keyboard: Arrow Up/Down navigates items, Escape closes, click outside closes.
 
 Hover/focus tooltip with configurable delay.
 
-```erb
-<%= render "components/tooltip", text: "Add to favorites", position: "top" do %>
-  <%= render "components/button", variant: "primary", size: "icon" do %>
+```html
+<div data-controller="nanoui-tooltip" data-nanoui-tooltip-text-value="Add to favorites">
+  <button class="nano-btn--primary nano-btn--icon">
     <!-- heart icon SVG -->
-  <% end %>
-<% end %>
+  </button>
+</div>
 ```
 
 **Positions:** top (default), bottom, left, right. **Delay:** 200ms default.
@@ -396,16 +354,19 @@ Auto-dismissing notifications stacked bottom-right.
 
 Place the container once in your layout:
 
-```erb
-<%# app/views/layouts/application.html.erb %>
-<%= render "components/toast_container" %>
+```html
+<div class="nano-toast-container" data-controller="nanoui-toast"></div>
 ```
 
-Add toasts dynamically (via Turbo Stream or JS):
+Add toasts dynamically:
 
-```erb
-<%= render "components/toast", variant: "success",
-    title: "Saved!", description: "Changes applied." %>
+```html
+<div class="nano-toast nano-toast--success" role="alert">
+  <div class="nano-toast__content">
+    <p class="nano-toast__title">Saved!</p>
+    <p class="nano-toast__description">Changes applied.</p>
+  </div>
+</div>
 ```
 
 **Variants:** default, success, destructive, warning. **Auto-dismiss:** 5000ms default.
@@ -418,57 +379,85 @@ Add toasts dynamically (via Turbo Stream or JS):
 
 Semantic table with responsive scroll wrapper.
 
-```erb
-<%= render "components/table",
-    headers: ["Name", "Email", "Status"],
-    striped: true, hoverable: true do %>
-  <tr class="nano-table__row">
-    <td class="nano-table__cell">Jane Doe</td>
-    <td class="nano-table__cell">jane@example.com</td>
-    <td class="nano-table__cell">
-      <%= render "components/badge", variant: "success" do %>Active<% end %>
-    </td>
-  </tr>
-<% end %>
+```html
+<div class="nano-table-wrapper">
+  <table class="nano-table nano-table--striped nano-table--hoverable">
+    <thead>
+      <tr>
+        <th class="nano-table__head">Name</th>
+        <th class="nano-table__head">Email</th>
+        <th class="nano-table__head">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="nano-table__row">
+        <td class="nano-table__cell">Jane Doe</td>
+        <td class="nano-table__cell">jane@example.com</td>
+        <td class="nano-table__cell">
+          <span class="nano-badge nano-badge--success">Active</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 ```
 
-**Options:** `headers`, `striped`, `hoverable`, `class`
-
 #### Tabs
 
 WAI-ARIA tabs pattern with arrow key navigation.
 
-```erb
-<%= render "components/tabs", label: "Settings", tabs: [
-  { id: "general", label: "General", content: tag.p("General settings..."), active: true },
-  { id: "security", label: "Security", content: tag.p("Security settings...") },
-  { id: "billing", label: "Billing", content: tag.p("Billing info...") }
-] %>
+```html
+<div data-controller="nanoui-tabs" class="nano-tabs">
+  <div role="tablist" aria-label="Settings" class="nano-tabs__list">
+    <button role="tab" aria-selected="true" aria-controls="general"
+            class="nano-tabs__trigger" data-action="nanoui-tabs#select">General</button>
+    <button role="tab" aria-selected="false" aria-controls="security"
+            class="nano-tabs__trigger" data-action="nanoui-tabs#select">Security</button>
+    <button role="tab" aria-selected="false" aria-controls="billing"
+            class="nano-tabs__trigger" data-action="nanoui-tabs#select">Billing</button>
+  </div>
+  <div role="tabpanel" id="general" class="nano-tabs__content">General settings...</div>
+  <div role="tabpanel" id="security" class="nano-tabs__content" hidden>Security settings...</div>
+  <div role="tabpanel" id="billing" class="nano-tabs__content" hidden>Billing info...</div>
+</div>
 ```
 
-**Options:** `tabs` (array), `label` (aria-label), `hash` (URL hash sync)
-
 #### Accordion
 
 Native `<details>`/`<summary>` with optional single-open mode.
 
-```erb
-<%= render "components/accordion", single: true, items: [
-  { title: "Is it free?", content: "Yes, MIT licensed.", open: true },
-  { title: "Build step?", content: "No, vanilla CSS." },
-  { title: "Dark mode?", content: "Add .dark class to <html>." }
-] %>
+```html
+<div class="nano-accordion" data-controller="nanoui-accordion"
+     data-nanoui-accordion-single-value="true">
+  <details class="nano-accordion__item" open>
+    <summary class="nano-accordion__trigger">Is it free?</summary>
+    <div class="nano-accordion__content">Yes, MIT licensed.</div>
+  </details>
+  <details class="nano-accordion__item">
+    <summary class="nano-accordion__trigger">Build step?</summary>
+    <div class="nano-accordion__content">No, vanilla CSS.</div>
+  </details>
+  <details class="nano-accordion__item">
+    <summary class="nano-accordion__trigger">Dark mode?</summary>
+    <div class="nano-accordion__content">Add .dark class to &lt;html&gt;.</div>
+  </details>
+</div>
 ```
 
-**Options:** `items` (array), `single` (single-open mode), `class`
-
 #### Progress
 
 Native `<progress>` element with custom styling.
 
-```erb
-<%= render "components/progress", value: 65, label: "65%", aria_label: "Upload progress" %>
-<%= render "components/progress", value: 100, variant: "success", label: "Complete" %>
+```html
+<div class="nano-progress">
+  <progress class="nano-progress__bar" value="65" max="100"></progress>
+  <span class="nano-progress__label">65%</span>
+</div>
+
+<div class="nano-progress nano-progress--success">
+  <progress class="nano-progress__bar" value="100" max="100"></progress>
+  <span class="nano-progress__label">Complete</span>
+</div>
 ```
 
 **Variants:** default (primary), success, warning, destructive
@@ -523,6 +512,7 @@ rails generate nanoui:component --all
 ## Philosophy
 
 - **Semantic HTML first** — `<dialog>`, `<details>`, `<progress>`, `<fieldset>`, `<output>`
+- **Native element styling** — Bare HTML elements look good without classes
 - **Accessibility is not optional** — ARIA attributes, keyboard navigation, focus management, screen reader support
 - **No build step** — No Tailwind, no PostCSS, no webpack. Vanilla CSS with native nesting
 - **You own the code** — Generator copies files into your app. Edit freely, no runtime dependency