nanoui 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c33ae0d2c94bdda9bddcf979a57177770c5c50f7ff1602d6744431402507f49d
-  data.tar.gz: d8d0c324e74ed81eb1fd84f985a81414ee3c343c034824457d84ee1856fe7fc4
+  metadata.gz: e93a8fd3240f6ca51636ddf4607fa5b98d75ffd3d9d3d89f5a07e587ccf5dd41
+  data.tar.gz: 678d26f0b38587acf444cb685cd9ae3d6587f14868b515ca92ff019058f7c162
 SHA512:
-  metadata.gz: b53749cc0036143533f008abf49da63c4a5de75d38b04958b196224461f0c962bcbfce352d18a584825bdf3bd3e119b54541597a5850b2bb3fc6b3aca8b29ec7
-  data.tar.gz: 73b2f16489e7669236551edf07f873ab2f3053ce96b40771efb54f49aa169cc62a1d84d9ad0b55e766a50c0e0c3b31705d65a4ea5bdd14279a2d846ea06a6859
+  metadata.gz: 32cf0b6c85d29c62a970991e2970acb7e9f0f6fa013aef378f8f21c1317f9f07a92fb8c7f3ec2524fe24fea8dc4b35614dcaff20e5f671c717c533fab739e512
+  data.tar.gz: 75bfb7626afff70a8734733979f5bf372074d4ce7c0e43217498d74140d5d9b165032e8311be11959c6d71c7ba44f2e5010a667e71bb6076bf7ab40ea12f51da

data/README.md

@@ -15,7 +15,7 @@ gem "nanoui", group: :development
 
 ```bash
 bundle install
-rails generate nanoui:install          # Tokens, base, fonts
+rails generate nanoui:install          # Base styles and fonts
 rails generate nanoui:component --all  # All components
 ```
 
@@ -24,8 +24,12 @@ rails generate nanoui:component --all  # All components
 Copy files directly into your Rails 8 app:
 
 ```bash
-# 1. CSS (tokens, base, components, Inter Variable font)
-cp -r lib/generators/nanoui/templates/css/ app/assets/stylesheets/nanoui/
+# 1. CSS (base, components, entrypoint, 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 \
@@ -58,7 +62,7 @@ Or if using Propshaft, add the import to your layout:
 If NanoUI falls back to system fonts instead of Inter:
 
 - Confirm the font file exists at `app/assets/stylesheets/nanoui/fonts/inter-variable.ttf`
-- Confirm `app/assets/stylesheets/nanoui/base/_globals.css` still points to `url("../fonts/inter-variable.ttf")`
+- Confirm `app/assets/stylesheets/nanoui/base/02_fonts.css` still points to `url("../fonts/inter-variable.ttf")`
 - If you installed NanoUI before this change, rerun `rails generate nanoui:install` or copy `lib/generators/nanoui/templates/css/fonts/inter-variable.ttf` into `app/assets/stylesheets/nanoui/fonts/`
 - In the browser devtools Network tab, verify `inter-variable.ttf` loads successfully instead of returning `404`
 
@@ -132,16 +136,16 @@ document.documentElement.classList.toggle("dark")
 Or use classes directly:
 
 ```html
-<button class="button button--primary" type="button">Save</button>
-<button class="button button--outline button--sm" type="button">Cancel</button>
-<button class="button button--primary" disabled>Disabled</button>
+<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>
 ```
 
 **Options:** `variant` (primary, secondary, destructive, outline, ghost, link), `size` (sm, lg, icon), `tag` (:button), `href`, `class`, `html`
 
 #### Input
 
-Text fields wrapped in `.field` with label and error support.
+Text fields wrapped in `.nano-field` with label and error support.
 
 ```erb
 <%= render "components/input", label: "Email", type: "email", required: true,
@@ -151,9 +155,9 @@ Text fields wrapped in `.field` with label and error support.
 ```
 
 ```html
