@vielzeug/refine 26.10.0 → 26.10.1

package/dist/styles/mixins/animation.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation.css.js","names":[],"sources":["../../../src/styles/mixins/animation.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Register the --rainbow-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by rainbowEffectMixin on first use.\n */\nlet rainbowRegistered = false;\n\nexport function registerRainbowProperty() {\n  if (rainbowRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--rainbow-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered — safe to ignore\n    }\n  }\n\n  rainbowRegistered = true;\n}\n\n/**\n * Register the --shine-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by shineEffectMixin on first use.\n */\nlet shineRegistered = false;\n\nexport function registerShineProperty() {\n  if (shineRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--shine-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered — safe to ignore\n    }\n  }\n\n  shineRegistered = true;\n}\n\n/**\n * Rainbow Border Effect Mixin\n *\n * Animated rainbow border with glow effect.\n * Perfect for highlighting call-to-action elements or special features.\n *\n * @param selector - CSS selector for the element carrying the border, matched\n *   against the component's actual shadow DOM markup — a bare word like\n *   'button' is a TYPE selector (matches a literal `<button>` tag), not a\n *   part/class selector. Use the selector that actually matches your root\n *   element, e.g. `'.box'` for a `<div class=\"box\">`, or `'[part=\"button\"]'`\n *   for a `<span part=\"button\">`/`<a part=\"button\">` (ore-button's actual\n *   markup — it never renders a `<button>` tag).\n * @returns CSSResult with rainbow border animation\n *\n * @example\n * ```ts\n * import { rainbowEffectMixin } from '../../styles/effects/rainbow.css';\n *\n * return {\n *   styles: [rainbowEffectMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const rainbowEffectMixin = (selector: string) => {\n  registerRainbowProperty();\n\n  return css`\n    /* ========================================\n       Rainbow Border Effect\n       ======================================== */\n\n    :host([effect='rainbow']) ${selector} {\n      position: relative;\n      border: var(--border-2) solid transparent !important;\n      overflow: visible;\n    }\n\n    /* Rainbow border and glow layers */\n    :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: inherit;\n      border-radius: inherit;\n\n      /* Reserve no-clip space for glow */\n      box-shadow: 0 0 calc(3 * var(--blur-xl)) rgba(0 0 0 / 0.001);\n\n      /* Rainbow gradient — Okabe-Ito colorblind-safe palette */\n      background: conic-gradient(\n          from var(--rainbow-angle),\n          #56b4e9,\n          /* Sky Blue       */ #0072b2,\n          /* Deep Blue      */ #009e73,\n          /* Bluish Green   */ #f0e442,\n          /* Yellow         */ #e69f00,\n          /* Orange         */ #d55e00,\n          /* Vermillion     */ #cc79a7,\n          /* Reddish Purple */ #56b4e9 /* Back to Sky Blue */\n        )\n        border-box;\n\n      /* Make everything inside padding-box transparent\n       by subtracting padding-box from no-clip box */\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      opacity: var(--rainbow-border-opacity, 0.7);\n      pointer-events: none;\n      animation: rainbow-rotate 4s linear infinite;\n    }\n\n    /* Turn one pseudo layer into glow halo */\n    :host([effect='rainbow']) ${selector}::after {\n      opacity: var(--rainbow-glow-opacity, 0.18);\n      filter: blur(var(--blur-xl));\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes rainbow-rotate {\n      to {\n        --rainbow-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n        animation: none;\n      }\n    }\n  `;\n};\n\n/**\n * Shine Border Effect Mixin\n *\n * Animated color-aware border shine. A tight arc of the component's own\n * theme color rotates around the border, producing the glossy \"shimmer\"\n * look seen in modern card and button designs.\n *\n * Respects the `color` attribute via `--_theme-*` tokens — no extra\n * configuration needed. Falls back to the neutral theme when no color\n * is set.\n *\n * @param selector - CSS selector for the inner element, matched against the\n *   component's actual shadow DOM markup — see rainbowEffectMixin's\n *   `selector` doc above for why a bare word like 'button' is usually wrong.\n * @returns CSSResult with shine border animation\n *\n * @example\n * ```ts\n * styles: [shineEffectMixin('[part=\"button\"]'), componentStyles]\n * ```\n */\nexport const shineEffectMixin = (selector: string) => {\n  registerShineProperty();\n\n  return css`\n    /* ========================================\n       Shine Border Effect\n       ======================================== */\n\n    :host([effect='shine']) ${selector} {\n      position: relative;\n      overflow: visible;\n      --_shine-color: light-dark(\n        oklch(from var(--_theme-focus) 0.6 calc(c * 1.2) h),\n        oklch(from var(--_theme-focus) 0.85 calc(c * 1.2) h)\n      );\n    }\n\n    /* Shine border — single pseudo, glow via box-shadow (follows border-radius, no artifacts) */\n    :host([effect='shine']) ${selector}::before {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: var(--border-2) solid transparent;\n      border-radius: calc(var(--_radius, 0px) + var(--border-2));\n\n      /* Two comet tails 180deg apart, same shape rotating together */\n      background:\n        conic-gradient(from var(--shine-angle), transparent 0%, transparent 75%, var(--_shine-color) 100%) border-box,\n        conic-gradient(\n            from calc(var(--shine-angle) + 180deg),\n            transparent 0%,\n            transparent 75%,\n            var(--_shine-color) 100%\n          )\n          border-box;\n\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      pointer-events: none;\n      animation: shine-rotate 2.5s linear infinite;\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes shine-rotate {\n      to {\n        --shine-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='shine']) ${selector}::before {\n        animation: none;\n      }\n    }\n  `;\n};\n"],"mappings":"oCAOA,IAAI,EAAoB,GAExB,SAAgB,yBAA0B,CACpC,MAEJ,IAAI,OAAO,IAAQ,KAAe,IAAI,iBACpC,GAAI,CACF,IAAI,iBAAiB,CACnB,SAAU,GACV,aAAc,OACd,KAAM,kBACN,OAAQ,SACV,CAAC,CACH,MAAQ,CAER,CAGF,EAAoB,EAHlB,CAIJ,CAOA,IAAI,EAAkB,GAEtB,SAAgB,uBAAwB,CAClC,MAEJ,IAAI,OAAO,IAAQ,KAAe,IAAI,iBACpC,GAAI,CACF,IAAI,iBAAiB,CACnB,SAAU,GACV,aAAc,OACd,KAAM,gBACN,OAAQ,SACV,CAAC,CACH,MAAQ,CAER,CAGF,EAAkB,EAHhB,CAIJ,CA2BA,IAAa,mBAAsB,IACjC,wBAAwB,EAEjB,CAAG;;;;;gCAKoB,EAAS;;;;;;;gCAOT,EAAS,sCAAsC,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuCxD,EAAS;;;;;;;;;;;;;;;;kCAgBP,EAAS,sCAAsC,EAAS;;;;KA4B7E,iBAAoB,IAC/B,sBAAsB,EAEf,CAAG;;;;;8BAKkB,EAAS;;;;;;;;;;8BAUT,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwCP,EAAS"}
+{"version":3,"file":"animation.css.js","names":[],"sources":["../../../src/styles/mixins/animation.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Register the --rainbow-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by rainbowEffectMixin on first use.\n */\nlet rainbowRegistered = false;\n\nexport function registerRainbowProperty() {\n  if (rainbowRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--rainbow-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered: safe to ignore\n    }\n  }\n\n  rainbowRegistered = true;\n}\n\n/**\n * Register the --shine-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by shineEffectMixin on first use.\n */\nlet shineRegistered = false;\n\nexport function registerShineProperty() {\n  if (shineRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--shine-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered: safe to ignore\n    }\n  }\n\n  shineRegistered = true;\n}\n\n/**\n * Rainbow Border Effect Mixin\n *\n * Animated rainbow border with glow effect.\n * Perfect for highlighting call-to-action elements or special features.\n *\n * @param selector - CSS selector for the element carrying the border, matched\n *   against the component's actual shadow DOM markup: a bare word like\n *   'button' is a TYPE selector (matches a literal `<button>` tag), not a\n *   part/class selector. Use the selector that actually matches your root\n *   element, e.g. `'.box'` for a `<div class=\"box\">`, or `'[part=\"button\"]'`\n *   for a `<span part=\"button\">`/`<a part=\"button\">` (ore-button's actual\n *   markup: it never renders a `<button>` tag).\n * @returns CSSResult with rainbow border animation\n *\n * @example\n * ```ts\n * import { rainbowEffectMixin } from '../../styles/effects/rainbow.css';\n *\n * return {\n *   styles: [rainbowEffectMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const rainbowEffectMixin = (selector: string) => {\n  registerRainbowProperty();\n\n  return css`\n    /* ========================================\n       Rainbow Border Effect\n       ======================================== */\n\n    :host([effect='rainbow']) ${selector} {\n      position: relative;\n      border: var(--border-2) solid transparent !important;\n      overflow: visible;\n    }\n\n    /* Rainbow border and glow layers */\n    :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: inherit;\n      border-radius: inherit;\n\n      /* Reserve no-clip space for glow */\n      box-shadow: 0 0 calc(3 * var(--blur-xl)) rgba(0 0 0 / 0.001);\n\n      /* Rainbow gradient: Okabe-Ito colorblind-safe palette */\n      background: conic-gradient(\n          from var(--rainbow-angle),\n          #56b4e9,\n          /* Sky Blue       */ #0072b2,\n          /* Deep Blue      */ #009e73,\n          /* Bluish Green   */ #f0e442,\n          /* Yellow         */ #e69f00,\n          /* Orange         */ #d55e00,\n          /* Vermillion     */ #cc79a7,\n          /* Reddish Purple */ #56b4e9 /* Back to Sky Blue */\n        )\n        border-box;\n\n      /* Make everything inside padding-box transparent\n       by subtracting padding-box from no-clip box */\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      opacity: var(--rainbow-border-opacity, 0.7);\n      pointer-events: none;\n      animation: rainbow-rotate 4s linear infinite;\n    }\n\n    /* Turn one pseudo layer into glow halo */\n    :host([effect='rainbow']) ${selector}::after {\n      opacity: var(--rainbow-glow-opacity, 0.18);\n      filter: blur(var(--blur-xl));\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes rainbow-rotate {\n      to {\n        --rainbow-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n        animation: none;\n      }\n    }\n  `;\n};\n\n/**\n * Shine Border Effect Mixin\n *\n * Animated color-aware border shine. A tight arc of the component's own\n * theme color rotates around the border, producing the glossy \"shimmer\"\n * look seen in modern card and button designs.\n *\n * Respects the `color` attribute via `--_theme-*` tokens: no extra\n * configuration needed. Falls back to the neutral theme when no color\n * is set.\n *\n * @param selector - CSS selector for the inner element, matched against the\n *   component's actual shadow DOM markup: see rainbowEffectMixin's\n *   `selector` doc above for why a bare word like 'button' is usually wrong.\n * @returns CSSResult with shine border animation\n *\n * @example\n * ```ts\n * styles: [shineEffectMixin('[part=\"button\"]'), componentStyles]\n * ```\n */\nexport const shineEffectMixin = (selector: string) => {\n  registerShineProperty();\n\n  return css`\n    /* ========================================\n       Shine Border Effect\n       ======================================== */\n\n    :host([effect='shine']) ${selector} {\n      position: relative;\n      overflow: visible;\n      --_shine-color: light-dark(\n        oklch(from var(--_theme-focus) 0.6 calc(c * 1.2) h),\n        oklch(from var(--_theme-focus) 0.85 calc(c * 1.2) h)\n      );\n    }\n\n    /* Shine border: single pseudo, glow via box-shadow (follows border-radius, no artifacts) */\n    :host([effect='shine']) ${selector}::before {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: var(--border-2) solid transparent;\n      border-radius: calc(var(--_radius, 0px) + var(--border-2));\n\n      /* Two comet tails 180deg apart, same shape rotating together */\n      background:\n        conic-gradient(from var(--shine-angle), transparent 0%, transparent 75%, var(--_shine-color) 100%) border-box,\n        conic-gradient(\n            from calc(var(--shine-angle) + 180deg),\n            transparent 0%,\n            transparent 75%,\n            var(--_shine-color) 100%\n          )\n          border-box;\n\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      pointer-events: none;\n      animation: shine-rotate 2.5s linear infinite;\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes shine-rotate {\n      to {\n        --shine-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='shine']) ${selector}::before {\n        animation: none;\n      }\n    }\n  `;\n};\n"],"mappings":"oCAOA,IAAI,EAAoB,GAExB,SAAgB,yBAA0B,CACpC,MAEJ,IAAI,OAAO,IAAQ,KAAe,IAAI,iBACpC,GAAI,CACF,IAAI,iBAAiB,CACnB,SAAU,GACV,aAAc,OACd,KAAM,kBACN,OAAQ,SACV,CAAC,CACH,MAAQ,CAER,CAGF,EAAoB,EAHlB,CAIJ,CAOA,IAAI,EAAkB,GAEtB,SAAgB,uBAAwB,CAClC,MAEJ,IAAI,OAAO,IAAQ,KAAe,IAAI,iBACpC,GAAI,CACF,IAAI,iBAAiB,CACnB,SAAU,GACV,aAAc,OACd,KAAM,gBACN,OAAQ,SACV,CAAC,CACH,MAAQ,CAER,CAGF,EAAkB,EAHhB,CAIJ,CA2BA,IAAa,mBAAsB,IACjC,wBAAwB,EAEjB,CAAG;;;;;gCAKoB,EAAS;;;;;;;gCAOT,EAAS,sCAAsC,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuCxD,EAAS;;;;;;;;;;;;;;;;kCAgBP,EAAS,sCAAsC,EAAS;;;;KA4B7E,iBAAoB,IAC/B,sBAAsB,EAEf,CAAG;;;;;8BAKkB,EAAS;;;;;;;;;;8BAUT,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwCP,EAAS"}

package/dist/styles/mixins/field-variants.css.cjs

@@ -54,9 +54,9 @@ let e=require("@vielzeug/ore");var fieldVariantMixin=({accentVar:t=`--_theme-foc
       color: var(--${i}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));
     }
 
-    /* Outline — border always visible, so unlike the other variants it can't lean on a
+    /* Outline: border always visible, so unlike the other variants it can't lean on a
        per-component \`:host{}\` base fallback for \`--_border-color\` that may or may not exist
-       (\`ore-message-composer\` has none — every other rule here sets both custom properties, so
+       (\`ore-message-composer\` has none: every other rule here sets both custom properties, so
        its base layer omits a default on the assumption that always holds). Set explicitly. */
     :host([variant='outline']) {
       --_bg: var(--${i}-bg, transparent);

package/dist/styles/mixins/field-variants.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field-variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/field-variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\nexport type FieldVariantMixinOptions = {\n  /**\n   * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to\n   * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct\n   * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-\n   * border`, which isn't theme-color-driven the same way).\n   */\n  accentVar?: string;\n  /** Selector for the element that gets the variant's background/border/shadow — the visual \"box\". */\n  container: string;\n  /**\n   * Selector for the text-bearing element the `bordered` variant tints to the theme color.\n   * Defaults to `container` for components where the box and the text-bearing element are the\n   * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're\n   * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).\n   */\n  text?: string;\n  /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */\n  tokenPrefix: string;\n};\n\n/**\n * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry\n * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) —\n * previously hand-duplicated across them, mostly identically but not quite: this version also\n * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only\n * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint\n * (`ore-input`/`ore-otp-input` were missing pieces of it) — clearly-unintentional per-component\n * gaps, not deliberate differences, so this mixin converges on the more complete behavior for\n * every consumer rather than picking one component's version arbitrarily.\n *\n * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` —\n * every current consumer already covers that with its own single `:host(:not([disabled],\n * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a\n * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its\n * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every\n * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not\n * `--_theme-shadow`) uniformly across all variants in its base layer — this mixin adding a\n * second, generic one would fight it depending on layer/rule order.\n *\n * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`\n * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`\n * variant) in its own stylesheet — this mixin only covers the five variants every consumer has\n * in common.\n *\n * @example\n * ```ts\n * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)\n * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]\n *\n * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n *   componentStyles,\n * ]\n *\n * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n *   componentStyles,\n * ]\n * ```\n */\nexport const fieldVariantMixin = ({\n  accentVar = '--_theme-focus',\n  container,\n  text = container,\n  tokenPrefix,\n}: FieldVariantMixinOptions) => css`\n  @layer refine.variants {\n    /* Solid (default) */\n    :host(:not([variant])),\n    :host([variant='solid']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-50));\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host(:not([variant])) ${container}, :host([variant='solid']) ${container} {\n      box-shadow: var(--shadow-2xs);\n    }\n\n    /* Flat */\n    :host([variant='flat']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-100));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 20%, transparent));\n    }\n\n    :host([variant='flat']) ${container} {\n      box-shadow: var(--inset-shadow-2xs);\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n      border-color: var(\n        --${tokenPrefix}-hover-border-color,\n        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n      );\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:focus-within {\n      background: var(--${tokenPrefix}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n      border-color: var(--${tokenPrefix}-focus-border-color, color-mix(in oklch, var(${accentVar}) 60%, transparent));\n      box-shadow: var(--_theme-shadow);\n    }\n\n    /* Bordered */\n    :host([variant='bordered']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--_theme-backdrop));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 70%, transparent));\n    }\n\n    :host([variant='bordered']:not([disabled])) ${container}:hover {\n      border-color: var(--${tokenPrefix}-hover-border-color, var(${accentVar}));\n    }\n\n    :host([variant='bordered']) ${text} {\n      color: var(--_theme-base);\n      caret-color: var(--_theme-base);\n    }\n\n    :host([variant='bordered']) ${text}::placeholder {\n      color: var(--${tokenPrefix}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n    }\n\n    /* Outline — border always visible, so unlike the other variants it can't lean on a\n       per-component \\`:host{}\\` base fallback for \\`--_border-color\\` that may or may not exist\n       (\\`ore-message-composer\\` has none — every other rule here sets both custom properties, so\n       its base layer omits a default on the assumption that always holds). Set explicitly. */\n    :host([variant='outline']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='outline']) ${container} {\n      box-shadow: none;\n    }\n\n    /* Ghost */\n    :host([variant='ghost']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, transparent);\n    }\n\n    :host([variant='ghost']) ${container} {\n      box-shadow: none;\n    }\n\n    :host([variant='ghost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n\n    /* frost */\n    :host([variant='frost']) {\n      --_bg: var(--color-canvas);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='frost']) ${container} {\n      box-shadow: none;\n      backdrop-filter: blur(var(--blur-md));\n    }\n\n    :host([variant='frost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n  }\n`;\n"],"mappings":"+BAmEA,IAAa,mBAAqB,CAChC,YAAY,iBACZ,YACA,OAAO,EACP,iBAC8B,EAAA,GAAG;;;;;qBAKd,EAAY;+BACF,EAAY;;;6BAGd,EAAU,6BAA6B,EAAU;;;;;;qBAMzD,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;8BAGhE,EAAU;;;;8CAIM,EAAU;0BAC9B,EAAY;;YAE1B,EAAY;;;;;8CAKsB,EAAU;0BAC9B,EAAY;4BACV,EAAY,+CAA+C,EAAU;;;;;;qBAM5E,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;kDAG5C,EAAU;4BAChC,EAAY,2BAA2B,EAAU;;;kCAG3C,EAAK;;;;;kCAKL,EAAK;qBAClB,EAAY;;;;;;;;qBAQZ,EAAY;+BACF,EAAY;;;iCAGV,EAAU;;;;;;qBAMtB,EAAY;+BACF,EAAY;;;+BAGZ,EAAU;;;;+CAIM,EAAU;0BAC/B,EAAY;;;;;;+BAMP,EAAY;;;+BAGZ,EAAU;;;;;+CAKM,EAAU;0BAC/B,EAAY"}
+{"version":3,"file":"field-variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/field-variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\nexport type FieldVariantMixinOptions = {\n  /**\n   * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to\n   * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct\n   * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-\n   * border`, which isn't theme-color-driven the same way).\n   */\n  accentVar?: string;\n  /** Selector for the element that gets the variant's background/border/shadow: the visual \"box\". */\n  container: string;\n  /**\n   * Selector for the text-bearing element the `bordered` variant tints to the theme color.\n   * Defaults to `container` for components where the box and the text-bearing element are the\n   * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're\n   * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).\n   */\n  text?: string;\n  /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */\n  tokenPrefix: string;\n};\n\n/**\n * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry\n * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) :\n * previously hand-duplicated across them, mostly identically but not quite: this version also\n * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only\n * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint\n * (`ore-input`/`ore-otp-input` were missing pieces of it): clearly-unintentional per-component\n * gaps, not deliberate differences, so this mixin converges on the more complete behavior for\n * every consumer rather than picking one component's version arbitrarily.\n *\n * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` :\n * every current consumer already covers that with its own single `:host(:not([disabled],\n * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a\n * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its\n * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every\n * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not\n * `--_theme-shadow`) uniformly across all variants in its base layer: this mixin adding a\n * second, generic one would fight it depending on layer/rule order.\n *\n * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`\n * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`\n * variant) in its own stylesheet: this mixin only covers the five variants every consumer has\n * in common.\n *\n * @example\n * ```ts\n * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)\n * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]\n *\n * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n *   componentStyles,\n * ]\n *\n * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n *   componentStyles,\n * ]\n * ```\n */\nexport const fieldVariantMixin = ({\n  accentVar = '--_theme-focus',\n  container,\n  text = container,\n  tokenPrefix,\n}: FieldVariantMixinOptions) => css`\n  @layer refine.variants {\n    /* Solid (default) */\n    :host(:not([variant])),\n    :host([variant='solid']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-50));\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host(:not([variant])) ${container}, :host([variant='solid']) ${container} {\n      box-shadow: var(--shadow-2xs);\n    }\n\n    /* Flat */\n    :host([variant='flat']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-100));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 20%, transparent));\n    }\n\n    :host([variant='flat']) ${container} {\n      box-shadow: var(--inset-shadow-2xs);\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n      border-color: var(\n        --${tokenPrefix}-hover-border-color,\n        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n      );\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:focus-within {\n      background: var(--${tokenPrefix}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n      border-color: var(--${tokenPrefix}-focus-border-color, color-mix(in oklch, var(${accentVar}) 60%, transparent));\n      box-shadow: var(--_theme-shadow);\n    }\n\n    /* Bordered */\n    :host([variant='bordered']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--_theme-backdrop));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 70%, transparent));\n    }\n\n    :host([variant='bordered']:not([disabled])) ${container}:hover {\n      border-color: var(--${tokenPrefix}-hover-border-color, var(${accentVar}));\n    }\n\n    :host([variant='bordered']) ${text} {\n      color: var(--_theme-base);\n      caret-color: var(--_theme-base);\n    }\n\n    :host([variant='bordered']) ${text}::placeholder {\n      color: var(--${tokenPrefix}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n    }\n\n    /* Outline: border always visible, so unlike the other variants it can't lean on a\n       per-component \\`:host{}\\` base fallback for \\`--_border-color\\` that may or may not exist\n       (\\`ore-message-composer\\` has none: every other rule here sets both custom properties, so\n       its base layer omits a default on the assumption that always holds). Set explicitly. */\n    :host([variant='outline']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='outline']) ${container} {\n      box-shadow: none;\n    }\n\n    /* Ghost */\n    :host([variant='ghost']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, transparent);\n    }\n\n    :host([variant='ghost']) ${container} {\n      box-shadow: none;\n    }\n\n    :host([variant='ghost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n\n    /* frost */\n    :host([variant='frost']) {\n      --_bg: var(--color-canvas);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='frost']) ${container} {\n      box-shadow: none;\n      backdrop-filter: blur(var(--blur-md));\n    }\n\n    :host([variant='frost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n  }\n`;\n"],"mappings":"+BAmEA,IAAa,mBAAqB,CAChC,YAAY,iBACZ,YACA,OAAO,EACP,iBAC8B,EAAA,GAAG;;;;;qBAKd,EAAY;+BACF,EAAY;;;6BAGd,EAAU,6BAA6B,EAAU;;;;;;qBAMzD,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;8BAGhE,EAAU;;;;8CAIM,EAAU;0BAC9B,EAAY;;YAE1B,EAAY;;;;;8CAKsB,EAAU;0BAC9B,EAAY;4BACV,EAAY,+CAA+C,EAAU;;;;;;qBAM5E,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;kDAG5C,EAAU;4BAChC,EAAY,2BAA2B,EAAU;;;kCAG3C,EAAK;;;;;kCAKL,EAAK;qBAClB,EAAY;;;;;;;;qBAQZ,EAAY;+BACF,EAAY;;;iCAGV,EAAU;;;;;;qBAMtB,EAAY;+BACF,EAAY;;;+BAGZ,EAAU;;;;+CAIM,EAAU;0BAC/B,EAAY;;;;;;+BAMP,EAAY;;;+BAGZ,EAAU;;;;;+CAKM,EAAU;0BAC/B,EAAY"}

