@leftium/nimble.css 0.1.0 → 0.2.0

package/src/_buttons.scss

@@ -39,6 +39,16 @@
     outline: none;
   }
 
+  // ----- Inline (buttons within flow text) -----
+
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]).inline {
+    --_btn-padding-v: 0.05em;
+    --_btn-padding-h: 0.4em;
+    margin: 0.1em 0.15em;
+    font-size: 0.875em;
+    vertical-align: baseline;
+  }
+
   // ----- Disabled -----
 
   :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):disabled {
@@ -53,15 +63,55 @@
 
   :where([role="group"]) {
     display: inline-flex;
+    margin-bottom: var(#{$prefix}spacing);
   }
 
   [role="group"] > * {
     border-radius: 0;
     margin: 0;
+    position: relative;
   }
 
+  // Inset divider between adjacent same-type buttons.  Different-type
+  // neighbours already have distinct backgrounds so no separator needed.
   [role="group"] > * + * {
-    box-shadow: -1px 0 0 rgb(255 255 255 / 0.3);
+    --_divider: "";           // shown by default (same-type needs separation)
+  }
+
+  [role="group"] > * + *::before {
+    content: var(--_divider);
+    position: absolute;
+    inset-inline-start: 0;
+    top: 20%;
+    bottom: 20%;
+    width: 1px;
+    background: rgb(255 255 255 / 0.3);
+    pointer-events: none;
+  }
+
+  // Hide divider between different-type button neighbours.
+  // primary ↔ secondary
+  [role="group"] > :not(.secondary):not(.outline) + .secondary,
+  [role="group"] > .secondary + :not(.secondary):not(.outline) {
+    --_divider: none;
+  }
+
+  // primary ↔ outline
+  [role="group"] > :not(.secondary):not(.outline) + .outline,
+  [role="group"] > .outline + :not(.secondary):not(.outline) {
+    --_divider: none;
+  }
+
+  // secondary ↔ outline
+  [role="group"] > .secondary + .outline,
+  [role="group"] > .outline + .secondary {
+    --_divider: none;
+  }
+
+  // Hide divider after non-button elements (e.g. search input).
+  [role="group"] > input + *,
+  [role="group"] > select + * {
+    --_divider: none;
   }
 
   [role="group"] > :first-child {
@@ -74,6 +124,26 @@
     border-end-end-radius: var(#{$prefix}radius);
   }
 
+  // ----- Outline button groups -----
+  // When ALL children are .outline, collapse borders onto the group
+  // container so internal dividers don't double up with per-button borders.
+  // :has(> :not(.outline)) excludes mixed groups (e.g. primary + outline).
+
+  [role="group"]:has(.outline):not(:has(> :not(.outline))) {
+    border: 1px solid var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+  }
+
+  [role="group"]:has(.outline):not(:has(> :not(.outline))) > .outline {
+    border: none;
+  }
+
+  // Outline dividers use primary color (white overlay is invisible
+  // against transparent background).
+  [role="group"] > .outline + .outline::before {
+    background: var(#{$prefix}primary);
+  }
+
   // ----- Search groups (pill shape) -----
 
   [role="search"] [role="group"] > :first-child {

package/src/_colors.scss

@@ -45,14 +45,10 @@
     }
 
     // ----- Text -----
-    #{$prefix}text-1: #{_light-dark(
+    #{$prefix}text: #{_light-dark(
       _oklch(0.280, 0.005, $surface-hue),
       _oklch(0.860, 0.005, $surface-hue)
     )};
-    #{$prefix}text-2: #{_light-dark(
-      _oklch(0.580, 0.005, $surface-hue),
-      _oklch(0.650, 0.005, $surface-hue)
-    )};
 
     // ----- Border -----
     #{$prefix}border: #{_light-dark(

package/src/_details.scss

