@leftium/nimble.css 0.11.0 → 0.13.0

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

@@ -1,7 +1,7 @@
 // ==========================================================================
 // nimble.css — Grid Column Assignment
-// Assigns body's direct children to the centered content column (column 3).
-// 5-column grid: 1fr | shadow-gap | content | shadow-gap | 1fr
+// Assigns body's direct children to the centered content column (column 2).
+// 3-column grid: 1fr | content | 1fr
 // Global (not scoped) so the body grid layout always applies.
 // ==========================================================================
 
@@ -11,40 +11,41 @@
 @layer nimble.base {
 
   body > * {
-    grid-column: 3;
+    grid-column: 2;
     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,
   // but NOT for CSS selector matching — so body > * misses the actual
   // content elements. This rule mirrors the body > * rule above.
   body > [style*='display: contents'] > * {
-    grid-column: 3;
+    grid-column: 2;
     min-width: 0;
   }
 
   // Content shadow: absolutely-positioned pseudo spanning full body height.
-  // Width matches grid columns 2–4 (gap + content + gap) via the same
-  // min() expression used in the grid definition, plus the two gap columns.
-  // Hidden on small viewports where content is edge-to-edge.
-  @media (min-width: #{$breakpoint-phone}) {
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(
-        #{string.unquote('calc(var(#{$prefix}content-width) + 2 * var(#{$prefix}content-shadow-gap))')},
-        #{string.unquote('calc(100% - 2 * var(#{$prefix}spacing))')}
-      );
-      box-shadow: var(#{$prefix}content-shadow);
-      pointer-events: none;
-      z-index: -1;
-    }
+  // Width = content column + shadow gap on each side, creating a visual
+  // separation between the shadow edge and the content.
+  // The clamp() formula handles visibility: shadow shows at full width when
+  // there's at least 2*gap of space on each side between shadow edge and
+  // viewport edge, otherwise snaps to 0. No breakpoint needed.
+  body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: clamp(0px,
+      #{string.unquote('calc((100% - 2 * var(#{$prefix}spacing) - var(#{$prefix}content-width) - 4 * var(#{$prefix}content-shadow-gap)) * 9999)')},
+      #{string.unquote('calc(var(#{$prefix}content-width) + 2 * var(#{$prefix}content-shadow-gap))')}
+    );
+    box-shadow: var(#{$prefix}content-shadow);
+    pointer-events: none;
+    z-index: -1;
   }
 
 }

package/src/_layout-utilities.scss

@@ -2,8 +2,15 @@
 // nimble.css — Layout Utilities
 // Global layout classes that interact with the body grid.
 // Always available, including on .no-nimble elements.
+//
+// Breakout hierarchy (narrow → wide):
+//   (default)    — content column (--nc-content-width)
+//   .bleed-edge  — content + shadow gap on each side (shadow boundary)
+//   .bleed-wide  — up to $wide-width (1200px), centered
+//   .bleed-full  — full viewport width
 // ==========================================================================
 
+@use 'sass:string';
 @use 'config' as *;
 
 @if $enable-utilities {
@@ -24,17 +31,27 @@
       padding-inline: var(#{$prefix}spacing);
     }
 
-    // Break out of centered container to full width.
+    // Break out to shadow/paper edge (content + gap on each side).
+    // Uses the same shadow-visibility condition as the body::before pseudo:
+    // when the shadow is visible, caps at content-width + 2*gap (shadow boundary);
+    // when the shadow is hidden (narrow viewport), goes full width.
     // position: relative creates a stacking context so background
     // covers adjacent siblings' content shadows.
-    .full-bleed {
+    .bleed-edge {
       grid-column: 1 / -1;
+      width: 100%;
+      max-width: clamp(
+        #{string.unquote('calc(var(#{$prefix}content-width) + 2 * var(#{$prefix}content-shadow-gap))')},
+        #{string.unquote('calc((100% - 2 * var(#{$prefix}spacing) - var(#{$prefix}content-width) - 4 * var(#{$prefix}content-shadow-gap)) * -9999)')},
+        100%
+      );
+      margin-inline: auto;
       box-shadow: none;
       position: relative;
     }
 
     // Break out to wide max-width
-    .wide {
+    .bleed-wide {
       grid-column: 1 / -1;
       box-shadow: none;
       width: 100%;
@@ -43,6 +60,29 @@
       padding-inline: var(#{$prefix}spacing);
     }
 
+    // Break out of centered container to full viewport width.
+    // position: relative creates a stacking context so background
+    // covers adjacent siblings' content shadows.
+    .bleed-full {
+      grid-column: 1 / -1;
+      box-shadow: none;
+      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));
+      }
+    }
+
   }
 
 }

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;

package/src/_typography.scss

@@ -12,22 +12,19 @@
 // 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
+// OP normalize uses --font-lineheight-1 (1.25) for ALL headings + --font-weight-9 (900).
+// nimble uses a graduated lh scale + weight 700 (--font-weight-7).
+// OP normalize heading sizes: h1=3.5rem h2=2.5rem h3=2rem h4=1.5rem h5=1.25rem h6=1.1rem
 $_heading-scale: (
-  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),
+  h1: (size: 2rem,     lh: 1.1,  mt: 0),        // OP --font-size-5/--size-7; lh: --font-lineheight-0
+  h2: (size: 1.75rem,  lh: 1.15, mt: 2rem),      // OP --size-6; lh: no OP match (near lh-0); mt: --size-7
+  h3: (size: 1.5rem,   lh: 1.2,  mt: 1.5rem),    // OP --font-size-4/--size-5; lh: no OP match (near lh-1); mt: --size-5
+  h4: (size: 1.25rem,  lh: 1.3,  mt: 1.5rem),    // OP --font-size-3/--size-4; lh: no OP match (near lh-1); mt: --size-5
+  h5: (size: 1.125rem, lh: 1.4,  mt: 1.5rem),    // no OP match (OP --font-size-2: 1.1rem); lh: no OP match; mt: --size-5
+  h6: (size: 1rem,     lh: 1.5,  mt: 1.5rem),    // OP --font-size-1/--size-3; lh: --font-lineheight-3; mt: --size-5
 );
 