package/dist/styles/mixins/field-variants.css.d.ts

@@ -6,7 +6,7 @@ export type FieldVariantMixinOptions = {
      * border`, which isn't theme-color-driven the same way).
      */
     accentVar?: string;
-    /** Selector for the element that gets the variant's background/border/shadow — the visual "box". */
+    /** Selector for the element that gets the variant's background/border/shadow: the visual "box". */
     container: string;
     /**
      * Selector for the text-bearing element the `bordered` variant tints to the theme color.
@@ -20,26 +20,26 @@ export type FieldVariantMixinOptions = {
 };
 /**
  * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry
- * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) —
+ * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) :
  * previously hand-duplicated across them, mostly identically but not quite: this version also
  * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only
  * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint
- * (`ore-input`/`ore-otp-input` were missing pieces of it) — clearly-unintentional per-component
+ * (`ore-input`/`ore-otp-input` were missing pieces of it): clearly-unintentional per-component
  * gaps, not deliberate differences, so this mixin converges on the more complete behavior for
  * every consumer rather than picking one component's version arbitrarily.
  *
- * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` —
+ * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` :
  * every current consumer already covers that with its own single `:host(:not([disabled],
  * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a
  * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its
  * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every
  * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not
- * `--_theme-shadow`) uniformly across all variants in its base layer — this mixin adding a
+ * `--_theme-shadow`) uniformly across all variants in its base layer: this mixin adding a
  * second, generic one would fight it depending on layer/rule order.
  *
  * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`
  * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`
- * variant) in its own stylesheet — this mixin only covers the five variants every consumer has
+ * variant) in its own stylesheet: this mixin only covers the five variants every consumer has
  * in common.
  *
  * @example