-<div class="field">
-  <label for="email" class="label label--required">Email</label>
-  <input id="email" type="email" class="input" placeholder="you@example.com" required>
+<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>
 </div>
 ```
 
@@ -166,7 +170,7 @@ Text fields wrapped in `.field` with label and error support.
 ```
 
 ```html
-<label for="name" class="label label--required">Name</label>
+<label for="name" class="nano-label nano-label--required">Name</label>
 ```
 
 #### Card
@@ -183,13 +187,13 @@ Container with header, content, and footer sections.
 ```
 
 ```html
-<article class="card">
-  <div class="card__header">
-    <h3 class="card__title">Settings</h3>
-    <p class="card__description">Manage your account.</p>
+<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="card__content">...</div>
-  <div class="card__footer">...</div>
+  <div class="nano-card__content">...</div>
+  <div class="nano-card__footer">...</div>
 </article>
 ```
 
@@ -205,8 +209,8 @@ Inline status indicators.
 ```
 
 ```html
-<span class="badge badge--success">Active</span>
-<span class="badge badge--destructive">Failed</span>
+<span class="nano-badge nano-badge--success">Active</span>
+<span class="nano-badge nano-badge--destructive">Failed</span>
 ```
 
 **Variants:** primary, secondary, destructive, outline, success, warning
@@ -222,11 +226,11 @@ Contextual feedback with icon, title, and description.
 ```
 
 ```html
-<div class="alert alert--success" role="alert">
-  <div class="alert__icon"><!-- SVG --></div>
-  <div class="alert__content">
-    <p class="alert__title">Saved!</p>
-    <p class="alert__description">Your changes have been saved.</p>
+<div class="nano-alert nano-alert--success" role="alert">
+  <div class="nano-alert__icon"><!-- SVG --></div>
+  <div class="nano-alert__content">
+    <p class="nano-alert__title">Saved!</p>
+    <p class="nano-alert__description">Your changes have been saved.</p>
   </div>
 </div>
 ```
@@ -245,9 +249,9 @@ Contextual feedback with icon, title, and description.
 ```
 
 ```html
-<div class="checkbox">
-  <input type="checkbox" id="tos" class="checkbox__input" name="tos">
-  <label for="tos" class="checkbox__label">Accept terms</label>
+<div class="nano-checkbox">
+  <input type="checkbox" id="tos" class="nano-checkbox__input" name="tos">
+  <label for="tos" class="nano-checkbox__label">Accept terms</label>
 </div>
 ```
 
@@ -267,11 +271,11 @@ Contextual feedback with icon, title, and description.
 ```
 
 ```html
-<fieldset class="radio-group">
-  <legend class="radio-group__legend">Plan</legend>
-  <div class="radio">
-    <input type="radio" id="plan-0" name="plan" value="free" class="radio__input" checked>
-    <label for="plan-0" class="radio__label">Free</label>
+<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>
   </div>
   <!-- ... -->
 </fieldset>
@@ -286,10 +290,10 @@ Toggle switch with Stimulus controller.
 ```
 
 ```html
-<button type="button" role="switch" aria-checked="true" class="switch"
+<button type="button" role="switch" aria-checked="true" class="nano-switch"
         data-controller="nanoui-switch" data-action="nanoui-switch#toggle">
-  <span class="switch__thumb"></span>
-  <span class="sr-only">Enable notifications</span>
+  <span class="nano-switch__thumb"></span>
+  <span class="nano-sr-only">Enable notifications</span>
 </button>
 ```
 
@@ -339,15 +343,15 @@ Native `<dialog>` with `showModal()` — free focus trap, Escape close, and `::b
 <div data-controller="nanoui-dialog">
   <button data-action="nanoui-dialog#open">Open</button>
 
-  <dialog data-nanoui-dialog-target="modal" class="dialog"
+  <dialog data-nanoui-dialog-target="modal" class="nano-dialog"
           aria-labelledby="dialog-title">
-    <div class="dialog__content">
-      <header class="dialog__header">
-        <h2 id="dialog-title" class="dialog__title">Title</h2>
+    <div class="nano-dialog__content">
+      <header class="nano-dialog__header">
+        <h2 id="dialog-title" class="nano-dialog__title">Title</h2>
       </header>