-// Phone breakpoint heading overrides
-// Spec §8.3
-$_heading-phone: (
-  h1: 1.75rem,
-  h2: 1.5rem,
-  h3: 1.3rem,
-);
+
 
 @layer nimble.base {
 
@@ -38,21 +35,12 @@ $_heading-phone: (
       font-size: map.get($vals, size);
       line-height: map.get($vals, lh);
       margin-top: map.get($vals, mt);
-      margin-bottom: var(#{$prefix}spacing);
-      font-weight: 700;
+      margin-bottom: var(#{$prefix}spacing);   // OP --size-3
+      font-weight: 700;                        // OP --font-weight-7 (OP normalize uses weight-9: 900)
       text-wrap: balance;
     }
   }
 
-  // Phone breakpoint: scale down h1-h3
-  @media (max-width: #{$breakpoint-phone}) {
-    @each $tag, $size in $_heading-phone {
-      #{$tag} {
-        font-size: #{$size};
-      }
-    }
-  }
-
   // ----- Vertical rhythm -----
   // Block elements: no top margin, consistent bottom margin
   // Spec §8.4
@@ -62,16 +50,29 @@ $_heading-phone: (
     margin-bottom: var(#{$prefix}spacing);
   }
 
+  // Prevent double spacing at page edges: body has padding-block,
+  // so strip margins that would stack with it.
+  // Must live inside @scope so it beats the scoped margin rules above.
+  // Uses :nth-child/:nth-last-child(of ...) to skip <script>/<style>.
+  body > :first-child,
+  body > :first-child > :first-child {
+    margin-top: 0;
+  }
+  body > :nth-last-child(1 of :not(script, style, dialog)),
+  body > :nth-last-child(1 of :not(script, style, dialog)) > :last-child {
+    margin-bottom: 0;
+  }
+
 
 
   // ----- Lists -----
 
   ul, ol {
-    padding-inline-start: 1.5em;
+    padding-inline-start: 1.5em;    // OP ~size-5 (em-relative); OP normalize: --size-8 (3rem)
   }
 
   :where(li) {
-    margin-bottom: 0.25em;
+    margin-bottom: 0.25em;              // OP ~size-1 (em-relative)
   }
 
   // Remove bottom margin on nested lists
@@ -80,12 +81,12 @@ $_heading-phone: (
   }
 
   dt {
-    font-weight: 600;
+    font-weight: 600;                           // OP --font-weight-6 (OP normalize uses weight-7: 700)
   }
 
   dd {
-    margin-inline-start: 1.5em;
-    margin-bottom: 0.5em;
+    margin-inline-start: 1.5em;         // OP ~size-5 (em-relative)
+    margin-bottom: 0.5em;               // OP ~size-2 (em-relative)
   }
 
   // ----- Blockquote -----
@@ -94,15 +95,15 @@ $_heading-phone: (
   blockquote {
     margin-block: var(#{$prefix}spacing);
     margin-inline: 0;
-    padding: 0.25em var(#{$prefix}spacing);
-    border-inline-start: 0.25rem solid var(#{$prefix}border);
+    padding: 0.25em var(#{$prefix}spacing); // OP ~size-1 (em-relative), --size-3
+    border-inline-start: 0.25rem solid var(#{$prefix}border); // OP --size-1
     font-style: italic;
   }
 
   :where(blockquote) footer,
   :where(blockquote) cite {
     font-style: normal;
-    font-size: 0.9em;
+    font-size: 0.9em;                   // no OP match (near ~size-3)
     color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
@@ -120,7 +121,7 @@ $_heading-phone: (
   // Spec §9.10
 
   mark {
-    padding: 0.1em 0.25em;
+    padding: 0.1em 0.25em;              // 0.1em: no OP match (micro); 0.25em: OP ~size-1
     background-color: #{string.unquote('light-dark(#fde68a, oklch(0.55 0.12 85))')};
     color: #{string.unquote('light-dark(inherit, oklch(0.95 0.01 85))')};
     border-radius: 2px;

package/src/nimble-core.scss

@@ -18,6 +18,14 @@
 @use 'layout-utilities';
 @use 'print';
 
+// Sentinel markers — no-nimble.js uses these to find where scopeable rules begin
+@layer nimble.base {
+  :root { --nimble-scope-start: 1 }
+}
+@layer nimble.utilities {
+  :root { --nimble-scope-start: 1 }
+}
+
 // Component-level styles — optionally scoped
 @if $exclude-selector {
   @scope (:root) to (#{$exclude-selector}) {

package/src/nimble.scss

@@ -19,6 +19,14 @@
 @use 'layout-utilities';
 @use 'print';
 
+// Sentinel markers — no-nimble.js uses these to find where scopeable rules begin
+@layer nimble.base {
+  :root { --nimble-scope-start: 1 }
+}
+@layer nimble.utilities {
+  :root { --nimble-scope-start: 1 }
+}
+
 // Component-level styles — optionally scoped
 @if $exclude-selector {
   @scope (:root) to (#{$exclude-selector}) {