package/dist/styles/mixins/field-variants.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-variants.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/field-variants.css.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oGAAoG;IACpG,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,sCAkG1B,CAAC"}
+{"version":3,"file":"field-variants.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/field-variants.css.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,sCAkG1B,CAAC"}

package/dist/styles/mixins/field-variants.css.js

@@ -54,9 +54,9 @@ import{css as e}from"@vielzeug/ore";var fieldVariantMixin=({accentVar:t=`--_them
       color: var(--${i}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));
     }
 
-    /* Outline — border always visible, so unlike the other variants it can't lean on a
+    /* Outline: border always visible, so unlike the other variants it can't lean on a
        per-component \`:host{}\` base fallback for \`--_border-color\` that may or may not exist
-       (\`ore-message-composer\` has none — every other rule here sets both custom properties, so
+       (\`ore-message-composer\` has none: every other rule here sets both custom properties, so
        its base layer omits a default on the assumption that always holds). Set explicitly. */
     :host([variant='outline']) {
       --_bg: var(--${i}-bg, transparent);

package/dist/styles/mixins/field-variants.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-variants.css.js","names":[],"sources":["../../../src/styles/mixins/field-variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\nexport type FieldVariantMixinOptions = {\n  /**\n   * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to\n   * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct\n   * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-\n   * border`, which isn't theme-color-driven the same way).\n   */\n  accentVar?: string;\n  /** Selector for the element that gets the variant's background/border/shadow — the visual \"box\". */\n  container: string;\n  /**\n   * Selector for the text-bearing element the `bordered` variant tints to the theme color.\n   * Defaults to `container` for components where the box and the text-bearing element are the\n   * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're\n   * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).\n   */\n  text?: string;\n  /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */\n  tokenPrefix: string;\n};\n\n/**\n * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry\n * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) —\n * previously hand-duplicated across them, mostly identically but not quite: this version also\n * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only\n * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint\n * (`ore-input`/`ore-otp-input` were missing pieces of it) — clearly-unintentional per-component\n * gaps, not deliberate differences, so this mixin converges on the more complete behavior for\n * every consumer rather than picking one component's version arbitrarily.\n *\n * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` —\n * every current consumer already covers that with its own single `:host(:not([disabled],\n * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a\n * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its\n * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every\n * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not\n * `--_theme-shadow`) uniformly across all variants in its base layer — this mixin adding a\n * second, generic one would fight it depending on layer/rule order.\n *\n * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`\n * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`\n * variant) in its own stylesheet — this mixin only covers the five variants every consumer has\n * in common.\n *\n * @example\n * ```ts\n * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)\n * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]\n *\n * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n *   componentStyles,\n * ]\n *\n * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n *   componentStyles,\n * ]\n * ```\n */\nexport const fieldVariantMixin = ({\n  accentVar = '--_theme-focus',\n  container,\n  text = container,\n  tokenPrefix,\n}: FieldVariantMixinOptions) => css`\n  @layer refine.variants {\n    /* Solid (default) */\n    :host(:not([variant])),\n    :host([variant='solid']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-50));\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host(:not([variant])) ${container}, :host([variant='solid']) ${container} {\n      box-shadow: var(--shadow-2xs);\n    }\n\n    /* Flat */\n    :host([variant='flat']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-100));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 20%, transparent));\n    }\n\n    :host([variant='flat']) ${container} {\n      box-shadow: var(--inset-shadow-2xs);\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n      border-color: var(\n        --${tokenPrefix}-hover-border-color,\n        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n      );\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:focus-within {\n      background: var(--${tokenPrefix}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n      border-color: var(--${tokenPrefix}-focus-border-color, color-mix(in oklch, var(${accentVar}) 60%, transparent));\n      box-shadow: var(--_theme-shadow);\n    }\n\n    /* Bordered */\n    :host([variant='bordered']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--_theme-backdrop));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 70%, transparent));\n    }\n\n    :host([variant='bordered']:not([disabled])) ${container}:hover {\n      border-color: var(--${tokenPrefix}-hover-border-color, var(${accentVar}));\n    }\n\n    :host([variant='bordered']) ${text} {\n      color: var(--_theme-base);\n      caret-color: var(--_theme-base);\n    }\n\n    :host([variant='bordered']) ${text}::placeholder {\n      color: var(--${tokenPrefix}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n    }\n\n    /* Outline — border always visible, so unlike the other variants it can't lean on a\n       per-component \\`:host{}\\` base fallback for \\`--_border-color\\` that may or may not exist\n       (\\`ore-message-composer\\` has none — every other rule here sets both custom properties, so\n       its base layer omits a default on the assumption that always holds). Set explicitly. */\n    :host([variant='outline']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='outline']) ${container} {\n      box-shadow: none;\n    }\n\n    /* Ghost */\n    :host([variant='ghost']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, transparent);\n    }\n\n    :host([variant='ghost']) ${container} {\n      box-shadow: none;\n    }\n\n    :host([variant='ghost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n\n    /* frost */\n    :host([variant='frost']) {\n      --_bg: var(--color-canvas);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='frost']) ${container} {\n      box-shadow: none;\n      backdrop-filter: blur(var(--blur-md));\n    }\n\n    :host([variant='frost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n  }\n`;\n"],"mappings":"oCAmEA,IAAa,mBAAqB,CAChC,YAAY,iBACZ,YACA,OAAO,EACP,iBAC8B,CAAG;;;;;qBAKd,EAAY;+BACF,EAAY;;;6BAGd,EAAU,6BAA6B,EAAU;;;;;;qBAMzD,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;8BAGhE,EAAU;;;;8CAIM,EAAU;0BAC9B,EAAY;;YAE1B,EAAY;;;;;8CAKsB,EAAU;0BAC9B,EAAY;4BACV,EAAY,+CAA+C,EAAU;;;;;;qBAM5E,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;kDAG5C,EAAU;4BAChC,EAAY,2BAA2B,EAAU;;;kCAG3C,EAAK;;;;;kCAKL,EAAK;qBAClB,EAAY;;;;;;;;qBAQZ,EAAY;+BACF,EAAY;;;iCAGV,EAAU;;;;;;qBAMtB,EAAY;+BACF,EAAY;;;+BAGZ,EAAU;;;;+CAIM,EAAU;0BAC/B,EAAY;;;;;;+BAMP,EAAY;;;+BAGZ,EAAU;;;;;+CAKM,EAAU;0BAC/B,EAAY"}
+{"version":3,"file":"field-variants.css.js","names":[],"sources":["../../../src/styles/mixins/field-variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\nexport type FieldVariantMixinOptions = {\n  /**\n   * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to\n   * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct\n   * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-\n   * border`, which isn't theme-color-driven the same way).\n   */\n  accentVar?: string;\n  /** Selector for the element that gets the variant's background/border/shadow: the visual \"box\". */\n  container: string;\n  /**\n   * Selector for the text-bearing element the `bordered` variant tints to the theme color.\n   * Defaults to `container` for components where the box and the text-bearing element are the\n   * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're\n   * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).\n   */\n  text?: string;\n  /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */\n  tokenPrefix: string;\n};\n\n/**\n * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry\n * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) :\n * previously hand-duplicated across them, mostly identically but not quite: this version also\n * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only\n * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint\n * (`ore-input`/`ore-otp-input` were missing pieces of it): clearly-unintentional per-component\n * gaps, not deliberate differences, so this mixin converges on the more complete behavior for\n * every consumer rather than picking one component's version arbitrarily.\n *\n * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` :\n * every current consumer already covers that with its own single `:host(:not([disabled],\n * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a\n * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its\n * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every\n * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not\n * `--_theme-shadow`) uniformly across all variants in its base layer: this mixin adding a\n * second, generic one would fight it depending on layer/rule order.\n *\n * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`\n * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`\n * variant) in its own stylesheet: this mixin only covers the five variants every consumer has\n * in common.\n *\n * @example\n * ```ts\n * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)\n * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]\n *\n * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n *   componentStyles,\n * ]\n *\n * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n *   componentStyles,\n * ]\n * ```\n */\nexport const fieldVariantMixin = ({\n  accentVar = '--_theme-focus',\n  container,\n  text = container,\n  tokenPrefix,\n}: FieldVariantMixinOptions) => css`\n  @layer refine.variants {\n    /* Solid (default) */\n    :host(:not([variant])),\n    :host([variant='solid']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-50));\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host(:not([variant])) ${container}, :host([variant='solid']) ${container} {\n      box-shadow: var(--shadow-2xs);\n    }\n\n    /* Flat */\n    :host([variant='flat']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-100));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 20%, transparent));\n    }\n\n    :host([variant='flat']) ${container} {\n      box-shadow: var(--inset-shadow-2xs);\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n      border-color: var(\n        --${tokenPrefix}-hover-border-color,\n        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n      );\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:focus-within {\n      background: var(--${tokenPrefix}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n      border-color: var(--${tokenPrefix}-focus-border-color, color-mix(in oklch, var(${accentVar}) 60%, transparent));\n      box-shadow: var(--_theme-shadow);\n    }\n\n    /* Bordered */\n    :host([variant='bordered']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--_theme-backdrop));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 70%, transparent));\n    }\n\n    :host([variant='bordered']:not([disabled])) ${container}:hover {\n      border-color: var(--${tokenPrefix}-hover-border-color, var(${accentVar}));\n    }\n\n    :host([variant='bordered']) ${text} {\n      color: var(--_theme-base);\n      caret-color: var(--_theme-base);\n    }\n\n    :host([variant='bordered']) ${text}::placeholder {\n      color: var(--${tokenPrefix}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n    }\n\n    /* Outline: border always visible, so unlike the other variants it can't lean on a\n       per-component \\`:host{}\\` base fallback for \\`--_border-color\\` that may or may not exist\n       (\\`ore-message-composer\\` has none: every other rule here sets both custom properties, so\n       its base layer omits a default on the assumption that always holds). Set explicitly. */\n    :host([variant='outline']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='outline']) ${container} {\n      box-shadow: none;\n    }\n\n    /* Ghost */\n    :host([variant='ghost']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, transparent);\n    }\n\n    :host([variant='ghost']) ${container} {\n      box-shadow: none;\n    }\n\n    :host([variant='ghost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n\n    /* frost */\n    :host([variant='frost']) {\n      --_bg: var(--color-canvas);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='frost']) ${container} {\n      box-shadow: none;\n      backdrop-filter: blur(var(--blur-md));\n    }\n\n    :host([variant='frost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n  }\n`;\n"],"mappings":"oCAmEA,IAAa,mBAAqB,CAChC,YAAY,iBACZ,YACA,OAAO,EACP,iBAC8B,CAAG;;;;;qBAKd,EAAY;+BACF,EAAY;;;6BAGd,EAAU,6BAA6B,EAAU;;;;;;qBAMzD,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;8BAGhE,EAAU;;;;8CAIM,EAAU;0BAC9B,EAAY;;YAE1B,EAAY;;;;;8CAKsB,EAAU;0BAC9B,EAAY;4BACV,EAAY,+CAA+C,EAAU;;;;;;qBAM5E,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;kDAG5C,EAAU;4BAChC,EAAY,2BAA2B,EAAU;;;kCAG3C,EAAK;;;;;kCAKL,EAAK;qBAClB,EAAY;;;;;;;;qBAQZ,EAAY;+BACF,EAAY;;;iCAGV,EAAU;;;;;;qBAMtB,EAAY;+BACF,EAAY;;;+BAGZ,EAAU;;;;+CAIM,EAAU;0BAC/B,EAAY;;;;;;+BAMP,EAAY;;;+BAGZ,EAAU;;;;;+CAKM,EAAU;0BAC/B,EAAY"}

