@leftium/nimble.css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leftium
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,128 @@
+# nimble.css
+
+A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~3 KB gzipped.
+
+- **Classless by default** — style every standard HTML element with zero markup changes
+- **Automatic dark mode** — via `prefers-color-scheme` and `light-dark()`
+- **OKLCH color system** — perceptually uniform, fully customizable via SCSS config
+- **Cascade layers** — plays nicely alongside your own styles
+- **Tiny** — 11.9 KB minified, ~3.1 KB gzipped
+
+## Demos
+
+- [HTML5 Test Page](https://leftium.github.io/nimble.css/demo/) — every standard HTML element
+- [Extended Demo](https://leftium.github.io/nimble.css/demo/extended.html) — layouts, utilities, button variants, forms, dark mode toggle
+
+## Quick Start
+
+### CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble.min.css">
+```
+
+That's it. Write semantic HTML and it just works.
+
+### Sub-bundles
+
+Pick only what you need:
+
+| Bundle | Minified | Contents |
+|---|---|---|
+| `nimble.min.css` | 11.9 KB | Everything |
+| `nimble-base.min.css` | 5.2 KB | Reset + colors + document + typography |
+| `nimble-reset.min.css` | 1.7 KB | Modern CSS reset only |
+| `nimble-utilities.min.css` | 572 B | Utility classes only |
+
+```html
+<!-- Just the classless core, no element styles or utilities -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble-base.min.css">
+```
+
+### Download
+
+Grab [`nimble.min.css`](dist/nimble.min.css) from this repo and include it locally:
+
+```html
+<link rel="stylesheet" href="nimble.min.css">
+```
+
+## Utility Classes
+
+Content is centered at `720px` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
+
+| Class | Description |
+|---|---|
+| `.fluid` | Full viewport width with padding (opt out of centering) |
+| `.container` | Re-center content inside a `.fluid` layout |
+| `.full-bleed` | Break out of centered layout to full width |
+| `.wide` | Break out to wide max-width (1200px) |
+| `.striped` | Striped table rows (apply to table wrapper) |
+| `.visually-hidden` | Hidden visually, accessible to screen readers |
+| `.overflow-auto` | Scrollable container |
+
+## Customization
+
+nimble.css is built with SCSS. Override any config variable:
+
+```scss
+@use 'nimble' with (
+  $primary-hue: 150,
+  $primary-chroma: 0.15,
+  $radius: 0.5rem,
+  $content-width: 960px,
+  $enable-dialog: false,
+);
+```
+
+### Config Variables
+
+| Variable | Default | Description |
+|---|---|---|
+| `$prefix` | `'--nc-'` | CSS custom property prefix |
+| `$primary-hue` | `250` | Primary accent hue (OKLCH) |
+| `$primary-chroma` | `0.2` | Primary accent chroma |
+| `$primary-lightness` | `0.50` | Primary accent lightness |
+| `$secondary-hue` | `250` | Secondary accent hue |
+| `$secondary-chroma` | `0.05` | Secondary accent chroma |
+| `$secondary-lightness` | `0.45` | Secondary accent lightness |
+| `$surface-hue` | `250` | Background surface hue |
+| `$font-sans` | `system-ui, sans-serif` | Body font stack |
+| `$font-mono` | `ui-monospace, ...` | Code font stack |
+| `$spacing` | `1rem` | Base spacing unit |
+| `$radius` | `0.25rem` | Border radius |
+| `$content-width` | `720px` | Max content width |
+| `$wide-width` | `1200px` | Wide layout max-width |
+| `$enable-utilities` | `true` | Include utility classes |
+| `$enable-dialog` | `true` | Include dialog styles |
+| `$enable-switch` | `true` | Include switch toggle |
+| `$enable-details` | `true` | Include details/summary |
+
+## Design Lineage
+
+nimble.css combines [Open Props](https://open-props.style/)'s design token philosophy with [PicoCSS](https://picocss.com/)'s classless aesthetics. Key concepts borrowed from Open Props:
+
+- **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts. Defined in `_colors.scss` from OKLCH parameters rather than imported at runtime.
+- **Text hierarchy** (`text-1`, `text-2`) — primary and muted text colors, same naming convention as Open Props.
+- **OKLCH color space** — perceptually uniform color system. Change `$primary-hue` and the entire palette regenerates consistently.
+- **Curated scale values** — `$spacing: 1rem` (~Open Props `size-3`) and `$radius: 0.25rem` (~Open Props `radius-2`) are sourced from Open Props' scales.
+- **Minimal DevTools pollution** — ~20 semantic custom properties on `:root` plus scoped `--_` internals per component, rather than dumping hundreds of variables globally.
+
+The key architectural difference: nimble.css is self-contained SCSS with no runtime dependency on Open Props. Token values are baked in at compile time, and the SCSS parametric layer (change one hue, regenerate everything) goes beyond what pure CSS custom properties can offer.
+
+## Building from Source
+
+```bash
+pnpm install
+node build.js
+```
+
+Output goes to `dist/`. Use `--prefix` to set a custom CSS property prefix:
+
+```bash
+node build.js --prefix '--my-'
+```
+
+## License
+
+MIT

package/dist/nimble-base.css

@@ -0,0 +1,286 @@
+@layer nimble.reset, nimble.base;
+@layer nimble.reset {
+  :where(*),
+  :where(*::before),
+  :where(*::after) {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+  }
+  :where(html) {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+  }
+  :where(body) {
+    margin: 0;
+  }
+  :where(h1) {
+    font-size: 2em;
+    margin-block: 0.67em;
+  }
+  :where(hr) {
+    height: 0;
+    color: inherit;
+  }
+  :where(nav) :where(ol, ul) {
+    list-style-type: none;
+    padding: 0;
+  }
+  :where(pre) {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  :where(abbr[title]) {
+    text-decoration: underline dotted;
+  }
+  :where(b, strong) {
+    font-weight: bolder;
+  }
+  :where(code, kbd, samp) {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  :where(small) {
+    font-size: 80%;
+  }
+  :where(sub, sup) {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  :where(sub) {
+    bottom: -0.25em;
+  }
+  :where(sup) {
+    top: -0.5em;
+  }
+  :where(iframe) {
+    border-style: none;
+  }
+  :where(table) {
+    border-collapse: collapse;
+    border-color: currentColor;
+    text-indent: 0;
+  }
+  :where(button, input, select, textarea) {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  :where(button, [type=button], [type=reset], [type=submit]) {
+    -webkit-appearance: button;
+  }
+  :where(fieldset) {
+    border: 1px solid #a0a0a0;
+  }
+  :where(progress) {
+    vertical-align: baseline;
+  }
+  :where(textarea) {
+    resize: vertical;
+    overflow: auto;
+  }
+  :where([type=search]) {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  :where(::-webkit-search-decoration) {
+    -webkit-appearance: none;
+  }
+  :where(::-webkit-inner-spin-button),
+  :where(::-webkit-outer-spin-button) {
+    height: auto;
+  }
+  :where(::-webkit-file-upload-button) {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+  :where(summary) {
+    display: list-item;
+  }
+  :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
+    touch-action: manipulation;
+  }
+  :where([aria-busy=true]) {
+    cursor: progress;
+  }
+  :where([aria-disabled=true], [disabled]) {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(*),
+    :where(*::before),
+    :where(*::after) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+@layer nimble.base {
+  :root {
+    color-scheme: light dark;
+    --nc-surface-1: light-dark(oklch(0.985 0.002 250), oklch(0.17 0.005 260));
+    --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
+    --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
+    --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
+    --nc-text-1: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
+    --nc-text-2: light-dark(oklch(0.58 0.005 250), oklch(0.65 0.005 250));
+    --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
+    --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
+    --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
+    --nc-primary-focus: oklch(0.5 0.2 250 / 0.4);
+    --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
+    --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
+    --nc-secondary-hover: light-dark(oklch(0.35 0.05 250), oklch(0.7 0.05 250));
+    --nc-secondary-focus: oklch(0.45 0.05 250 / 0.3);
+    --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
+    --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
+    --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
+    --nc-font-sans: system-ui, sans-serif;
+    --nc-font-mono: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
+    --nc-spacing: 1rem;
+    --nc-radius: 0.25rem;
+    --nc-content-width: 720px;
+  }
+  [data-theme=dark] {
+    color-scheme: dark;
+  }
+  [data-theme=light] {
+    color-scheme: light;
+  }
+}
+@layer nimble.base {
+  html {
+    font-family: var(--nc-font-sans);
+    font-size: 100%;
+    line-height: 1.5;
+    color: var(--nc-text-1);
+    background-color: var(--nc-surface-1);
+  }
+  body {
+    display: grid;
+    grid-template-columns: 1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;
+    min-height: 100dvh;
+  }
+  body > * {
+    grid-column: 2;
+  }
+  ::selection {
+    background-color: var(--nc-primary-focus);
+    color: var(--nc-text-1);
+  }
+}
+@layer nimble.base {
+  h1 {
+    font-size: 2rem;
+    line-height: 1.1;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h2 {
+    font-size: 1.75rem;
+    line-height: 1.15;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h3 {
+    font-size: 1.5rem;
+    line-height: 1.2;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h4 {
+    font-size: 1.25rem;
+    line-height: 1.3;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h5 {
+    font-size: 1.125rem;
+    line-height: 1.4;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h6 {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  @media (max-width: 720px) {
+    h1 {
+      font-size: 1.75rem;
+    }
+    h2 {
+      font-size: 1.5rem;
+    }
+    h3 {
+      font-size: 1.3rem;
+    }
+  }
+  p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+  }
+  :where(p, ul, ol, dl, blockquote, pre, table, figure, form) + :is(h1, h2, h3, h4, h5, h6) {
+    margin-top: calc(var(--nc-spacing) * 2);
+  }
+  ul, ol {
+    padding-inline-start: 1.5em;
+  }
+  li {
+    margin-bottom: 0.25em;
+  }
+  :where(li) > :where(ul, ol) {
+    margin-bottom: 0;
+  }
+  dt {
+    font-weight: 600;
+  }
+  dd {
+    margin-inline-start: 1.5em;
+    margin-bottom: 0.5em;
+  }
+  blockquote {
+    margin-block: var(--nc-spacing);
+    margin-inline: 0;
+    padding: 0.25em var(--nc-spacing);
+    border-inline-start: 0.25rem solid var(--nc-border);
+    font-style: italic;
+  }
+  :where(blockquote) footer,
+  :where(blockquote) cite {
+    font-style: normal;
+    font-size: 0.9em;
+    color: var(--nc-text-2);
+  }
+  hr {
+    border: none;
+    height: 1px;
+    background-color: color-mix(in oklch, var(--nc-border), transparent 40%);
+    margin: calc(var(--nc-spacing) * 2) 0;
+  }
+  mark {
+    padding: 0.1em 0.25em;
+    background-color: light-dark(#fde68a, oklch(0.55 0.12 85));
+    color: light-dark(inherit, oklch(0.95 0.01 85));
+    border-radius: 2px;
+  }
+  address {
+    font-style: normal;
+  }
+}

package/dist/nimble-base.min.css

@@ -0,0 +1 @@
+@layer nimble.reset{:where(*),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text-1:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-text-2:light-dark(oklch(58% .005 250),oklch(65% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text-1);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text-1)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}:where(p,ul,ol,dl,blockquote,pre,table,figure,form)+:is(h1,h2,h3,h4,h5,h6){margin-top:calc(var(--nc-spacing) * 2)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:var(--nc-text-2);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}

package/dist/nimble-reset.css

@@ -0,0 +1,120 @@
+@layer nimble.reset;
+@layer nimble.reset {
+  :where(*),
+  :where(*::before),
+  :where(*::after) {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+  }
+  :where(html) {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+  }
+  :where(body) {
+    margin: 0;
+  }
+  :where(h1) {
+    font-size: 2em;
+    margin-block: 0.67em;
+  }
+  :where(hr) {
+    height: 0;
+    color: inherit;
+  }
+  :where(nav) :where(ol, ul) {
+    list-style-type: none;
+    padding: 0;
+  }
+  :where(pre) {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  :where(abbr[title]) {
+    text-decoration: underline dotted;
+  }
+  :where(b, strong) {
+    font-weight: bolder;
+  }
+  :where(code, kbd, samp) {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  :where(small) {
+    font-size: 80%;
+  }
+  :where(sub, sup) {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  :where(sub) {
+    bottom: -0.25em;
+  }
+  :where(sup) {
+    top: -0.5em;
+  }
+  :where(iframe) {
+    border-style: none;
+  }
+  :where(table) {
+    border-collapse: collapse;
+    border-color: currentColor;
+    text-indent: 0;
+  }
+  :where(button, input, select, textarea) {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  :where(button, [type=button], [type=reset], [type=submit]) {
+    -webkit-appearance: button;
+  }
+  :where(fieldset) {
+    border: 1px solid #a0a0a0;
+  }
+  :where(progress) {
+    vertical-align: baseline;
+  }
+  :where(textarea) {
+    resize: vertical;
+    overflow: auto;
+  }
+  :where([type=search]) {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  :where(::-webkit-search-decoration) {
+    -webkit-appearance: none;
+  }
+  :where(::-webkit-inner-spin-button),
+  :where(::-webkit-outer-spin-button) {
+    height: auto;
+  }
+  :where(::-webkit-file-upload-button) {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+  :where(summary) {
+    display: list-item;
+  }
+  :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
+    touch-action: manipulation;
+  }
+  :where([aria-busy=true]) {
+    cursor: progress;
+  }
+  :where([aria-disabled=true], [disabled]) {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(*),
+    :where(*::before),
+    :where(*::after) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/nimble-reset.min.css

@@ -0,0 +1 @@
+@layer nimble.reset{:where(*),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}

package/dist/nimble-utilities.css

@@ -0,0 +1,40 @@
+@layer nimble.utilities;
+@layer nimble.utilities {
+  .container {
+    max-width: var(--nc-content-width);
+    margin-inline: auto;
+    padding-inline: var(--nc-spacing);
+  }
+  .fluid {
+    display: block;
+    max-width: none;
+    padding-inline: var(--nc-spacing);
+  }
+  .full-bleed {
+    grid-column: 1/-1;
+  }
+  .wide {
+    grid-column: 1/-1;
+    width: 100%;
+    max-width: 1200px;
+    margin-inline: auto;
+    padding-inline: var(--nc-spacing);
+  }
+  .striped :where(tbody tr:nth-child(even)) {
+    background-color: var(--nc-surface-2);
+  }
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+}

package/dist/nimble-utilities.min.css

@@ -0,0 +1 @@
+@layer nimble.utilities{.container{max-width:var(--nc-content-width);padding-inline:var(--nc-spacing);margin-inline:auto}.fluid{max-width:none;padding-inline:var(--nc-spacing);display:block}.full-bleed{grid-column:1/-1}.wide{width:100%;max-width:1200px;padding-inline:var(--nc-spacing);grid-column:1/-1;margin-inline:auto}.striped :where(tbody tr:nth-child(2n)){background-color:var(--nc-surface-2)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.overflow-auto{overflow:auto}}