{"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`;\n"],"mappings":"+BAmEA,IAAa,GAAqB,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"}