-      <div class="dialog__body">...</div>
-      <footer class="dialog__footer">...</footer>
-      <button class="dialog__close" data-action="nanoui-dialog#close"
+      <div class="nano-dialog__body">...</div>
+      <footer class="nano-dialog__footer">...</footer>
+      <button class="nano-dialog__close" data-action="nanoui-dialog#close"
               aria-label="Close dialog">...</button>
     </div>
   </dialog>
@@ -363,10 +367,10 @@ Click-activated menu with keyboard navigation.
 ```erb
 <%= render "components/dropdown",
     trigger: render("components/button", variant: "outline") { "Options" } do %>
-  <button class="dropdown__item">Profile</button>
-  <button class="dropdown__item">Settings</button>
-  <div class="dropdown__separator"></div>
-  <button class="dropdown__item">Log out</button>
+  <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 %>
 ```
 
@@ -418,10 +422,10 @@ Semantic table with responsive scroll wrapper.
 <%= render "components/table",
     headers: ["Name", "Email", "Status"],
     striped: true, hoverable: true do %>
-  <tr class="table__row">
-    <td class="table__cell">Jane Doe</td>
-    <td class="table__cell">jane@example.com</td>
-    <td class="table__cell">
+  <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>
@@ -477,17 +481,17 @@ Customize your theme by editing the CSS custom properties:
 
 | Token File | What it controls |
 |---|---|
-| `tokens/_colors.css` | All colors (HSL), dark mode overrides |
-| `tokens/_typography.css` | Font families, sizes, weights, line heights |
-| `tokens/_spacing.css` | Spacing scale (0 to 16) |
-| `tokens/_radius.css` | Border radii (sm to full) |
-| `tokens/_shadows.css` | Box shadows (sm to xl) |
-| `tokens/_transitions.css` | Durations and easings |
-| `tokens/_z-index.css` | Z-index scale (dropdown to toast) |
+| `base/03_colors.css` | All colors (HSL), dark mode overrides |
+| `base/04_typography.css` | Font families, sizes, weights, line heights |
+| `base/05_spacing.css` | Spacing scale (0 to 16) |
+| `base/06_radius.css` | Border radii (sm to full) |
+| `base/07_shadows.css` | Box shadows (sm to xl) |
+| `base/08_transitions.css` | Durations and easings |
+| `base/09_z-index.css` | Z-index scale (dropdown to toast) |
 
 ### Changing your brand color
 