package/dist/styles/mixins/shape.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"shape.css.cjs","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"+BAoBA,IAAa,EAAe,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,cAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,iBAAoB,GAAmE,CAClG,IAAM,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAED,MAAO,GAAA,GAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;GAGX"}
+{"version":3,"file":"shape.css.cjs","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size: maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements: maps to --_gap */\n  gap?: string;\n  /** Element height: maps to --_height */\n  height?: string;\n  /** Icon size: maps to --_icon-size */\n  iconSize?: string;\n  /** Line height: maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding: maps to --_padding */\n  padding?: string;\n  /** Element size (width/height): maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb): maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width: maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"+BAoBA,IAAa,EAAe,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,cAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,iBAAoB,GAAmE,CAClG,IAAM,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAED,MAAO,GAAA,GAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;GAGX"}

package/dist/styles/mixins/shape.css.d.ts

@@ -69,23 +69,23 @@ export declare const roundedVariantMixin: import("@vielzeug/ore").CSSResult;
 export type SizeConfig = {
     /** Arbitrary CSS custom properties (must start with --) */
     [key: `--${string}`]: string | undefined;
-    /** Font size — maps to --_font-size */
+    /** Font size: maps to --_font-size */
     fontSize?: string;
-    /** Gap between elements — maps to --_gap */
+    /** Gap between elements: maps to --_gap */
     gap?: string;
-    /** Element height — maps to --_height */
+    /** Element height: maps to --_height */
     height?: string;
-    /** Icon size — maps to --_icon-size */
+    /** Icon size: maps to --_icon-size */
     iconSize?: string;
-    /** Line height — maps to --_line-height */
+    /** Line height: maps to --_line-height */
     lineHeight?: string;
-    /** Internal padding — maps to --_padding */
+    /** Internal padding: maps to --_padding */
     padding?: string;
-    /** Element size (width/height) — maps to --_size */
+    /** Element size (width/height): maps to --_size */
     size?: string;
-    /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */
+    /** Thumb size (e.g. toggle/switch thumb): maps to --_thumb-size */
     thumbSize?: string;
-    /** Element width — maps to --_width */
+    /** Element width: maps to --_width */
     width?: string;
 };
 export declare const sizeVariantMixin: (config?: {

package/dist/styles/mixins/shape.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shape.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/shape.css.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,mBAAmB,mCA0B/B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,eAAO,MAAM,gBAAgB,GAAI,SAAS;IAAE,EAAE,CAAC,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,UAAU,CAAA;CAAE,sCAkC9F,CAAC"}
+{"version":3,"file":"shape.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/shape.css.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,mBAAmB,mCA0B/B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,eAAO,MAAM,gBAAgB,GAAI,SAAS;IAAE,EAAE,CAAC,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,UAAU,CAAA;CAAE,sCAkC9F,CAAC"}

package/dist/styles/mixins/shape.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape.css.js","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"oCAoBA,IAAa,EAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,cAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,iBAAoB,GAAmE,CAClG,IAAM,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAED,MAAO,EAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;GAGX"}
+{"version":3,"file":"shape.css.js","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size: maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements: maps to --_gap */\n  gap?: string;\n  /** Element height: maps to --_height */\n  height?: string;\n  /** Icon size: maps to --_icon-size */\n  iconSize?: string;\n  /** Line height: maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding: maps to --_padding */\n  padding?: string;\n  /** Element size (width/height): maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb): maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width: maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"oCAoBA,IAAa,EAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,cAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,iBAAoB,GAAmE,CAClG,IAAM,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,cAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAED,MAAO,EAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;GAGX"}

package/dist/styles/mixins/variants.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element, matched against the\n *   component's actual shadow DOM markup (e.g., '.card', '.field') — a bare\n *   word like 'button' is a TYPE selector for a literal `<button>` tag, not\n *   a part/class selector. Use `'[part=\"button\"]'` for components whose root\n *   is a `<span part=\"button\">`/`<a part=\"button\">` (e.g. ore-button, which\n *   never renders a `<button>` tag).\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":"+BA2BA,IAAa,kBAAqB,GAAqB,EAAA,GAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}
+{"version":3,"file":"variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element, matched against the\n *   component's actual shadow DOM markup (e.g., '.card', '.field'): a bare\n *   word like 'button' is a TYPE selector for a literal `<button>` tag, not\n *   a part/class selector. Use `'[part=\"button\"]'` for components whose root\n *   is a `<span part=\"button\">`/`<a part=\"button\">` (e.g. ore-button, which\n *   never renders a `<button>` tag).\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":"+BA2BA,IAAa,kBAAqB,GAAqB,EAAA,GAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}

package/dist/styles/mixins/variants.css.d.ts

@@ -6,7 +6,7 @@
  * theme-aware colors, halo shadows, and elevation support.
  *
  * @param selector - CSS selector for the element, matched against the
- *   component's actual shadow DOM markup (e.g., '.card', '.field') — a bare
+ *   component's actual shadow DOM markup (e.g., '.card', '.field'): a bare
  *   word like 'button' is a TYPE selector for a literal `<button>` tag, not
  *   a part/class selector. Use `'[part="button"]'` for components whose root
  *   is a `<span part="button">`/`<a part="button">` (e.g. ore-button, which

package/dist/styles/mixins/variants.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"variants.css.js","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element, matched against the\n *   component's actual shadow DOM markup (e.g., '.card', '.field') — a bare\n *   word like 'button' is a TYPE selector for a literal `<button>` tag, not\n *   a part/class selector. Use `'[part=\"button\"]'` for components whose root\n *   is a `<span part=\"button\">`/`<a part=\"button\">` (e.g. ore-button, which\n *   never renders a `<button>` tag).\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":"oCA2BA,IAAa,kBAAqB,GAAqB,CAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}
+{"version":3,"file":"variants.css.js","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element, matched against the\n *   component's actual shadow DOM markup (e.g., '.card', '.field'): a bare\n *   word like 'button' is a TYPE selector for a literal `<button>` tag, not\n *   a part/class selector. Use `'[part=\"button\"]'` for components whose root\n *   is a `<span part=\"button\">`/`<a part=\"button\">` (e.g. ore-button, which\n *   never renders a `<button>` tag).\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Explicit elevation replaces the default halo so each depth remains visually distinct. */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":"oCA2BA,IAAa,kBAAqB,GAAqB,CAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}

package/dist/styles/theme.css

@@ -115,7 +115,7 @@
 
     /* ========================================
        Z-Index Scale
-       A page only has one stacking context to reason about — every layer
+       A page only has one stacking context to reason about: every layer
        (sticky headers, dropdowns, overlays, modals, popovers, tooltips,
        toasts) needs one shared, monotonic scale, not ad-hoc literals
        scattered across components and page code alike.
@@ -179,14 +179,14 @@
        ======================================== */
     --shadow-none: 0 0 transparent;
 
-    /* light-dark() only accepts <color> arguments (spec: CSS Color 5) — these used
+    /* light-dark() only accepts <color> arguments (spec: CSS Color 5): these used
        to wrap the *entire* shadow (offset + blur + color), which is invalid CSS.
        Custom properties store any token soup, so the declaration itself never
        errored, but every consumer substituting it into an actual `box-shadow`
        got an unparseable value and silently computed to `none` in spec-compliant
-       browsers. Fixed by keeping offset/blur outside and wrapping only the color
-       — offset/blur are identical between light and dark here anyway, only the
-       alpha differs. */
+      browsers. Fixed by keeping offset/blur outside and wrapping only the color.
+      Offset and blur are identical between light and dark here; only the
+      alpha differs. */
     --shadow-2xs: 0 1px 2px light-dark(rgb(0 0 0 / 3%), rgb(0 0 0 / 20%));
     --shadow-xs: 0 2px 4px light-dark(rgb(0 0 0 / 3%), rgb(0 0 0 / 22%));
     --shadow-sm: 0 4px 10px -1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 28%));
@@ -196,7 +196,7 @@
     --shadow-xl: 0 32px 64px -16px light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 44%));
     --shadow-2xl: 0 48px 80px -20px light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 52%));
 
-    /* Inset Shadows — same light-dark()-color-only fix as above. */
+    /* Inset Shadows: same light-dark()-color-only fix as above. */
     --inset-shadow-none: inset 0 0 transparent;
     --inset-shadow-2xs: inset 0 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 4%));
     --inset-shadow-xs: inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 4%));
