nanoui 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 82bc23f334e4806d1a963f7076b8ae2a91ccbd6cc29661313ccb183a390271e6
-  data.tar.gz: dc7f106ca2619cbeeb427f5adf5bd61f9dbe874a904cf3d8aba830935f1c7c23
+  metadata.gz: 7853589240e9826e1a84eacb068ffd3ec668c5c459081cfe3a8d93fd4231c096
+  data.tar.gz: d62fa64e526a04c473f30355e0cde98c5441a7e136bff1813ff08a376af0728f
 SHA512:
-  metadata.gz: 86caab6ae5da7d790a717af769fbc5af29ab6ab9a0581a9fe5c1a4469171f48aef242af66d805dfebe03db9818b57a42a107b101312a7d1fa922176500e1ef28
-  data.tar.gz: f3b1f8bd33b51c66be3bc939302d7a7f3acc4d42272863e49aa336257409a61805e22f35ddb4a1787c17d4eff396a0cc4da0030cc239d3e0b499f55b343633c3
+  metadata.gz: bb21d047b98e632f831fdf5dc96a0001f7cb6222ca566dd60b72a3b23ac5968f15b6b07dc0a4d0b7a7c35410607c4f1defcc1a858ce468a50f165f085e5c0a96
+  data.tar.gz: f1710c2cc03164d20663095e0b0acb7fae811498f754c43c23236d02c99e400c6e85f5771168ae56a628d7526c3181049af08886e6957df09e5bc9c9e770f1a7

data/CHANGELOG.md

@@ -1,5 +1,29 @@
 # 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

data/README.md

@@ -2,15 +2,17 @@
 
 Vanilla CSS + Stimulus component library for Rails. Zero runtime dependencies.
 
-23 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 23 components with interactive examples.
+**[Documentation & Live Previews](https://chille1987.github.io/nanoui/)** — Browse all 30 components with interactive examples.
 
-## What's New in v0.5.0
+## What's New in v0.6.0
 
-- **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)
+- **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,15 +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_navbar_controller.js    → data-controller="nanoui-navbar"
-nanoui_sidebar_controller.js   → data-controller="nanoui-sidebar"
+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:
@@ -583,6 +588,211 @@ Loading placeholder with shimmer animation.
 
 ---
 
+### 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:
@@ -614,11 +824,13 @@ 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
@@ -628,6 +840,8 @@ 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

@@ -27,6 +27,13 @@ module Nanoui
         breadcrumb
         avatar
         skeleton
+        stat
+        empty
+        timeline
+        checklist
+        copy
+        code
+        upload
         container
       ].freeze
 
@@ -38,25 +45,45 @@ 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],
-        "navigation"  => %w[navbar sidebar breadcrumb],
-        "feedback"    => %w[avatar skeleton],
-        "layout"      => %w[container],
+        "essentials" => %w[button input label card badge alert],
+        "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 navbar sidebar].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
@@ -71,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/checklist.css

@@ -0,0 +1,133 @@
+.nano-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  .nano-checklist__summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background-color: hsl(var(--color-muted));
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    color: hsl(var(--color-muted-foreground));
+  }
+
+  .nano-checklist__count {
+    font-weight: var(--font-semibold);
+    color: hsl(var(--color-foreground));
+  }
+
+  .nano-checklist__bar {
+    flex: 1;
+    height: 0.375rem;
+    background-color: hsl(var(--color-background));
+    border-radius: var(--radius-full);
+    overflow: hidden;
+  }
+
+  .nano-checklist__bar-fill {
+    display: block;
+    height: 100%;
+    width: var(--nano-checklist-progress, 0%);
+    background-color: hsl(var(--color-primary));
+    border-radius: var(--radius-full);
+    transition: width var(--duration-slow) var(--ease-default);
+  }
+
+  .nano-checklist__item {
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid hsl(var(--color-border));
+    border-radius: var(--radius-md);
+    background-color: hsl(var(--color-card));
+    transition: border-color var(--duration-fast) var(--ease-default),
+                background-color var(--duration-fast) var(--ease-default);
+
+    &--current {
+      border-color: hsl(var(--color-primary) / 0.5);
+      background-color: hsl(var(--color-primary) / 0.04);
+    }
+
+    &--done {
+      border-color: hsl(var(--color-success) / 0.4);
+      background-color: hsl(var(--color-success) / 0.04);
+
+      .nano-checklist__title {
+        color: hsl(var(--color-muted-foreground));
+      }
+    }
+  }
+
+  .nano-checklist__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    margin-top: var(--space-0-5);
+    border-radius: var(--radius-full);
+    border: 2px solid hsl(var(--color-border));
+    background-color: hsl(var(--color-background));
+    font-size: var(--text-xs);
+    font-weight: var(--font-semibold);
+    color: hsl(var(--color-muted-foreground));
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
+  .nano-checklist__item--current .nano-checklist__indicator {
+    border-color: hsl(var(--color-primary));
+    color: hsl(var(--color-primary));
+  }
+
+  .nano-checklist__item--done .nano-checklist__indicator {
+    border-color: hsl(var(--color-success));
+    background-color: hsl(var(--color-success));
+    color: hsl(var(--color-success-foreground));
+  }
+
+  .nano-checklist__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .nano-checklist__title {
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+    color: hsl(var(--color-foreground));
+    line-height: var(--leading-tight);
+  }
+
+  .nano-checklist__description {
+    font-size: var(--text-sm);
+    color: hsl(var(--color-muted-foreground));
+    line-height: var(--leading-normal);
+  }
+
+  .nano-checklist__action {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-top: var(--space-1);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: hsl(var(--color-primary));
+    text-decoration: none;
+    align-self: flex-start;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+.nano-code {
+  position: relative;
+  background-color: hsl(var(--color-muted));
+  border: 1px solid hsl(var(--color-border));
+  border-radius: var(--radius-md);
+  overflow: hidden;
+
+  .nano-code__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background-color: hsl(var(--color-background));
+    border-bottom: 1px solid hsl(var(--color-border));
+    font-size: var(--text-xs);
+    color: hsl(var(--color-muted-foreground));
+  }
+
+  .nano-code__language {
+    font-family: var(--font-mono);
+    font-weight: var(--font-semibold);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .nano-code__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .nano-code__body {
+    display: block;
+    margin: 0;
+    padding: var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    color: hsl(var(--color-foreground));
+    overflow-x: auto;
+    white-space: pre;
+    tab-size: 2;
+  }
+
+  &--inline {
+    display: inline-block;
+    padding: var(--space-0-5) var(--space-1-5);
+    margin: 0;
+    background-color: hsl(var(--color-muted));
+    border: 1px solid hsl(var(--color-border));
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    color: hsl(var(--color-foreground));
+    overflow: visible;
+  }
+
+  &--terminal {
+    background-color: hsl(var(--color-foreground));
+    border-color: hsl(var(--color-foreground));
+
+    .nano-code__header {
+      background-color: hsl(var(--color-foreground) / 0.9);
+      border-bottom-color: hsl(var(--color-muted-foreground) / 0.3);
+      color: hsl(var(--color-background) / 0.7);
+    }
+
+    .nano-code__body {
+      color: hsl(var(--color-background));
+    }
+  }
+
+  &--wrap {
+    .nano-code__body {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+  }
+}