-Edit one line in `tokens/_colors.css`:
+Edit one line in `base/03_colors.css`:
 
 ```css
 --color-primary: 220 70% 50%;  /* Change this HSL value */
@@ -522,7 +526,7 @@ rails generate nanoui:component --all
 - **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
-- **BEM naming** — `.block`, `.block--modifier`, `.block__element`
+- **BEM naming** — `.nano-block`, `.nano-block--modifier`, `.nano-block__element`
 - **CSS custom properties** — One file to theme everything. Dark mode with a single class swap
 
 ## Browser Support

data/lib/generators/nanoui/component_generator.rb

@@ -23,7 +23,7 @@ module Nanoui
         accordion
         progress
       ].freeze
-      COMPONENT_IMPORT_PATTERN = /^\s*@import "components\/_([^\"]+)\.css";\s*\n?/
+      COMPONENT_IMPORT_PATTERN = /^\s*@import "components\/_?([^\"]+)\.css";\s*\n?/
 
       argument :components, type: :array, default: [], banner: "component [component] ..."
 
@@ -59,8 +59,8 @@ module Nanoui
 
       def copy_component_css
         @resolved.each do |name|
-          copy_file "css/components/_#{name}.css",
-                    "app/assets/stylesheets/nanoui/components/_#{name}.css"
+          copy_file "css/components/#{name}.css",
+                    "app/assets/stylesheets/nanoui/components/#{name}.css"
         end
       end
 
@@ -114,12 +114,12 @@ module Nanoui
       private
 
       def component_imports
-        installed_components.map { |name| "@import \"components/_#{name}.css\";" }.join("\n")
+        installed_components.map { |name| "@import \"components/#{name}.css\";" }.join("\n")
       end
 
       def installed_components
         component_dir = "app/assets/stylesheets/nanoui/components"
-        names = Dir.glob(File.join(component_dir, "_*.css")).map do |path|
+        names = Dir.glob(File.join(component_dir, "*.css")).map do |path|
           File.basename(path, ".css").delete_prefix("_")
         end
 

data/lib/generators/nanoui/install_generator.rb

@@ -6,11 +6,7 @@ module Nanoui
       APPLICATION_IMPORT = '@import "nanoui/nanoui.css";'.freeze
       LEADING_CSS_HEADER_PATTERN = /\A((?:\s|\/\*.*?\*\/\s*)*(?:@charset\s+[^;]+;\s*)?(?:@import\s+[^;]+;\s*)*)/m.freeze
 
-      desc "Install NanoUI foundation (tokens, base styles, fonts)"
-
-      def copy_tokens
-        directory "css/tokens", "app/assets/stylesheets/nanoui/tokens"
-      end
+      desc "Install NanoUI foundation (base styles, fonts)"
 
       def copy_base
         directory "css/base", "app/assets/stylesheets/nanoui/base"
@@ -45,7 +41,7 @@ module Nanoui
         say "     rails generate nanoui:component button input card"
         say ""
         say "  2. Customize your theme in:"
-        say "     app/assets/stylesheets/nanoui/tokens/_colors.css"
+        say "     app/assets/stylesheets/nanoui/base/03_colors.css"
         say ""
       end
     end

data/lib/generators/nanoui/templates/css/base/{_reset.css → 01_reset.css}

@@ -1,4 +1,4 @@
-/* base/_reset.css */
+/* base/01_reset.css */
 *,
 *::before,
 *::after {

data/lib/generators/nanoui/templates/css/base/02_fonts.css

@@ -0,0 +1,8 @@
+/* base/02_fonts.css */
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  src: url("../fonts/inter-variable.ttf") format("truetype");
+}

data/lib/generators/nanoui/templates/css/{tokens/_colors.css → base/03_colors.css}

@@ -1,4 +1,4 @@
-/* tokens/_colors.css */
+/* base/03_colors.css */
 :root {
   /* Base scale — Zinc-inspired neutral palette */
   --color-background:       0 0% 100%;        /* white */

data/lib/generators/nanoui/templates/css/{tokens/_typography.css → base/04_typography.css}

@@ -1,4 +1,4 @@
-/* tokens/_typography.css */
+/* base/04_typography.css */
 :root {
   --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
   --font-mono:    "JetBrains Mono", "Fira Code", monospace;

data/lib/generators/nanoui/templates/css/{tokens/_spacing.css → base/05_spacing.css}

@@ -1,4 +1,4 @@
-/* tokens/_spacing.css */
+/* base/05_spacing.css */
 :root {
   --space-0:   0;
   --space-0-5: 0.125rem;   /* 2px */

data/lib/generators/nanoui/templates/css/{tokens/_radius.css → base/06_radius.css}

@@ -1,4 +1,4 @@
-/* tokens/_radius.css */
+/* base/06_radius.css */
 :root {
   --radius-none: 0;
   --radius-sm:   0.25rem;    /* 4px */

data/lib/generators/nanoui/templates/css/{tokens/_shadows.css → base/07_shadows.css}

@@ -1,4 +1,4 @@
-/* tokens/_shadows.css */
+/* base/07_shadows.css */
 :root {
   --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

data/lib/generators/nanoui/templates/css/{tokens/_transitions.css → base/08_transitions.css}

@@ -1,4 +1,4 @@
-/* tokens/_transitions.css */
+/* base/08_transitions.css */
 :root {
   --duration-fast:    100ms;
   --duration-normal:  200ms;

data/lib/generators/nanoui/templates/css/{tokens/_z-index.css → base/09_z-index.css}

@@ -1,4 +1,4 @@
-/* tokens/_z-index.css */
+/* base/09_z-index.css */
 :root {
   --z-dropdown:  50;
   --z-sticky:    100;

data/lib/generators/nanoui/templates/css/base/{_globals.css → 10_globals.css}

@@ -1,12 +1,4 @@
-/* base/_globals.css */
-
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-  src: url("../fonts/inter-variable.ttf") format("truetype");
-}
+/* base/10_globals.css */
 
 html {
   scroll-behavior: smooth;
@@ -28,7 +20,7 @@ body {
   outline-offset: 2px;
 }
 
-.sr-only {
+.nano-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;

data/lib/generators/nanoui/templates/css/components/{_accordion.css → accordion.css}

@@ -1,36 +1,25 @@
-.accordion__trigger {
-  list-style: none;
-}
-
-.accordion__trigger::-webkit-details-marker {
-  display: none;
-}
-
-.accordion__trigger::marker {
-  content: none;
-}
-
-.accordion {
+.nano-accordion {
   border: 1px solid hsl(var(--color-border));
   border-radius: var(--radius-lg);
 }
 
-.accordion__item {
+.nano-accordion__item {
   border-bottom: 1px solid hsl(var(--color-border));
 }
 
-.accordion__item:first-child {
+.nano-accordion__item:first-child {
   border-top-left-radius: var(--radius-lg);
   border-top-right-radius: var(--radius-lg);
 }
 
-.accordion__item:last-child {
+.nano-accordion__item:last-child {
   border-bottom: none;
   border-bottom-left-radius: var(--radius-lg);
   border-bottom-right-radius: var(--radius-lg);
 }
 
-.accordion__trigger {
+.nano-accordion__trigger {
+  list-style: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -43,16 +32,16 @@
   transition: background-color var(--duration-fast) var(--ease-default);
 }
 
-.accordion__trigger:hover {
+.nano-accordion__trigger:hover {
   background-color: hsl(var(--color-muted) / 0.5);
 }
 
-.accordion__trigger:focus-visible {
+.nano-accordion__trigger:focus-visible {
   outline: 2px solid hsl(var(--color-ring));
   outline-offset: -2px;
 }
 
-.accordion__icon {
+.nano-accordion__icon {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
@@ -60,11 +49,11 @@
   transition: transform var(--duration-normal) var(--ease-default);
 }
 
-.accordion__item[open] .accordion__icon {
+.nano-accordion__item[open] .nano-accordion__icon {
   transform: rotate(180deg);
 }
 
-.accordion__content {
+.nano-accordion__content {
   padding: 0 var(--space-4) var(--space-4);
   font-size: var(--text-sm);
   line-height: var(--leading-normal);

data/lib/generators/nanoui/templates/css/components/{_alert.css → alert.css}

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

data/lib/generators/nanoui/templates/css/components/{_badge.css → badge.css}

@@ -1,4 +1,4 @@
-.badge {
+.nano-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
@@ -10,38 +10,38 @@
   white-space: nowrap;
 }
 
-.badge--primary {
+.nano-badge--primary {
   background-color: hsl(var(--color-primary));
   color: hsl(var(--color-primary-foreground));
 }
 
-.badge--secondary {
+.nano-badge--secondary {
   background-color: hsl(var(--color-secondary));
   color: hsl(var(--color-secondary-foreground));
 }
 
-.badge--destructive {
+.nano-badge--destructive {
   background-color: hsl(var(--color-destructive));
   color: hsl(var(--color-destructive-foreground));
 }
 
-.badge--outline {
+.nano-badge--outline {
   background-color: transparent;
   border: 1px solid hsl(var(--color-border));
   color: hsl(var(--color-foreground));
 }
 
-.badge--success {
+.nano-badge--success {
   background-color: hsl(var(--color-success));
   color: hsl(var(--color-success-foreground));
 }
 
-.badge--warning {
+.nano-badge--warning {
   background-color: hsl(var(--color-warning));
   color: hsl(var(--color-warning-foreground));
 }
 
-.badge svg {
+.nano-badge svg {
   width: 0.75rem;
   height: 0.75rem;
   flex-shrink: 0;