@@ -247,7 +247,7 @@
 
     /* Letter Spacing */
     --tracking-tighter: -0.05em;
-    --tracking-tight: -0.025em; /* -2.5% — headers, display text */
+    --tracking-tight: -0.025em; /* -2.5%: headers, display text */
     --tracking-header: var(--tracking-tighter);
     --tracking-normal: 0em; /* default body tracking */
     --tracking-wide: 0.05em; /* labels, badges, uppercase caps */
@@ -270,7 +270,7 @@
     --leading-9: 2.25rem; /* 36px */
     --leading-10: 2.5rem; /* 40px */
 
-    /* Component UI Font Sizes (7 steps — used inside components) */
+    /* Component UI Font Sizes (7 steps: used inside components) */
     --text-2xs: 0.625rem; /* 10px - micro labels, dot-only badges */
     --text-xs: 0.75rem; /* 12px - small labels only */
     --text-sm: 0.875rem; /* 14px - secondary text */
@@ -280,7 +280,7 @@
     --text-2xl: 1.5rem; /* 24px - major headings */
     --text-3xl: 1.875rem; /* 30px - display / circular progress label */
 
-    /* Document Heading Sizes (h1–h6 — use outside components, in page/doc context) */
+    /* Document Heading Sizes (h1–h6: use outside components, in page/doc context) */
     --heading-xs: 0.875rem;
     --heading-sm: 1rem;
     --heading-md: 1.5rem;
