@leftium/nimble.css 0.1.0 → 0.3.0

package/src/_forms.scss

@@ -9,23 +9,26 @@
 
   // ----- Text inputs, select, textarea -----
 
-  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]),
          select, textarea) {
     --_input-bg: color-mix(in oklch, var(#{$prefix}surface-1), var(#{$prefix}surface-2) 20%);
 
     padding: 0.5em 0.75em;
+    min-height: calc(1em * 1.5 + 1em + 2px); // line-height + vertical padding + border
     background-color: var(--_input-bg);
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
     font: inherit;
+    font-size: 1rem; // >=16px prevents iOS Safari auto-zoom on focus
     transition: border-color 0.2s, box-shadow 0.2s;
   }
 
   // Make text inputs and select full-width by default (PicoCSS pattern)
-  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]),
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="date"], [type="month"], [type="week"], [type="time"], [type="datetime-local"]),
          select, textarea) {
     width: 100%;
+    margin-bottom: var(#{$prefix}spacing);
   }
 
   // ----- Focus -----
@@ -36,6 +39,16 @@
     outline: none;
   }
 
+  // When a validation message <small> immediately follows an input,
+  // pull it up tight against the field and let it carry the spacing instead.
+  :where(input, select, textarea) + :where(small) {
+    display: block;
+    margin-top: calc(var(#{$prefix}spacing) * -0.75); // pull up under the input
+    margin-bottom: var(#{$prefix}spacing);
+    font-size: 0.875em;
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
+  }
+
   // ----- Validation states (aria-invalid) -----
 
   :where(input, select, textarea)[aria-invalid="false"] {
@@ -46,6 +59,15 @@
     border-color: var(#{$prefix}invalid);
   }
 
+  // Color validation messages to match the field state
+  :where(input, select, textarea)[aria-invalid="false"] + :where(small) {
+    color: var(#{$prefix}valid);
+  }
+
+  :where(input, select, textarea)[aria-invalid="true"] + :where(small) {
+    color: var(#{$prefix}invalid);
+  }
+
   // ----- Labels -----
 
   :where(label) {
@@ -57,12 +79,20 @@
     font-weight: 600;
   }
 
+  // file and range are short/inline controls — increase the label gap to match
+  // the visual weight of the spacing above and beside them.
+  :where(label:has(+ [type="file"], + [type="range"])) {
+    margin-bottom: 0.5em;
+  }
+
   // ----- Fieldset -----
 
   :where(fieldset) {
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
     padding: var(#{$prefix}spacing);
+    min-width: 0; // Override UA min-content default — prevents overflow on narrow viewports
+    max-width: 100%;
   }
 
   :where(legend) {
@@ -75,6 +105,29 @@
 
   :where([type="checkbox"], [type="radio"]) {
     accent-color: var(#{$prefix}primary);
+    width: 1.125em;
+    height: 1.125em;
+    margin: 0; // Remove browser default margin so flex labels align flush left
+  }
+
+  :where(label:has([type="checkbox"], [type="radio"])) {
+    display: flex;
+    align-items: center;
+    gap: 0.35em;
+    margin-bottom: 0.5em;
+  }
+
+  // Last checkbox/radio label in a group drops its bottom margin
+  // so the parent element controls spacing to the next sibling.
+  :where(label:has([type="checkbox"], [type="radio"]):last-child) {
+    margin-bottom: 0;
+  }
+
+  // ----- Search (pill shape) -----
+
+  :where([type="search"]) {
+    border-radius: 5rem;
+    padding-inline: 1.25em;
   }
 
   // ----- Range -----
@@ -82,12 +135,77 @@
   :where([type="range"]) {
     accent-color: var(#{$prefix}primary);
     width: 100%;
+    margin-bottom: var(#{$prefix}spacing);
+  }
+
+  // ----- Datalist-connected inputs -----
+  // Keep natural width so the dropdown arrow stays near the text,
+  // similar to date/time inputs preserving native widget UX.
+
+  :where(input[list]) {
+    width: auto;
+  }
+
+  // ----- File -----
+
+  :where([type="file"]) {
+    color: var(#{$prefix}text);
+    font: inherit;
+    cursor: pointer;
+    max-width: 100%; // Prevent native file input from overflowing container (iOS Safari)
+    margin-bottom: var(#{$prefix}spacing);
+  }
+
+  :where([type="file"])::file-selector-button {
+    padding: 0.5em 1em;
+    margin-right: 0.75em;
+    margin-inline-end: 0.75em;
+    background-color: var(#{$prefix}primary);
+    color: var(#{$prefix}primary-contrast);
+    border: 1px solid var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+    font: inherit;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+  }
+
+  :where([type="file"])::file-selector-button:hover {
+    background-color: var(#{$prefix}primary-hover);
+    border-color: var(#{$prefix}primary-hover);
+  }
+
+  // ----- Date/time inputs -----
+  // Natural width so picker icon stays near content (excluded from full-width rule above).
+  // appearance: none is applied outside @layer (see below) to fix iOS Safari sizing.
+  :where([type="date"], [type="month"], [type="week"], [type="time"], [type="datetime-local"]) {
+    min-width: 10em; // Prevent collapse when empty (e.g. time with no value)
+    margin-bottom: var(#{$prefix}spacing);
   }
 
   // ----- Color -----
 
   :where([type="color"]) {
+    --_color-size: calc(1em * 1.5 + 1em + 2px); // Match text input height
+    margin-bottom: var(#{$prefix}spacing);
+
+    --_color-pad: 0.25em;
+
+    height: var(--_color-size);
+    width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad)); // Golden ratio inner swatch
+    padding: var(--_color-pad);
+    background-color: color-mix(in oklch, var(#{$prefix}surface-1), var(#{$prefix}surface-2) 20%);
+    border: 1px solid var(#{$prefix}border);
+    border-radius: var(#{$prefix}radius);
     cursor: pointer;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: calc(var(#{$prefix}radius) * 0.5);
+    }
   }
 
   // ----- Switch (checkbox with role="switch") -----
@@ -95,6 +213,12 @@
   @if $enable-switch {
     // Minimal switch styling — relies on native checkbox with role="switch"
     // Browsers with :has() support get enhanced label alignment
+    :where(label:has([type="checkbox"][role="switch"])) {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+
     :where([type="checkbox"][role="switch"]) {
       appearance: none;
       width: 2.5em;
@@ -103,6 +227,8 @@
       background-color: var(#{$prefix}border);
       position: relative;
       cursor: pointer;
+      flex-shrink: 0;
+      margin: 0; // Remove browser default margin so flex labels align flush left
       transition: background-color 0.2s;
     }
 
@@ -128,3 +254,16 @@
   }
 
 }
+
+// iOS Safari ignores author box-model styles on native date/time inputs.
+// appearance: none unlocks sizing control while preserving the native picker
+// (only the decorative icon is removed on iOS; Chrome/desktop keeps its icons).
+// Placed outside @layer with real selectors to beat UA specificity.
+[type="date"],
+[type="month"],
+[type="week"],
+[type="time"],
+[type="datetime-local"] {
+  -webkit-appearance: none;
+  appearance: none;
+}

package/src/_links.scss

@@ -17,8 +17,8 @@
   }
 
   :where(a:not([role="button"])):visited {
-    color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary) 40%, oklch(0.5 0.2 310))')};
-    text-decoration-color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary) 40%, oklch(0.5 0.2 310) 30%)')};
+    color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary) 40%, oklch(0.38 0.15 310))')};
+    text-decoration-color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary) 40%, oklch(0.38 0.15 310) 30%)')};
   }
 
   :where(a:not([role="button"])):hover {

package/src/_media.scss

@@ -19,7 +19,7 @@
 
   :where(figcaption) {
     font-size: 0.9em;
-    color: var(#{$prefix}text-2);
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
     margin-top: 0.5em;
   }
 

package/src/_meter.scss

@@ -0,0 +1,72 @@
+// ==========================================================================
+// nimble.css — Meter
+// Optional: styled <meter> with cross-browser semantic state colors
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  // Same treatment as progress: appearance: none + pseudo-element rebuild.
+  // Meter has three semantic states (optimum / suboptimum / sub-sub-optimum)
+  // which we map to --nc-valid (green), --nc-primary (default), --nc-invalid (red).
+
+  :where(meter) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(#{$prefix}radius);
+    background-color: var(#{$prefix}surface-3);
+  }
+
+  // WebKit: track (outer bar)
+  :where(meter)::-webkit-meter-inner-element {
+    // Wrapper element — reset grid layout that some UAs impose
+  }
+
+  :where(meter)::-webkit-meter-bar {
+    border-radius: var(#{$prefix}radius);
+    background-color: var(#{$prefix}surface-3);
+    border: 0;
+    height: 0.5rem;
+  }
+
+  // WebKit: value bars for each semantic state
+  :where(meter)::-webkit-meter-optimum-value {
+    background-color: var(#{$prefix}valid);
+    border-radius: var(#{$prefix}radius);
+  }
+
+  :where(meter)::-webkit-meter-suboptimum-value {
+    background-color: var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+  }
+
+  :where(meter)::-webkit-meter-even-less-good-value {
+    background-color: var(#{$prefix}invalid);
+    border-radius: var(#{$prefix}radius);
+  }
+
+  // Firefox: single bar pseudo-element + pseudo-classes for state
+  :where(meter)::-moz-meter-bar {
+    background-color: var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+  }
+
+  :where(meter):-moz-meter-optimum::-moz-meter-bar {
+    background-color: var(#{$prefix}valid);
+  }
+
+  :where(meter):-moz-meter-sub-optimum::-moz-meter-bar {
+    background-color: var(#{$prefix}primary);
+  }
+
+  :where(meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background-color: var(#{$prefix}invalid);
+  }
+
+}

package/src/_progress.scss

@@ -0,0 +1,88 @@
+// ==========================================================================
+// nimble.css — Progress (add-on)
+// Standalone <progress> styling for use with nimble-base.
+// Not needed with nimble.css (progress is already included). Use with nimble-core.css.
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  :where(progress) {
+    -webkit-appearance: none;
+    appearance: none;
+    position: relative;
+    width: 100%;
+    height: 0.5rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(#{$prefix}radius);
+    background-color: var(#{$prefix}surface-3);
+    color: var(#{$prefix}primary); // Firefox uses color for the bar
+  }
+
+  :where(progress)::-webkit-progress-bar {
+    border-radius: var(#{$prefix}radius);
+    background-color: var(#{$prefix}surface-3);
+  }
+
+  :where(progress)::-webkit-progress-value {
+    background-color: var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+    transition: inline-size 0.3s ease;
+  }
+
+  :where(progress)::-moz-progress-bar {
+    background-color: var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+  }
+
+  // Indeterminate: evenly-spaced blue bands travel continuously rightward.
+  // Gradient is 200% wide with two identical 10%-wide bands at 15% and 65%.
+  // They're 50% apart — exactly one visible width (100/200 = 50% of gradient).
+  // Animating position by -200% = one full gradient width → seamless loop.
+  :where(progress):not([value]) {
+    --nc-progress-track:
+      linear-gradient(to right,
+        var(#{$prefix}surface-3) 0%,
+        var(#{$prefix}primary) 25%,
+        var(#{$prefix}primary) 25%,
+        var(#{$prefix}surface-3) 50%,
+        var(#{$prefix}surface-3) 50%,
+        var(#{$prefix}primary) 75%,
+        var(#{$prefix}primary) 75%,
+        var(#{$prefix}surface-3) 100%);
+    --nc-progress-track-size: 200% 100%;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports selector(progress::after) {
+      :where(progress):not([value])::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--nc-progress-track);
+        background-size: var(--nc-progress-track-size);
+        animation: nc-progress-indeterminate 12s linear infinite;
+      }
+    }
+
+    :where(progress):not([value])::-webkit-progress-bar {
+      background: var(--nc-progress-track);
+      background-size: var(--nc-progress-track-size);
+      animation: nc-progress-indeterminate 12s linear infinite;
+    }
+
+    :where(progress):not([value])::-moz-progress-bar {
+      background: var(--nc-progress-track);
+      background-size: var(--nc-progress-track-size);
+      animation: nc-progress-indeterminate 12s linear infinite;
+    }
+  }
+
+  @keyframes nc-progress-indeterminate {
+    from { background-position: 0% 0%; }
+    to { background-position: -200% 0%; }
+  }
+
+}

package/src/_reset.scss

@@ -10,7 +10,7 @@
 
   // --- Document ---
 
-  :where(*),
+  :where(*:not(progress)),
   :where(*::before),
   :where(*::after) {
     box-sizing: border-box;
@@ -156,6 +156,7 @@
   // Remove delay from tapping on clickable elements
   :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
     touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
   }
 
   // Change the cursor for busy elements
@@ -181,3 +182,4 @@
   }
 
 }
+

package/src/_select.scss

@@ -0,0 +1,67 @@
+// ==========================================================================
+// nimble.css — Customizable Select
+// Optional: styled <select> using appearance: base-select (progressive enhancement)
+// Falls back to classic <select> in unsupported browsers
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  @supports (appearance: base-select) {
+    :where(select),
+    :where(select)::picker(select) {
+      appearance: base-select;
+    }
+
+    // Picker icon (chevron)
+    :where(select)::picker-icon {
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E");
+      transition: rotate 0.4s;
+    }
+
+    :where(select):open::picker-icon {
+      rotate: 180deg;
+    }
+
+    // Drop-down picker
+    :where(select)::picker(select) {
+      position-area: block-end;
+      position-try-order: normal;
+      position-try-fallbacks: flip-block;
+      border: 1px solid var(#{$prefix}border);
+      border-radius: var(#{$prefix}radius);
+      background-color: var(#{$prefix}surface-1);
+      padding: 0.25em;
+      // Fade in/out animation
+      opacity: 0;
+      transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+    }
+
+    :where(select):open::picker(select) {
+      opacity: 1;
+    }
+
+    @starting-style {
+      :where(select):open::picker(select) {
+        opacity: 0;
+      }
+    }
+
+    // Options inside the picker
+    :where(select) option {
+      padding: 0.5em 0.75em;
+      border-radius: var(#{$prefix}radius);
+      transition: background-color 0.15s;
+    }
+
+    :where(select) option:hover {
+      background-color: var(#{$prefix}surface-2);
+    }
+
+    :where(select) option:checked {
+      font-weight: 600;
+    }
+  }
+
+}

package/src/_typography.scss

@@ -7,15 +7,18 @@
 @use 'sass:string';
 @use 'config' as *;
 
-// Heading scale: size and line-height
+// Heading scale: size, line-height, and top margin
+// h1 has no top margin (page title / first heading).
+// h2–h6 always carry top margin so they breathe above any preceding content,
+// regardless of DOM nesting (first-child of section, etc.).
 // Spec §8.3
 $_heading-scale: (
-  h1: (size: 2rem,     lh: 1.1),
-  h2: (size: 1.75rem,  lh: 1.15),
-  h3: (size: 1.5rem,   lh: 1.2),
-  h4: (size: 1.25rem,  lh: 1.3),
-  h5: (size: 1.125rem, lh: 1.4),
-  h6: (size: 1rem,     lh: 1.5),
+  h1: (size: 2rem,     lh: 1.1,  mt: 0),
+  h2: (size: 1.75rem,  lh: 1.15, mt: 2rem),
+  h3: (size: 1.5rem,   lh: 1.2,  mt: 1.5rem),
+  h4: (size: 1.25rem,  lh: 1.3,  mt: 1.5rem),
+  h5: (size: 1.125rem, lh: 1.4,  mt: 1.5rem),
+  h6: (size: 1rem,     lh: 1.5,  mt: 1.5rem),
 );
 
 // Phone breakpoint heading overrides
@@ -34,7 +37,7 @@ $_heading-phone: (
     #{$tag} {
       font-size: map.get($vals, size);
       line-height: map.get($vals, lh);
-      margin-top: 0;
+      margin-top: map.get($vals, mt);
       margin-bottom: var(#{$prefix}spacing);
       font-weight: 700;
       text-wrap: balance;
@@ -59,10 +62,7 @@ $_heading-phone: (
     margin-bottom: var(#{$prefix}spacing);
   }
 
-  // Extra top margin on headings that follow block content
-  :where(p, ul, ol, dl, blockquote, pre, table, figure, form) + :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: calc(var(#{$prefix}spacing) * 2);
-  }
+
 
   // ----- Lists -----
 
@@ -103,7 +103,7 @@ $_heading-phone: (
   :where(blockquote) cite {
     font-style: normal;
     font-size: 0.9em;
-    color: var(#{$prefix}text-2);
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
   // ----- Horizontal Rule -----

package/src/nimble-base.scss

@@ -1,11 +1,10 @@
 // ==========================================================================
 // nimble.css — Base Sub-bundle
-// Reset + colors + document + typography — the classless core
+// Colors + document + typography (no reset — use nimble-reset for that)
 // ==========================================================================
 
 @use 'config' as *;
 @use 'layers-base';
-@use 'reset';
 @use 'colors';
 @use 'document';
 @use 'typography';

package/src/nimble-core.scss

@@ -0,0 +1,31 @@
+// ==========================================================================
+// nimble.css — Core Entry Point
+// Everything except progress, meter, and select add-ons
+// ==========================================================================
+
+@use 'config' as *;
+
+// Layer order declaration — emitted first in CSS output.
+// Lower layers lose to higher layers in cascade.
+@use 'layers';
+
+// Phase 2: Core
+@use 'reset';
+@use 'colors';
+@use 'document';
+@use 'typography';
+
+// Phase 3: Elements
+@use 'links';
+@use 'buttons';
+@use 'forms';
+@use 'tables';
+@use 'code';
+@use 'media';
+@use 'article';
+@use 'details';
+@use 'dialog';
+@use 'print';
+
+// Phase 4: Utilities
+@use 'utilities';

package/src/nimble-meter.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Meter Sub-bundle
+// Add to nimble.css for styled <meter> elements
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'meter';

package/src/nimble-progress.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Progress Sub-bundle
+// Add to nimble.css for styled <progress> elements
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'progress';

package/src/nimble-select.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Customizable Select Sub-bundle
+// Add to nimble.css for styled <select> using appearance: base-select
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'select';

package/src/nimble.scss

@@ -1,6 +1,6 @@
 // ==========================================================================
 // nimble.css — Entry Point
-// A minimal class/classless CSS library
+// Everything: core + progress, meter, and select
 // ==========================================================================
 
 @use 'config' as *;
@@ -22,9 +22,15 @@
 @use 'tables';
 @use 'code';
 @use 'media';
+@use 'article';
 @use 'details';
 @use 'dialog';
 @use 'print';
 
+// Phase 3: Optional extras
+@use 'progress';
+@use 'meter';
+@use 'select';
+
 // Phase 4: Utilities
 @use 'utilities';