@leftium/nimble.css 0.11.0 → 0.12.0

package/src/_buttons.scss

@@ -11,8 +11,8 @@
   // ----- Base button -----
 
   :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
-    --_btn-padding-v: 0.5em;
-    --_btn-padding-h: 1em;
+    --_btn-padding-v: 0.5em;   // OP ~size-2 (em-relative)
+    --_btn-padding-h: 1em;     // OP ~size-3 (em-relative)
 
     padding: var(--_btn-padding-v) var(--_btn-padding-h);
     background-color: var(#{$prefix}primary);
@@ -20,7 +20,7 @@
     border: 1px solid var(#{$prefix}primary);
     border-radius: var(#{$prefix}radius);
     font: inherit;
-    font-size: 1rem;
+    font-size: 1rem;            // OP --size-3
     line-height: 1.5;
     cursor: pointer;
     text-decoration: none;
@@ -30,6 +30,12 @@
     transition: background-color 0.2s, border-color 0.2s;
   }
 
+  // Vertical rhythm for flow-level buttons and link-as-button elements
+  // so wrapped rows don't collide.
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    margin-block-end: 0.25em;   // OP ~size-1 (em-relative)
+  }
+
   :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):hover {
     background-color: var(#{$prefix}primary-hover);
     border-color: var(#{$prefix}primary-hover);
@@ -60,10 +66,10 @@
   // ----- 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;
+    --_btn-padding-v: 0.05em;   // no OP match (micro)
+    --_btn-padding-h: 0.4em;    // no OP match (near ~size-2)
+    margin: 0.1em 0.15em;       // no OP match (micro)
+    font-size: 0.875em;         // no OP match (7/8)
     vertical-align: baseline;
   }
 
@@ -81,7 +87,7 @@
 
   :where([role="group"]) {
     display: inline-flex;
-    margin-bottom: var(#{$prefix}spacing);
+    margin-bottom: 0.25em;               // OP ~size-1 (em-relative); match individual buttons
   }
 
   [role="group"] > * {
@@ -165,15 +171,15 @@
   // ----- Search groups (pill shape) -----
 
   [role="search"] [role="group"] > :first-child {
-    border-start-start-radius: 5rem;
-    border-end-start-radius: 5rem;
-    padding-inline-start: 1.25em;
+    border-start-start-radius: 5rem;     // OP --size-10 (pill)
+    border-end-start-radius: 5rem;       // OP --size-10 (pill)
+    padding-inline-start: 1.25em;        // OP ~size-4 (em-relative)
   }
 
   [role="search"] [role="group"] > :last-child {
-    border-start-end-radius: 5rem;
-    border-end-end-radius: 5rem;
-    padding-inline-end: 1.25em;
+    border-start-end-radius: 5rem;       // OP --size-10 (pill)
+    border-end-end-radius: 5rem;         // OP --size-10 (pill)
+    padding-inline-end: 1.25em;          // OP ~size-4 (em-relative)
   }
 
 }

package/src/_code.scss

@@ -9,10 +9,10 @@
 
   :where(code, kbd, samp) {
     font-family: var(#{$prefix}font-mono);
-    font-size: 0.875em;
+    font-size: 0.875em;      // no OP match (7/8); OP normalize inherits font-size
     background-color: var(#{$prefix}surface-2);
     border-radius: var(#{$prefix}radius);
-    padding: 0.15em 0.35em;
+    padding: 0.15em 0.35em;  // no OP match; OP normalize: --size-1 --size-2
   }
 
   :where(pre) {

package/src/_config.scss

@@ -46,13 +46,13 @@ $surface-dark-chroma-boost: 0.003 !default;
 $surface-dark-hue-shift: 10 !default;
 
 // --- Typography ---
-$font-sans: system-ui, sans-serif !default;
-$font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',
+$font-sans: system-ui, sans-serif !default;                        // OP --font-sans (--font-system-ui)
+$font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',       // OP ~--font-mono (--font-monospace-code); subset
             Menlo, Consolas, 'DejaVu Sans Mono', monospace !default;
 
 // --- Spacing & Layout ---
-$spacing: 1rem !default;
-$radius: 0.25rem !default;
+$spacing: 1rem !default;       // OP --size-3
+$radius: 0.25rem !default;     // OP --size-1
 $content-width: 60ch !default;
 $wide-width: 1200px !default;
 

package/src/_details.scss

@@ -14,23 +14,24 @@
       border-radius: var(#{$prefix}radius);
       // No vertical padding — summary provides its own via the
       // negative-margin/padding trick for vertical centering.
-      padding: 0 1em;
+      padding: 0 1em;          // OP ~size-3 (em-relative)
+                               // OP normalize: padding-inline: --size-3, padding-block: --size-2
     }
 
     :where(details) {
-      margin-bottom: 0.5em;
+      margin-bottom: 0.5em;    // OP ~size-2 (em-relative)
     }
 
     :where(summary) {
       cursor: pointer;
-      font-weight: 600;
+      font-weight: 600;    // OP --font-weight-6 (OP normalize uses weight-7: 700 for dt/summary)
       // 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.
       // Vertical padding matches button padding (0.5em) so collapsed
       // details height equals button height (2px border + 2.5em).
-      margin: 0 -1em;
-      padding: 0.5em 1em;
+      margin: 0 -1em;          // OP ~size-3 (em-relative, negative)
+      padding: 0.5em 1em;     // OP ~size-2 ~size-3 (em-relative)
       // 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.
@@ -51,7 +52,7 @@
     :where(summary[role="button"]) {
       display: block;
       width: auto;
-      margin: 0 -1em;          // restore stretch (button sets margin: 0)
+      margin: 0 -1em;          // OP ~size-3 (em-relative, negative); restore stretch
       list-style: none;         // remove ▶/▼ marker — replaced by ::before
     }
 
@@ -59,7 +60,7 @@
       content: '▶\00a0';
       display: inline-block;
       transition: transform 0.2s ease;
-      font-size: 0.75em;
+      font-size: 0.75em;       // no OP match (3/4)
       vertical-align: middle;
     }
 
@@ -69,7 +70,7 @@
 
     // When open, restore vertical padding for content spacing.
     :where(details[open]) {
-      padding-bottom: 0.5em;
+      padding-bottom: 0.5em;   // OP ~size-2 (em-relative)
     }
 
   }

package/src/_dialog.scss

@@ -13,13 +13,34 @@
       background-color: var(#{$prefix}surface-4);
       border: 1px solid var(#{$prefix}border);
       border-radius: var(#{$prefix}radius);
-      max-width: min(90vw, 40rem);
+      max-width: min(90vw, 40rem); // no OP match (above scale)
+      max-height: 85vh;
       padding: var(#{$prefix}spacing);
     }
 
+    // Reinforce UA centering for showModal() — some browsers lose
+    // the default position/inset/margin when author layers are present.
+    :where(dialog[open]) {
+      position: fixed;
+      inset: 0;
+      margin: auto;
+    }
+
+    // When dialog wraps an article, let the article provide all
+    // visual chrome (background, border, padding, radius).
+    :where(dialog:has(> article)) {
+      background: none;
+      border: none;
+      padding: 0;
+    }
+
+    :where(dialog > article) {
+      margin-bottom: 0;
+    }
+
     dialog::backdrop {
       background: rgb(0 0 0 / 0.5);
-      backdrop-filter: blur(4px);
+      backdrop-filter: blur(4px); // OP --size-px-1
       animation: nc-backdrop-in 0.2s ease;
     }
 

package/src/_document.scss

@@ -10,8 +10,8 @@
 
   html {
     font-family: var(#{$prefix}font-sans);
-    font-size: 100%;    // = 16px in most browsers
-    line-height: 1.5;
+    font-size: 100%;    // = 16px (OP --size-3) in most browsers
+    line-height: 1.5;   // OP --font-lineheight-3
     color: var(#{$prefix}text);
     background-color: var(#{$prefix}surface-1);
     scrollbar-gutter: stable;
@@ -32,6 +32,7 @@
       var(#{$prefix}content-shadow-gap)
       1fr;
     min-height: 100dvh;
+    padding-block: var(#{$prefix}spacing);
     position: relative;
   }
 

package/src/_forms.scss

@@ -13,14 +13,15 @@
          select, textarea) {
     --_input-bg: color-mix(in oklch, var(#{$prefix}surface-1), var(#{$prefix}surface-2) 20%);
 
-    padding: 0.5em 0.75em;
+    padding: 0.5em 0.75em;  // 0.5em: OP ~size-2; 0.75em: no OP match
+                            // OP normalize: padding-block: --size-1, padding-inline: --size-2
     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);
     font: inherit;
-    font-size: 1rem; // >=16px prevents iOS Safari auto-zoom on focus
+    font-size: 1rem; // OP --size-3; >=16px prevents iOS Safari auto-zoom on focus
     transition: border-color 0.2s, box-shadow 0.2s;
   }
 
@@ -31,6 +32,12 @@
     margin-bottom: var(#{$prefix}spacing);
   }
 
+  // When an input is the last visible child of a block that already has
+  // margin-bottom (e.g. <p>), kill the input's margin to avoid doubling.
+  :where(p, div) > :where(input, select, textarea):nth-last-child(1 of :not(datalist, script, style)) {
+    margin-bottom: 0;
+  }
+
   // ----- Focus -----
 
   :where(input, select, textarea):focus-visible {
@@ -45,7 +52,7 @@
     display: block;
     margin-top: calc(var(#{$prefix}spacing) * -0.75); // pull up under the input
     margin-bottom: var(#{$prefix}spacing);
-    font-size: 0.875em;
+    font-size: 0.875em;     // no OP match (7/8)
     color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
@@ -72,17 +79,17 @@
 
   :where(label) {
     display: block;
-    margin-bottom: 0.25em;
+    margin-bottom: 0.25em;   // OP ~size-1 (em-relative)
   }
 
   :where(label:has(+ input, + select, + textarea)) {
-    font-weight: 600;
+    font-weight: 600;    // OP --font-weight-6
   }
 
   // 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;
+    margin-bottom: 0.5em;    // OP ~size-2 (em-relative)
   }
 
   // ----- Fieldset -----
@@ -95,9 +102,16 @@
     max-width: 100%;
   }
 
+  // Kill last-child bottom margin so it doesn't stack with fieldset padding.
+  // Uses :nth-last-child(of ...) to skip invisible elements (datalist, script).
+  :where(fieldset) > :nth-last-child(1 of :not(datalist, script, style)),
+  :where(fieldset) > :nth-last-child(1 of :not(datalist, script, style)) > :nth-last-child(1 of :not(datalist, script, style)) {
+    margin-bottom: 0;
+  }
+
   :where(legend) {
-    font-weight: 600;
-    padding-inline: 0.25em;
+    font-weight: 600;    // OP --font-weight-6
+    padding-inline: 0.25em;  // OP ~size-1 (em-relative)
   }
 
   // ----- Checkbox & Radio -----
@@ -105,16 +119,16 @@
 
   :where([type="checkbox"], [type="radio"]) {
     accent-color: var(#{$prefix}primary);
-    width: 1.125em;
-    height: 1.125em;
+    width: 1.125em;          // no OP match (OP normalize: --size-3 = 1rem)
+    height: 1.125em;         // no OP match (OP normalize: --size-3 = 1rem)
     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;
+    gap: 0.35em;             // no OP match (near ~size-1)
+    margin-bottom: 0.5em;    // OP ~size-2 (em-relative)
   }
 
   // Last checkbox/radio label in a group drops its bottom margin
@@ -126,8 +140,8 @@
   // ----- Search (pill shape) -----
 
   :where([type="search"]) {
-    border-radius: 5rem;
-    padding-inline: 1.25em;
+    border-radius: 5rem;     // OP --size-10 (pill)
+    padding-inline: 1.25em;  // OP ~size-4 (em-relative)
   }
 
   // ----- Range -----
@@ -157,9 +171,9 @@
   }
 
   :where([type="file"])::file-selector-button {
-    padding: 0.5em 1em;
-    margin-right: 0.75em;
-    margin-inline-end: 0.75em;
+    padding: 0.5em 1em;      // OP ~size-2 ~size-3 (em-relative)
+    margin-right: 0.75em;    // no OP match (between ~size-2/~size-3)
+    margin-inline-end: 0.75em; // no OP match (between ~size-2/~size-3)
     background-color: var(#{$prefix}primary);
     color: var(#{$prefix}primary-contrast);
     border: 1px solid var(#{$prefix}primary);
@@ -178,7 +192,7 @@
   // 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)
+    min-width: 10em; // no OP match; prevent collapse when empty (e.g. time with no value)
     margin-bottom: var(#{$prefix}spacing);
   }
 
@@ -188,7 +202,7 @@
     --_color-size: calc(1em * 1.5 + 1em + 2px); // Match text input height
     margin-bottom: var(#{$prefix}spacing);
 
-    --_color-pad: 0.25em;
+    --_color-pad: 0.25em;    // OP ~size-1 (em-relative)
 
     height: var(--_color-size);
     width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad)); // Golden ratio inner swatch
@@ -216,14 +230,14 @@
     :where(label:has([type="checkbox"][role="switch"])) {
       display: flex;
       align-items: center;
-      gap: 0.5em;
+      gap: 0.5em;              // OP ~size-2 (em-relative)
     }
 
     :where([type="checkbox"][role="switch"]) {
       appearance: none;
-      width: 2.5em;
-      height: 1.25em;
-      border-radius: 1em;
+      width: 2.5em;            // no OP match (custom switch width)
+      height: 1.25em;          // OP ~size-4 (em-relative)
+      border-radius: 1em;      // OP ~size-3 (pill, em-relative)
       background-color: var(#{$prefix}border);
       position: relative;
       cursor: pointer;

package/src/_grid-columns.scss

@@ -15,6 +15,7 @@
     min-width: 0; // Allow grid children to shrink below intrinsic content width
   }
 
+
   // Fix for frameworks (SvelteKit, etc.) that insert a
   // <div style="display: contents"> wrapper between <body> and content.
   // display: contents removes the element from the box tree for layout,

package/src/_layout-utilities.scss

@@ -33,6 +33,20 @@
       position: relative;
     }
 
+    // Responsive equal-column grid
+    // Mobile: single column. Above phone breakpoint: auto-fit columns.
+    // margin-bottom matches vertical rhythm of p, ul, etc.
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(#{$prefix}spacing);
+      margin-bottom: var(#{$prefix}spacing);
+
+      @media (min-width: #{$breakpoint-phone}) {
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
     // Break out to wide max-width
     .wide {
       grid-column: 1 / -1;

package/src/_links.scss

@@ -11,7 +11,7 @@
   :where(a:not([role="button"])) {
     color: var(#{$prefix}primary);
     text-decoration: underline;
-    text-underline-offset: 0.15em;
+    text-underline-offset: 0.15em; // no OP match; OP normalize: 1px (2px Firefox)
     text-decoration-color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary), transparent 50%)')};
     transition: color 0.2s, text-decoration-color 0.2s;
   }

package/src/_media.scss

@@ -18,9 +18,9 @@
   }
 
   :where(figcaption) {
-    font-size: 0.9em;
+    font-size: 0.9em;        // no OP match; OP normalize: --font-size-1 (1rem)
     color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
-    margin-top: 0.5em;
+    margin-top: 0.5em;       // OP ~size-2 (em-relative)
   }
 
 }

package/src/_meter.scss

@@ -16,7 +16,7 @@
     -moz-appearance: none;
     appearance: none;
     width: 100%;
-    height: 0.5rem;
+    height: 0.5rem;          // OP --size-2
     overflow: hidden;
     border: 0;
     border-radius: var(#{$prefix}radius);
@@ -32,7 +32,7 @@
     border-radius: var(#{$prefix}radius);
     background-color: var(#{$prefix}surface-3);
     border: 0;
-    height: 0.5rem;
+    height: 0.5rem;          // OP --size-2
   }
 
   // WebKit: value bars for each semantic state

package/src/_print.scss

@@ -13,7 +13,7 @@
 
   a[href]::after {
     content: " (" attr(href) ")";
-    font-size: 0.85em;
+    font-size: 0.85em;      // no OP match (near ~size-3)
     color: #555;
   }
 

package/src/_progress.scss

@@ -8,81 +8,12 @@
 
 @layer nimble.base {
 
+  // Native system progress bars on all platforms.
+  // Custom styling via appearance: none is broken on iOS Safari (partial
+  // stripping of native chrome) and cannot be scoped away from WebKit/Blink
+  // via CSS alone.  Native bars look fine everywhere.
   :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

@@ -81,11 +81,11 @@
   }
 
   :where(sub) {
-    bottom: -0.25em;
+    bottom: -0.25em;         // OP ~size-1 (em-relative, negative)
   }
 
   :where(sup) {
-    top: -0.5em;
+    top: -0.5em;             // OP ~size-2 (em-relative, negative)
   }
 
   // --- Embedded content ---

package/src/_select.scss

@@ -32,7 +32,7 @@
       border: 1px solid var(#{$prefix}border);
       border-radius: var(#{$prefix}radius);
       background-color: var(#{$prefix}surface-1);
-      padding: 0.25em;
+      padding: 0.25em;         // OP ~size-1 (em-relative)
       // Fade in/out animation
       opacity: 0;
       transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
@@ -50,7 +50,8 @@
 
     // Options inside the picker
     :where(select) option {
-      padding: 0.5em 0.75em;
+      padding: 0.5em 0.75em;   // 0.5em: OP ~size-2; 0.75em: no OP match
+                               // OP normalize: select uses 0.75ch block, --size-relative-4 inline
       border-radius: var(#{$prefix}radius);
       transition: background-color 0.15s;
     }

package/src/_tables.scss

@@ -14,13 +14,14 @@
   }
 
   :where(th, td) {
-    padding: 0.5em 0.75em;
+    padding: 0.5em 0.75em;   // 0.5em: OP ~size-2; 0.75em: no OP match
+                              // OP normalize: --size-2 (0.5rem) both axes
     border-bottom: 1px solid #{string.unquote('color-mix(in oklch, var(#{$prefix}border), transparent 40%)')};
     text-align: start;
   }
 
   :where(thead th, thead td) {
-    font-weight: 600;
+    font-weight: 600;     // OP --font-weight-6
     border-bottom-width: 2px;
     background-color: var(#{$prefix}surface-2);
     text-wrap: balance;