@@ -307,9 +307,9 @@
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* Fast start, soft landing — no overshoot */
-    --ease-move: cubic-bezier(0.25, 1, 0.5, 1); /* Spatial slides — drawers, panels, carousels */
-    --ease-overshoot: cubic-bezier(0.34, 1.1, 0.64, 1); /* Subtle spring overshoot — toasts, popups */
+    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* Fast start, soft landing: no overshoot */
+    --ease-move: cubic-bezier(0.25, 1, 0.5, 1); /* Spatial slides: drawers, panels, carousels */
+    --ease-overshoot: cubic-bezier(0.34, 1.1, 0.64, 1); /* Subtle spring overshoot: toasts, popups */
 
     /* Duration (respects prefers-reduced-motion) */
     --duration-75: 75ms;
@@ -331,23 +331,31 @@
     --transition-slow: 300ms var(--ease-in-out);
     --transition-slower: 500ms var(--ease-in-out);
     --transition-spring: 300ms var(--ease-spring);
-    --transition-exit: 300ms var(--ease-out); /* Exit animations — overlay dismiss, alert collapse */
-    --transition-loader: 600ms linear; /* Spinner — constant rotation */
+    --transition-exit: 300ms var(--ease-out); /* Exit animations: overlay dismiss, alert collapse */
+    --transition-loader: 600ms linear; /* Spinner: constant rotation */
 
