clampography 2.0.0-beta.25 → 2.0.0-beta.27

package/css/forms.css

@@ -165,8 +165,80 @@
   font-weight: 600;
 }
 
-:root :where(meter, progress) {
-  accent-color: var(--clampography-primary);
+:root progress {
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
+  height: 1em;
+  background: transparent;
+}
+
+:root progress::-webkit-progress-bar {
+  background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+}
+
+:root progress::-webkit-progress-value {
+  background: var(--clampography-success);
+}
+
+:root progress::-moz-progress-bar {
+  background: var(--clampography-success);
+}
+
+:root meter {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 1em;
+  background: transparent;
+}
+
+@supports (-moz-appearance: none) {
+
+ :root progress {
+   background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+ }
+
+ :root meter {
+   background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+ }
+}
+
+:root meter::-webkit-meter-inner-element {
+  display: flex;
+  align-items: stretch;
+  height: 1em;
+}
+
+:root meter::-webkit-meter-bar {
+  background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+  height: 100%;
+}
+
+:root meter::-webkit-meter-optimum-value {
+  background: var(--clampography-success);
+  height: 100%;
+}
+
+:root meter:-moz-meter-optimum::-moz-meter-bar {
+  background: var(--clampography-success);
+}
+
+:root meter::-webkit-meter-suboptimum-value {
+  background: var(--clampography-warning);
+  height: 100%;
+}
+
+:root meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--clampography-warning);
+}
+
+:root meter::-webkit-meter-even-less-good-value {
+  background: var(--clampography-error);
+  height: 100%;
+}
+
+:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--clampography-error);
 }
 }

package/css/forms.min.css

@@ -1 +1 @@
-@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root :where(meter, progress){accent-color:var(--clampography-primary);width:100%}}
+@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}

package/css/kbd.css

@@ -3,7 +3,7 @@
 :root kbd {
   display: inline-block;
   padding: 0.1em 0.45em;
-  min-width: 1.6em;
+  min-width: 2em;
   text-align: center;
   font-size: 0.8em;
   font-weight: 700;

package/css/kbd.min.css

@@ -1 +1 @@
-@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:1.6em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
+@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}

package/package.json

@@ -24,9 +24,8 @@
     "src",
     "css"
   ],
-  "unpkg": "css/clampography.min.css",
-  "jsdelivr": "css/clampography.min.css",
   "homepage": "https://next.dav.one/clampography/",
+  "jsdelivr": "css/clampography.min.css",
   "keywords": [
     "alternative",
     "blog",
@@ -62,8 +61,12 @@
   },
   "scripts": {
     "build": "bun src/convert.js",
+    "dev": "bun run dev/server.js",
+    "dev:server": "bun run dev/server.js",
     "test": "bun test"
   },
+  "sideEffects": false,
   "type": "module",
-  "version": "2.0.0-beta.25"
+  "unpkg": "css/clampography.min.css",
+  "version": "2.0.0-beta.27"
 }

package/src/base.js