@@ -12,18 +12,78 @@
     :where(details) {
       border: 1px solid var(#{$prefix}border);
       border-radius: var(#{$prefix}radius);
-      padding: 0.75em 1em;
+      // No vertical padding — summary provides its own via the
+      // negative-margin/padding trick for vertical centering.
+      padding: 0 1em;
     }
 
     :where(summary) {
       cursor: pointer;
       font-weight: 600;
+      // Stretch summary across the horizontal padding area, then
+      // re-apply vertical + horizontal padding on itself. When
+      // collapsed the text is vertically centered with equal padding.
+      margin: 0 -1em;
+      padding: 0.75em 1em;
+      // Custom markers fix iOS Safari's tiny native disclosure triangle.
+      // Full-size Unicode triangles inherit font metrics and sit on the
+      // baseline like native markers.
+      list-style-type: '▶ ';
     }
 
     :where(details[open] > summary) {
-      margin-bottom: 0.5em;
+      list-style-type: '▼ ';
+    }
+
+    // When open, restore vertical padding for content spacing.
+    :where(details[open]) {
+      padding-bottom: 0.75em;
+    }
+
+    // Kill last-child bottom margin so it doesn't stack with
+    // details[open] padding-bottom. Descendant selector (not >)
+    // reaches inside ::details-content which wraps the content.
+    // No :where() — needs specificity to override typography margins.
+    details :last-child {
+      margin-bottom: 0;
+    }
+
+    // Summary bottom padding provides the gap to content when open.
+    // No extra margin-bottom or ::details-content padding needed.
+
+  }
+
+  // Animate content on open/close (progressive enhancement)
+  // Outside @layer — ::details-content needs real specificity to override UA styles
+  // Gate on ::details-content support (Safari 18.4+, Chrome 131+)
+  @supports selector(details::details-content) {
+    details::details-content {
+      transition: opacity 0.3s ease,
+                  content-visibility 0.3s ease allow-discrete;
+      opacity: 0;
+    }
+
+    details[open]::details-content {
+      opacity: 1;
     }
 
+    // Height animation where interpolate-size is supported (Chrome 129+)
+    @supports (interpolate-size: allow-keywords) {
+      details {
+        interpolate-size: allow-keywords;
+      }
+
+      details::details-content {
+        transition: height 0.3s ease, opacity 0.3s ease,
+                    content-visibility 0.3s ease allow-discrete;
+        height: 0;
+        overflow: clip;
+      }
+
+      details[open]::details-content {
+        height: auto;
+      }
+    }
   }
 
 }

package/src/_dialog.scss

@@ -17,8 +17,14 @@
       padding: var(#{$prefix}spacing);
     }
 
-    :where(dialog::backdrop) {
+    dialog::backdrop {
       background: rgb(0 0 0 / 0.5);
+      backdrop-filter: blur(4px);
+      animation: nc-backdrop-in 0.2s ease;
+    }
+
+    @keyframes nc-backdrop-in {
+      from { opacity: 0; }
     }
 
   }

package/src/_document.scss

@@ -12,7 +12,7 @@
     font-family: var(#{$prefix}font-sans);
     font-size: 100%;    // = 16px in most browsers
     line-height: 1.5;
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
     background-color: var(#{$prefix}surface-1);
   }
 
@@ -30,12 +30,13 @@
 
   body > * {
     grid-column: 2;
+    min-width: 0; // Allow grid children to shrink below intrinsic content width
   }
 
   // Selection styling using primary accent
   ::selection {
     background-color: var(#{$prefix}primary-focus);
-    color: var(#{$prefix}text-1);
+    color: var(#{$prefix}text);
   }
 
 }

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) {
@@ -63,6 +85,8 @@
     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 +99,22 @@
 
   :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: var(#{$prefix}spacing);
+  }
+
+  // Radio options in a group sit close together; only the last one
+  // carries the full field-gap to the next element.
+  :where(label:has([type="radio"])) {
+    margin-bottom: 0.35em;
   }
 
   // ----- Range -----
@@ -84,10 +124,72 @@
     width: 100%;
   }
 
+  // ----- 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)
+  }
+
+  :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
+
+    --_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 +197,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: inline-flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+
     :where([type="checkbox"][role="switch"]) {
       appearance: none;
       width: 2.5em;
@@ -103,6 +211,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 +238,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 @@
   }
 
 }
+