-    /* Overlay entrance defaults — shared by @starting-style blocks */
+    /* Overlay entrance defaults: shared by @starting-style blocks */
     --overlay-enter-translate-y: -4px; /* dropdown slides down from */
     --overlay-enter-translate-y-up: 4px; /* bottom-anchored overlays slide up from */
     --overlay-enter-scale: 0.97; /* slight scale-in for menus / panels */
     --overlay-enter-scale-dialog: 0.96; /* slightly more pronounced for dialogs */
 
-    /* ── theme-tokens:generated:begin — run `pnpm run sync:theme`, do not hand-edit ── */
-    /* ── Contrast scale — Neutral OKLCH with a lifted, non-pure-black Dark Mode baseline ── */
+    /* Focus ring: the outline shorthand consumed by :focus-visible rules
+       across navbar, sidebar, list-item, drawer, and navigation-menu. Those
+       rules write `outline: var(--focus-ring)` (with their own
+       `outline-offset`), so this must be a full outline shorthand, not a
+       color. Matches the `var(--border-2) solid var(--color-primary)` ring
+       the button/card/tab focus styles already use. */
+    --focus-ring: var(--border-2) solid var(--color-primary);
+
+    /* ── theme-tokens:generated:begin: run `pnpm run sync:theme`, do not hand-edit ── */
+    /* ── Contrast scale: Neutral OKLCH with a lifted, non-pure-black Dark Mode baseline ── */
     --color-contrast-50: light-dark(oklch(99% 0.001 264deg), oklch(17% 0.001 250deg)); /* Canvas, page background */
     --color-contrast-100: light-dark(oklch(97% 0.001 264deg), oklch(21% 0.001 250deg)); /* Cards, elevated surfaces */
     --color-contrast-150: light-dark(
       oklch(95.5% 0.001 264deg),
       oklch(23.5% 0.001 250deg)
-    ); /* Midpoint — chip base, subtle fills */
+    ); /* Midpoint: chip base, subtle fills */
     --color-contrast-200: light-dark(oklch(94% 0.001 264deg), oklch(26% 0.001 250deg)); /* Nested cards, hover states */
     --color-contrast-300: light-dark(oklch(89% 0.002 264deg), oklch(32% 0.001 250deg)); /* Borders, dividers */
     --color-contrast-400: light-dark(
@@ -373,7 +381,7 @@
     --color-divider: color-mix(in oklch, var(--color-contrast-300) 85%, transparent);
     --color-contrast: color-mix(in oklch, var(--color-contrast-900) 85%, transparent);
 
-    /* ── Shade ramp — shared derivation recipe for every color family below ──── */
+    /* ── Shade ramp: shared derivation recipe for every color family below ──── */
     /* Every family only authors a `base` (+ content/contrast ink pair); every  */
     /* other sub-token is `oklch(from var(--color-x) ...)`, derived from that   */
     /* single base using the deltas below. Tune a family by editing its base;   */
@@ -399,7 +407,7 @@
     --shade-halo-glow: 15%;
     --shade-halo-glow-soft: 8%;
 
-    /* ── Halo shadows — branded glow per color family ───────────────────────── */
+    /* ── Halo shadows: branded glow per color family ───────────────────────── */
     --halo-shadow-neutral:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 15%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(0 0 0 / 20%)) inset,