@@ -32,22 +32,48 @@ export default (options = {}) => {
   };
 
   return {
-    // ROOT CONFIGURATION
-    [root]: {
-      "--spacing-xs": "clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem)",
-      "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
-      "--spacing-md": "clamp(1rem, 0.75rem + 1.25vw, 1.5rem)",
-      "--spacing-lg": "clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem)",
-      "--spacing-xl": "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
+    // ROOT CONFIGURATION (CSS variables)
+    // Uses :where() for zero specificity so user overrides always win regardless of layer/source order
+    [`:where(${root})`]: {
+      "--spacing-xs": "clamp(0.25rem, 1.25vw, 0.75rem)",
+      "--spacing-sm": "clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem)",
+      "--spacing-md": "clamp(0.5rem, 2.5vw, 1.5rem)",
+      "--spacing-lg": "clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem)",
+      "--spacing-xl": "clamp(1rem, 5vw, 3rem)",
       "--list-indent": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
       "--scroll-offset": "5rem",
       "--font-family-base":
-        "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
+        "Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
       "--font-family-mono":
-        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-
-      // Body styles applied to the root container
-      "font-family": "var(--font-family-base)",
+        "ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+
+      // Heading size tokens (30→54px, 22→30px, 18→24px, 16→20px, static)
+      // Override any of these in :root to customize individual headings.
+      "--clampography-h1-size": "clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem)",
+      "--clampography-h2-size": "clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem)",
+      "--clampography-h3-size": "clamp(1.125rem, 1rem + 0.625vw, 1.5rem)",
+      "--clampography-h4-size": "clamp(1rem, 0.917rem + 0.42vw, 1.25rem)",
+      "--clampography-h5-size": "1rem",
+      "--clampography-h6-size": "0.875rem",
+
+      // Global heading scale multiplier (default: 1 = no scaling).
+      // Override in :root to proportionally scale all headings at once.
+      // Example: :root { --clampography-heading-scale: 0.85; }
+      "--clampography-heading-scale": "1",
+      
+      // Individual heading scales (default to global scale)
+      "--clampography-h1-scale": "var(--clampography-heading-scale)",
+      "--clampography-h2-scale": "var(--clampography-heading-scale)",
+      "--clampography-h3-scale": "var(--clampography-heading-scale)",
+      "--clampography-h4-scale": "var(--clampography-heading-scale)",
+      "--clampography-h5-scale": "var(--clampography-heading-scale)",
+      "--clampography-h6-scale": "var(--clampography-heading-scale)",
+    },
+
+    // BODY STYLES (Typography baseline)
+    // Note: font-family is intentionally NOT set here.
+    // It is applied in extra.js with user-font priority via --font-sans.
+    [root === ":root" ? "body" : root]: {
       "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
       "line-height": "1.75",
       "text-rendering": "optimizeLegibility",
@@ -63,7 +89,7 @@ export default (options = {}) => {
     },
 
     [scope("h1")]: {
-      "font-size": "clamp(2.25rem, 1.95rem + 1.5vw, 3rem)",
+      "font-size": "calc(var(--clampography-h1-size) * var(--clampography-h1-scale))",
       "line-height": "1.1111",
       "font-weight": "800",
       "margin-top": "0",
@@ -71,7 +97,7 @@ export default (options = {}) => {
     },
 
     [scope("h2")]: {
-      "font-size": "clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem)",
+      "font-size": "calc(var(--clampography-h2-size) * var(--clampography-h2-scale))",
       "line-height": "1.3333",
       "font-weight": "700",
       "margin-top": "var(--spacing-xl)",
@@ -79,28 +105,28 @@ export default (options = {}) => {
     },
 
     [scope("h3")]: {
-      "font-size": "clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem)",
+      "font-size": "calc(var(--clampography-h3-size) * var(--clampography-h3-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-lg)",
       "margin-bottom": "var(--spacing-sm)",
     },
 
     [scope("h4")]: {
-      "font-size": "clamp(1rem, 0.975rem + 0.125vw, 1.125rem)",
+      "font-size": "calc(var(--clampography-h4-size) * var(--clampography-h4-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-lg)",
       "margin-bottom": "var(--spacing-sm)",
     },
 
     [scope("h5")]: {
-      "font-size": "1rem",
+      "font-size": "calc(var(--clampography-h5-size) * var(--clampography-h5-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-md)",
       "margin-bottom": "var(--spacing-xs)",
     },
 
     [scope("h6")]: {
-      "font-size": "0.875rem",
+      "font-size": "calc(var(--clampography-h6-size) * var(--clampography-h6-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-md)",
       "margin-bottom": "var(--spacing-xs)",
@@ -175,6 +201,8 @@ export default (options = {}) => {
     [scope(":where(code, kbd, samp)")]: {
       "font-family": "var(--font-family-mono)",
       "font-size": "0.875em",
+      "-webkit-font-smoothing": "auto",
+      "-moz-osx-font-smoothing": "auto",
     },
 
     [scope("kbd")]: {
@@ -202,6 +230,7 @@ export default (options = {}) => {
 
     [scope("abbr[title]")]: {
       "text-decoration": "underline dotted",
+      "text-underline-offset": "4px",
       cursor: "help",
     },
 
@@ -357,6 +386,8 @@ export default (options = {}) => {
       "font-family": "var(--font-family-mono)",
       "line-height": "1.6",
       "overflow-x": "auto",
+      "-webkit-font-smoothing": "auto",
+      "-moz-osx-font-smoothing": "auto",
     },
 
     [scope("pre code")]: {
@@ -386,7 +417,7 @@ export default (options = {}) => {
     [scope("fieldset")]: {
       "margin-top": "var(--spacing-md)",
       "margin-bottom": "var(--spacing-md)",
-      padding: "var(--spacing-md)",
+      padding: "var(--spacing-sm)",
     },
 
     [scope("legend")]: {

package/src/extra.js

@@ -31,10 +31,13 @@ export default (options = {}) => {
   };
 
   return {
-    // --- Basic Coloring ---
-    [root]: {
+    // --- Basic Coloring & Font (with user-font priority) ---
+    [root === ":root" ? "body" : root]: {
       "background-color": "var(--clampography-background)",
       "color": "var(--clampography-text)",
+      // --font-sans is Tailwind v4's way to expose the user's font choice.
+      // If the user sets a font in their project, it wins. If not, fallback to clampography's system stack.
+      "font-family": "var(--font-sans, var(--font-family-base))",
     },
 
     [scope(":where(h1, h2, h3, h4, h5, h6)")]: {
@@ -87,7 +90,7 @@ export default (options = {}) => {
       "background-color": "var(--clampography-surface)",
       "border": "1px solid var(--clampography-border)",
       "border-radius": "0.375rem",
-      "padding": "1rem",
+      "padding": "var(--spacing-md)",
     },
 
     // Tables
@@ -121,8 +124,8 @@ export default (options = {}) => {
     [scope("hr")]: {
       "height": "1px",
       "border-width": "0",
-      "margin-top": "3rem",
-      "margin-bottom": "3rem",
+      "margin-top": "var(--spacing-xl)",
+      "margin-bottom": "var(--spacing-xl)",
       "background-color": "var(--clampography-border)",
     },
 
@@ -131,7 +134,7 @@ export default (options = {}) => {
       "border-left-width": "4px",
       "border-left-color": "var(--clampography-primary)",
       "background-color": "var(--clampography-surface)",
-      "padding": "1rem",
+      "padding": "var(--spacing-md)",
       "border-radius": "0.25rem",
       "font-style": "italic",
       "color": "var(--clampography-heading)",
@@ -155,16 +158,17 @@ export default (options = {}) => {
     [scope("details")]: {
       "border": "1px solid var(--clampography-border)",
       "border-radius": "0.375rem",
-      "padding": "0.5rem",
+      "padding": "var(--spacing-sm)",
     },
 
     [scope("summary")]: {
       "color": "var(--clampography-heading)",
+      "border-bottom": "0px solid var(--clampography-border)",
     },
 
     [scope("details[open] > summary")]: {
-      "border-bottom": "1px solid var(--clampography-border)",
-      "padding-bottom": "0.5rem",
+      "border-bottom-width": "1px",
+      "padding-bottom": "var(--spacing-sm)",
     },
   };
 };

package/src/forms.js

@@ -205,10 +205,94 @@ export default (options = {}) => {
       "font-weight": "600",
     },
 
-    // ── Meter & Progress ──────────────────────────────────────────────────────
-    [scope(":where(meter, progress)")]: {
-      "accent-color": "var(--clampography-primary)",
+    // ── Progress ──────────────────────────────────────────────────────────────
+    [scope("progress")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
       "width": "100%",
+      "height": "1em",
+      "background": "transparent",
     },
+
+    // WebKit progress track
+    [scope("progress::-webkit-progress-bar")]: {
+      "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+    },
+
+    // WebKit progress value
+    [scope("progress::-webkit-progress-value")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // Firefox progress value
+    [scope("progress::-moz-progress-bar")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // ── Meter ─────────────────────────────────────────────────────────────────
+    // Custom styling for <meter> (accent-color does not work on meter)
+    [scope("meter")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
+      "width": "100%",
+      "height": "1em",
+      "background": "transparent",
+    },
+
+    // Firefox track (restored via Firefox-only feature query)
+    // @supports (-moz-appearance: none) is ignored by all WebKit/Blink browsers
+    "@supports (-moz-appearance: none)": {
+      [scope("progress")]: {
+        "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      },
+      [scope("meter")]: {
+        "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      },
+    },
+
+    // Re-establish height context for WebKit shadow DOM
+    // appearance:none breaks Chrome's flex layout; inner elements can't resolve height:100%
+    // without a concrete parent height set here.
+    // display:flex + align-items:stretch forces the child bar to fill the full height
+    // without top-anchoring it the way display:block would.
+    [scope("meter::-webkit-meter-inner-element")]: {
+      "display": "flex",
+      "align-items": "stretch",
+      "height": "1em",
+    },
+
+    // WebKit inner track
+    [scope("meter::-webkit-meter-bar")]: {
+      "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      "height": "100%",
+    },
+
+    // 1. Optimum (Success)
+    [scope("meter::-webkit-meter-optimum-value")]: {
+      "background": "var(--clampography-success)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // 2. Sub-optimum (Warning)
+    [scope("meter::-webkit-meter-suboptimum-value")]: {
+      "background": "var(--clampography-warning)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-sub-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-warning)",
+    },
+
+    // 3. Even less good (Error)
+    [scope("meter::-webkit-meter-even-less-good-value")]: {
+      "background": "var(--clampography-error)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-sub-sub-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-error)",
+    },
+
   };
 };

package/src/kbd.js

@@ -44,7 +44,7 @@ export default (options = {}) => {
     [scope("kbd")]: {
       "display": "inline-block",
       "padding": "0.1em 0.45em",
-      "min-width": "1.6em",
+      "min-width": "2em",
       "text-align": "center",
       "font-size": "0.8em",
       "font-weight": "700",