@@ -436,7 +444,7 @@
       0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-error) var(--shade-halo-glow), transparent),
       0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-error) var(--shade-halo-glow-soft), transparent);
 
-    /* ── Neutral — True gray — neutral UI surfaces ── */
+    /* ── Neutral: True gray: neutral UI surfaces ── */
     --color-neutral: light-dark(oklch(52% 0 264deg), oklch(72% 0 250deg));
     --color-neutral-backdrop: light-dark(
       oklch(
@@ -473,7 +481,7 @@
       0 0 0 4px color-mix(in oklch, var(--color-neutral) var(--shade-focus-ring-strength), transparent),
       var(--shadow-sm);
 
-    /* ── Primary — Periwinkle violet — primary brand color ── */
+    /* ── Primary: Periwinkle violet: primary brand color ── */
     --color-primary-hue: 293deg;
 
     --color-primary: light-dark(oklch(56% 0.22 var(--color-primary-hue)), oklch(72% 0.148 var(--color-primary-hue)));
@@ -512,7 +520,7 @@
       0 0 0 4px color-mix(in oklch, var(--color-primary) var(--shade-focus-ring-strength), transparent),
       var(--shadow-sm);
 
-    /* ── Secondary — Ink/charcoal (light) · silver (dark) — auto-derived from --color-primary-hue ── */
+    /* ── Secondary: Ink/charcoal (light) · silver (dark): auto-derived from --color-primary-hue ── */
     --color-secondary: light-dark(
       color-mix(in oklch, oklch(20% 0 none) 86%, var(--color-primary)),
       color-mix(in oklch, oklch(83% 0 none) 86%, var(--color-primary))
@@ -552,7 +560,7 @@
       0 0 0 4px color-mix(in oklch, var(--color-secondary) var(--shade-focus-ring-strength), transparent),
       var(--shadow-sm);
 
-    /* ── Info — Blue (light mode) · cyan-blue (dark mode) — informational messages ── */
+    /* ── Info: Blue (light mode) · cyan-blue (dark mode): informational messages ── */
     --color-info: light-dark(oklch(54% 0.169 255deg), oklch(74% 0.133 230deg));
     --color-info-backdrop: light-dark(
       oklch(
@@ -588,7 +596,7 @@
     --color-info-focus-shadow:
       0 0 0 4px color-mix(in oklch, var(--color-info) var(--shade-focus-ring-strength), transparent), var(--shadow-sm);
 
-    /* ── Success — Green (light mode) · teal (dark mode) — positive outcomes & confirmations ── */
+    /* ── Success: Green (light mode) · teal (dark mode): positive outcomes & confirmations ── */
     --color-success: light-dark(oklch(53% 0.145 137deg), oklch(78% 0.14 160deg));
     --color-success-backdrop: light-dark(
       oklch(
@@ -625,7 +633,7 @@
       0 0 0 4px color-mix(in oklch, var(--color-success) var(--shade-focus-ring-strength), transparent),
       var(--shadow-sm);
 
-    /* ── Warning — Amber — cautionary states & alerts ── */
+    /* ── Warning: Amber: cautionary states & alerts ── */
     --color-warning: light-dark(oklch(54% 0.111 70deg), oklch(84% 0.113 70deg));
     --color-warning-backdrop: light-dark(
       oklch(
@@ -662,7 +670,7 @@
       0 0 0 4px color-mix(in oklch, var(--color-warning) var(--shade-focus-ring-strength), transparent),
       var(--shadow-sm);
 
-    /* ── Error — Vermilion — destructive actions & errors ── */
+    /* ── Error: Vermilion: destructive actions & errors ── */
     --color-error: light-dark(oklch(54% 0.2 29deg), oklch(66% 0.18 29deg));
     --color-error-backdrop: light-dark(
       oklch(
@@ -734,7 +742,7 @@
 
   /* overriding the OS preference. See docs/refine/theming.md "Toggle dark   */
 
-  /* mode" — any consumer, not just this repo's own docs site, can rely on   */
+  /* mode": any consumer, not just this repo's own docs site, can rely on   */
 
   /* this class toggle. */
   html.dark {