@vielzeug/refine 1.5.4 → 1.7.0

package/dist/inputs/otp-input/otp-input.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.css.cjs","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-50));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-100));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 20%, transparent));\n  }\n\n  :host([variant='flat']) .cell {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --otp-cell-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .cell:focus {\n    background: var(--otp-cell-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--otp-cell-focus-border-color, color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_cell-bg: var(--otp-cell-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--otp-cell-hover-border-color, var(--_cell-focus-border));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n  }\n\n  :host([variant='outline']) .cell {\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n    --_cell-border-color: var(--otp-cell-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .cell {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"otp-input.css.cjs","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n\n    /* --_bg/--_border-color (not --_cell-*-prefixed, unlike the rest of this component's tokens)\n       — this is the shared name `fieldVariantMixin` reads/writes, matching `ore-input`/`ore-\n       textarea`/`ore-message-composer`. Public override is still `--otp-cell-bg`/`--otp-cell-\n       border-color` either way. */\n    --_border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_bg);\n    border: var(--_cell-border) solid var(--_border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  /* Ring box-shadow lives in `@layer refine.variants` below, not here — every variant's own\n     rest-state `box-shadow` (`fieldVariantMixin`'s solid/outline/ghost rules) is *also* in\n     `refine.variants`, and cascade layers decide the winner before specificity ever gets\n     consulted. A `refine.base` box-shadow here would always lose to those, focused or not. */\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously `@layer refine.variants`\n * here) now lives in `fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell',\n * tokenPrefix: 'otp-cell' })` in `otp-input.ts`'s `styles` array — shared with `ore-input`/\n * `ore-textarea`/`ore-message-composer` instead of hand-duplicated. `accentVar` overrides the\n * shared `--_theme-focus` accent with this component's own per-cell focus-color token, since\n * that (not the shared theme-focus token) is what `flat`/`bordered` mixed into their border\n * color here even before this shared version existed.\n */\n@layer refine.variants {\n  /* Focus glow — the same `--_theme-shadow` halo `ore-input`/`ore-textarea`/`ore-message-\n     composer` use, kept out of the shared mixin only because `.cell` is the focusable element\n     itself (not a wrapper, so this is `:focus` not `:focus-within`, and it targets `.cell`\n     directly rather than a mixin-supplied `container`). `flat` excluded — the mixin's own\n     `flat:focus-within` rule already sets a bespoke `box-shadow` for it. */\n  :host(:not([disabled], [variant='flat'])) .cell:focus {\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

package/dist/inputs/otp-input/otp-input.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/otp-input/otp-input.css?inline
-var e = "@layer refine.base{:host{--_cell-size:var(--otp-cell-size,var(--size-12));--_cell-gap:var(--otp-cell-gap,var(--size-2));--_cell-font-size:var(--otp-cell-font-size,var(--text-xl));--_cell-radius:var(--otp-cell-radius,var(--rounded-lg));--_cell-border:var(--otp-cell-border,var(--border));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300));--_cell-bg:var(--otp-cell-bg,var(--color-canvas));--_cell-focus-border:var(--otp-cell-focus-border,var(--_theme-base,var(--color-contrast-700)));gap:var(--size-1);flex-direction:column;display:inline-flex}.otp-group{gap:var(--_cell-gap);align-items:center;display:flex}.cell{box-sizing:border-box;width:var(--_cell-size);height:var(--_cell-size);font-size:var(--_cell-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;caret-color:var(--_cell-focus-border);background:var(--_cell-bg);border:var(--_cell-border) solid var(--_cell-border-color);border-radius:var(--_cell-radius);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:0;line-height:1;display:block}.cell::selection{background:var(--_theme-backdrop,var(--color-contrast-100))}.cell:focus{border-color:var(--_cell-focus-border);box-shadow:0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);outline:none}.cell:disabled{cursor:not-allowed;opacity:.5}.separator{font-size:var(--_cell-font-size);color:var(--color-contrast-400);-webkit-user-select:none;user-select:none}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_cell-bg:var(--otp-cell-bg,var(--color-contrast-50));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300))}:host(:not([variant])) .cell,:host([variant=solid]) .cell{box-shadow:var(--shadow-2xs)}:host([variant=flat]){--_cell-bg:var(--otp-cell-bg,var(--color-contrast-100));--_cell-border-color:var(--otp-cell-border-color,color-mix(in oklch, var(--_cell-focus-border) 20%, transparent))}:host([variant=flat]) .cell{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .cell:hover:not(:disabled){background:var(--otp-cell-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--otp-cell-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .cell:focus{background:var(--otp-cell-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--otp-cell-focus-border-color,color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_cell-bg:var(--otp-cell-bg,var(--_theme-backdrop,var(--color-contrast-50)));--_cell-border-color:var(--otp-cell-border-color,color-mix(in oklch, var(--_cell-focus-border) 70%, transparent))}:host([variant=bordered]) .cell{color:var(--_theme-base);caret-color:var(--_theme-base)}:host([variant=bordered]) .cell:hover:not(:disabled){border-color:var(--otp-cell-hover-border-color,var(--_cell-focus-border))}:host([variant=outline]){--_cell-bg:var(--otp-cell-bg,transparent)}:host([variant=outline]) .cell{box-shadow:none}:host([variant=ghost]){--_cell-bg:var(--otp-cell-bg,transparent);--_cell-border-color:var(--otp-cell-border-color,transparent)}:host([variant=ghost]) .cell{box-shadow:none}:host([variant=ghost]) .cell:hover:not(:disabled){background:var(--otp-cell-hover-bg,var(--color-contrast-100))}}@layer refine.utilities{:host([size=sm]){--_cell-size:var(--size-9);--_cell-font-size:var(--text-base)}:host([size=lg]){--_cell-size:var(--size-14);--_cell-font-size:var(--text-2xl)}}";
+var e = "@layer refine.base{:host{--_cell-size:var(--otp-cell-size,var(--size-12));--_cell-gap:var(--otp-cell-gap,var(--size-2));--_cell-font-size:var(--otp-cell-font-size,var(--text-xl));--_cell-radius:var(--otp-cell-radius,var(--rounded-lg));--_cell-border:var(--otp-cell-border,var(--border));--_border-color:var(--otp-cell-border-color,var(--color-contrast-300));--_bg:var(--otp-cell-bg,var(--color-canvas));--_cell-focus-border:var(--otp-cell-focus-border,var(--_theme-base,var(--color-contrast-700)));gap:var(--size-1);flex-direction:column;display:inline-flex}.otp-group{gap:var(--_cell-gap);align-items:center;display:flex}.cell{box-sizing:border-box;width:var(--_cell-size);height:var(--_cell-size);font-size:var(--_cell-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;caret-color:var(--_cell-focus-border);background:var(--_bg);border:var(--_cell-border) solid var(--_border-color);border-radius:var(--_cell-radius);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:0;line-height:1;display:block}.cell::selection{background:var(--_theme-backdrop,var(--color-contrast-100))}.cell:focus{border-color:var(--_cell-focus-border);outline:none}.cell:disabled{cursor:not-allowed;opacity:.5}.separator{font-size:var(--_cell-font-size);color:var(--color-contrast-400);-webkit-user-select:none;user-select:none}}@layer refine.variants{:host(:not([disabled],[variant=flat])) .cell:focus{box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}}@layer refine.utilities{:host([size=sm]){--_cell-size:var(--size-9);--_cell-font-size:var(--text-base)}:host([size=lg]){--_cell-size:var(--size-14);--_cell-font-size:var(--text-2xl)}}";
 //#endregion
 export { e as default };
 

package/dist/inputs/otp-input/otp-input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.css.js","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-50));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-100));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 20%, transparent));\n  }\n\n  :host([variant='flat']) .cell {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --otp-cell-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .cell:focus {\n    background: var(--otp-cell-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--otp-cell-focus-border-color, color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_cell-bg: var(--otp-cell-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--otp-cell-hover-border-color, var(--_cell-focus-border));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n  }\n\n  :host([variant='outline']) .cell {\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n    --_cell-border-color: var(--otp-cell-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .cell {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"otp-input.css.js","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n\n    /* --_bg/--_border-color (not --_cell-*-prefixed, unlike the rest of this component's tokens)\n       — this is the shared name `fieldVariantMixin` reads/writes, matching `ore-input`/`ore-\n       textarea`/`ore-message-composer`. Public override is still `--otp-cell-bg`/`--otp-cell-\n       border-color` either way. */\n    --_border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_bg);\n    border: var(--_cell-border) solid var(--_border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  /* Ring box-shadow lives in `@layer refine.variants` below, not here — every variant's own\n     rest-state `box-shadow` (`fieldVariantMixin`'s solid/outline/ghost rules) is *also* in\n     `refine.variants`, and cascade layers decide the winner before specificity ever gets\n     consulted. A `refine.base` box-shadow here would always lose to those, focused or not. */\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously `@layer refine.variants`\n * here) now lives in `fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell',\n * tokenPrefix: 'otp-cell' })` in `otp-input.ts`'s `styles` array — shared with `ore-input`/\n * `ore-textarea`/`ore-message-composer` instead of hand-duplicated. `accentVar` overrides the\n * shared `--_theme-focus` accent with this component's own per-cell focus-color token, since\n * that (not the shared theme-focus token) is what `flat`/`bordered` mixed into their border\n * color here even before this shared version existed.\n */\n@layer refine.variants {\n  /* Focus glow — the same `--_theme-shadow` halo `ore-input`/`ore-textarea`/`ore-message-\n     composer` use, kept out of the shared mixin only because `.cell` is the focusable element\n     itself (not a wrapper, so this is `:focus` not `:focus-within`, and it targets `.cell`\n     directly rather than a mixin-supplied `container`). `flat` excluded — the mixin's own\n     `flat:focus-within` rule already sets a bespoke `box-shadow` for it. */\n  :host(:not([disabled], [variant='flat'])) .cell:focus {\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/inputs/radio/radio.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAuD,MAAM,gBAAgB,CAAC;AAclH,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/inputs/radio/radio.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EACL,KAAK,sBAAsB,EAK5B,MAAM,gBAAgB,CAAC;AAcxB,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/inputs/select/select.d.ts

@@ -44,6 +44,7 @@ export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'text'
  * @attr {boolean} required - Required field
  * @attr {string} helper - Helper text below the select
  * @attr {string} error - Error message
+ * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
  * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
  * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
  * @attr {string} size - Component size: 'sm' | 'md' | 'lg'

package/dist/inputs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAqB,MAAM,gBAAgB,CAAC;AACpH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAexB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiBF,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE;QAAE,MAAM,EAAE,mBAAmB,CAAA;KAAE,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG;IAC5F,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAqB,MAAM,gBAAgB,CAAC;AACpH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAexB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiBF,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE;QAAE,MAAM,EAAE,mBAAmB,CAAA;KAAE,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG;IAC5F,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

package/dist/inputs/shared/index.d.ts

@@ -1,5 +1,5 @@
 export { applyCheckableBinding } from './field-binding';
 export { FORM_CTX, mergeFormContext, useFormContext } from './form-context';
-export { renderHelperRegion } from './templates';
+export { renderFieldStatusRegion, renderHelperRegion, renderStatusIcon } from './templates';
 export { useFormAction } from './use-form-action';
 //# sourceMappingURL=index.d.ts.map

package/dist/inputs/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/inputs/shared/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/inputs/shared/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/inputs/shared/templates.cjs

@@ -1,11 +1,34 @@
-let e=require("@vielzeug/ore");var t=(t,n,r,i)=>e.html`<div
+const e=require("../../headless/field-base.cjs");let t=require("@vielzeug/ore");var n=(e,n,r,i)=>t.html`<div
     class="helper-text"
     part="helper-text"
-    id="${t}"
+    id="${e}"
     :role="${()=>n.value?`alert`:null}"
     aria-live="polite"
     ?hidden="${()=>!n.value&&!r.value}"
     ref=${e=>{i?.(e)}}>
     ${()=>n.value||r.value}
-  </div>`;exports.renderHelperRegion=t;
+  </div>`,r=e=>t.html`
+  <span
+    class="status-icon"
+    part="status-icon"
+    aria-hidden="true"
+    :data-status="${()=>e.value?`error`:`success`}">
+    ${()=>e.value?t.html`<ore-icon name="alert-circle" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`:t.html`<ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>`}
+  </span>
+`,i=n=>t.html`
+  <span class="${()=>e.counterClassName(n.counter?.value)}" aria-live="polite" ?hidden="${()=>!n.counter}">
+    ${()=>n.counter?.value.counterText.replace(` / `,`/`)??``}
+  </span>
+  <div
+    id="${n.assistiveId}"
+    class="helper-text"
+    aria-live="polite"
+    part="helper"
+    ?hidden="${()=>!!n.errorText.value||!n.helperText.value}">
+    ${()=>n.helperText.value}
+  </div>
+  <div id="${n.errorId}" class="helper-text" role="alert" part="error" ?hidden="${()=>!n.errorText.value}">
+    ${()=>n.errorText.value}
+  </div>
+`;exports.renderFieldStatusRegion=i,exports.renderHelperRegion=n,exports.renderStatusIcon=r;
 //# sourceMappingURL=templates.cjs.map

package/dist/inputs/shared/templates.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"templates.cjs","names":[],"sources":["../../../src/inputs/shared/templates.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { html } from '@vielzeug/ore';\n\n/**\n * Renders the standard assistive text region (helper/error) used across all\n * field components. Encapsulates the repeated `aria-live`/`hidden` markup so\n * each component only passes the data.\n *\n * @param assistiveId - The stable ID shared with the ARIA `aria-describedby` attribute.\n * @param errorText   - Reactive error text signal from the field primitive.\n * @param helperText  - Reactive helper text signal from the field primitive.\n * @param setRef      - Optional callback to capture the container element.\n */\nexport const renderHelperRegion = (\n  assistiveId: string,\n  errorText: Readable<string>,\n  helperText: Readable<string>,\n  setRef?: (el: HTMLElement | null) => void,\n) => {\n  return html`<div\n    class=\"helper-text\"\n    part=\"helper-text\"\n    id=\"${assistiveId}\"\n    :role=\"${() => (errorText.value ? 'alert' : null)}\"\n    aria-live=\"polite\"\n    ?hidden=\"${() => !errorText.value && !helperText.value}\"\n    ref=${(el: HTMLElement | null) => {\n      setRef?.(el);\n    }}>\n    ${() => errorText.value || helperText.value}\n  </div>`;\n};\n"],"mappings":"+BAcA,IAAa,GACX,EACA,EACA,EACA,IAEO,EAAA,IAAI;;;UAGH,EAAY;iBACF,EAAU,MAAQ,QAAU,KAAM;;mBAEjC,CAAC,EAAU,OAAS,CAAC,EAAW,MAAM;UAChD,GAA2B,CAChC,IAAS,CAAE,CACb,EAAE;UACM,EAAU,OAAS,EAAW,MAAM"}
+{"version":3,"file":"templates.cjs","names":[],"sources":["../../../src/inputs/shared/templates.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { html } from '@vielzeug/ore';\n\nimport { counterClassName, type CounterState } from '../../headless';\n\n/**\n * Renders the standard assistive text region (helper/error) used across all\n * field components. Encapsulates the repeated `aria-live`/`hidden` markup so\n * each component only passes the data.\n *\n * @param assistiveId - The stable ID shared with the ARIA `aria-describedby` attribute.\n * @param errorText   - Reactive error text signal from the field primitive.\n * @param helperText  - Reactive helper text signal from the field primitive.\n * @param setRef      - Optional callback to capture the container element.\n */\nexport const renderHelperRegion = (\n  assistiveId: string,\n  errorText: Readable<string>,\n  helperText: Readable<string>,\n  setRef?: (el: HTMLElement | null) => void,\n) => {\n  return html`<div\n    class=\"helper-text\"\n    part=\"helper-text\"\n    id=\"${assistiveId}\"\n    :role=\"${() => (errorText.value ? 'alert' : null)}\"\n    aria-live=\"polite\"\n    ?hidden=\"${() => !errorText.value && !helperText.value}\"\n    ref=${(el: HTMLElement | null) => {\n      setRef?.(el);\n    }}>\n    ${() => errorText.value || helperText.value}\n  </div>`;\n};\n\n/**\n * Inline error/success status icon shown inside a field — identical markup across\n * `ore-input`, `ore-textarea`, and `ore-message-composer` (previously hand-duplicated in all\n * three, down to the same derived-signal names).\n */\nexport const renderStatusIcon = (errorText: Readable<string>) => html`\n  <span\n    class=\"status-icon\"\n    part=\"status-icon\"\n    aria-hidden=\"true\"\n    :data-status=\"${() => (errorText.value ? 'error' : 'success')}\">\n    ${() =>\n      errorText.value\n        ? html`<ore-icon name=\"alert-circle\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>`}\n  </span>\n`;\n\n/**\n * Character counter + separate helper/error text regions below a field — identical across\n * `ore-textarea` and `ore-message-composer` (kept out of `ore-input`, which slots its\n * helper/error content and drives its counter off a different data-attribute scheme via its\n * own `char-counter` part — a genuinely different shape, not worth forcing into this one).\n */\nexport const renderFieldStatusRegion = (tf: {\n  assistiveId: string;\n  counter: Readable<CounterState> | null;\n  errorId: string;\n  errorText: Readable<string>;\n  helperText: Readable<string>;\n}) => html`\n  <span class=\"${() => counterClassName(tf.counter?.value)}\" aria-live=\"polite\" ?hidden=\"${() => !tf.counter}\">\n    ${() => tf.counter?.value.counterText.replace(' / ', '/') ?? ''}\n  </span>\n  <div\n    id=\"${tf.assistiveId}\"\n    class=\"helper-text\"\n    aria-live=\"polite\"\n    part=\"helper\"\n    ?hidden=\"${() => !!tf.errorText.value || !tf.helperText.value}\">\n    ${() => tf.helperText.value}\n  </div>\n  <div id=\"${tf.errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${() => !tf.errorText.value}\">\n    ${() => tf.errorText.value}\n  </div>\n`;\n"],"mappings":"gFAgBA,IAAa,GACX,EACA,EACA,EACA,IAEO,EAAA,IAAI;;;UAGH,EAAY;iBACF,EAAU,MAAQ,QAAU,KAAM;;mBAEjC,CAAC,EAAU,OAAS,CAAC,EAAW,MAAM;UAChD,GAA2B,CAChC,IAAS,CAAE,CACb,EAAE;UACM,EAAU,OAAS,EAAW,MAAM;UASnC,EAAoB,GAAgC,EAAA,IAAI;;;;;wBAK1C,EAAU,MAAQ,QAAU,UAAW;UAE5D,EAAU,MACN,EAAA,IAAI,0FACJ,EAAA,IAAI,qFAAqF;;EAUtF,EAA2B,GAMlC,EAAA,IAAI;qBACa,EAAA,iBAAiB,EAAG,SAAS,KAAK,EAAE,oCAAsC,CAAC,EAAG,QAAQ;UACjG,EAAG,SAAS,MAAM,YAAY,QAAQ,MAAO,GAAG,GAAK,GAAG;;;UAG1D,EAAG,YAAY;;;;mBAIJ,CAAC,CAAC,EAAG,UAAU,OAAS,CAAC,EAAG,WAAW,MAAM;UACtD,EAAG,WAAW,MAAM;;aAEnB,EAAG,QAAQ,+DAAiE,CAAC,EAAG,UAAU,MAAM;UACjG,EAAG,UAAU,MAAM"}

package/dist/inputs/shared/templates.d.ts

@@ -1,4 +1,5 @@
 import type { Readable } from '@vielzeug/ripple';
+import { type CounterState } from '../../headless';
 /**
  * Renders the standard assistive text region (helper/error) used across all
  * field components. Encapsulates the repeated `aria-live`/`hidden` markup so
@@ -10,4 +11,23 @@ import type { Readable } from '@vielzeug/ripple';
  * @param setRef      - Optional callback to capture the container element.
  */
 export declare const renderHelperRegion: (assistiveId: string, errorText: Readable<string>, helperText: Readable<string>, setRef?: (el: HTMLElement | null) => void) => import("@vielzeug/ore").HTMLResult;
+/**
+ * Inline error/success status icon shown inside a field — identical markup across
+ * `ore-input`, `ore-textarea`, and `ore-message-composer` (previously hand-duplicated in all
+ * three, down to the same derived-signal names).
+ */
+export declare const renderStatusIcon: (errorText: Readable<string>) => import("@vielzeug/ore").HTMLResult;
+/**
+ * Character counter + separate helper/error text regions below a field — identical across
+ * `ore-textarea` and `ore-message-composer` (kept out of `ore-input`, which slots its
+ * helper/error content and drives its counter off a different data-attribute scheme via its
+ * own `char-counter` part — a genuinely different shape, not worth forcing into this one).
+ */
+export declare const renderFieldStatusRegion: (tf: {
+    assistiveId: string;
+    counter: Readable<CounterState> | null;
+    errorId: string;
+    errorText: Readable<string>;
+    helperText: Readable<string>;
+}) => import("@vielzeug/ore").HTMLResult;
 //# sourceMappingURL=templates.d.ts.map

package/dist/inputs/shared/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../src/inputs/shared/templates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIjD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAC7B,aAAa,MAAM,EACnB,WAAW,QAAQ,CAAC,MAAM,CAAC,EAC3B,YAAY,QAAQ,CAAC,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,uCAc1C,CAAC"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../src/inputs/shared/templates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAC7B,aAAa,MAAM,EACnB,WAAW,QAAQ,CAAC,MAAM,CAAC,EAC3B,YAAY,QAAQ,CAAC,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,uCAc1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,QAAQ,CAAC,MAAM,CAAC,uCAW3D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,IAAI;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,QAAQ,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC9B,uCAeA,CAAC"}

package/dist/inputs/shared/templates.js

@@ -1,9 +1,10 @@
-import { html as e } from "@vielzeug/ore";
+import { counterClassName as e } from "../../headless/field-base.js";
+import { html as t } from "@vielzeug/ore";
 //#region src/inputs/shared/templates.ts
-var t = (t, n, r, i) => e`<div
+var n = (e, n, r, i) => t`<div
     class="helper-text"
     part="helper-text"
-    id="${t}"
+    id="${e}"
     :role="${() => n.value ? "alert" : null}"
     aria-live="polite"
     ?hidden="${() => !n.value && !r.value}"
@@ -11,8 +12,31 @@ var t = (t, n, r, i) => e`<div
 	i?.(e);
 }}>
     ${() => n.value || r.value}
-  </div>`;
+  </div>`, r = (e) => t`
+  <span
+    class="status-icon"
+    part="status-icon"
+    aria-hidden="true"
+    :data-status="${() => e.value ? "error" : "success"}">
+    ${() => e.value ? t`<ore-icon name="alert-circle" size="14" stroke-width="2" aria-hidden="true"></ore-icon>` : t`<ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>`}
+  </span>
+`, i = (n) => t`
+  <span class="${() => e(n.counter?.value)}" aria-live="polite" ?hidden="${() => !n.counter}">
+    ${() => n.counter?.value.counterText.replace(" / ", "/") ?? ""}
+  </span>
+  <div
+    id="${n.assistiveId}"
+    class="helper-text"
+    aria-live="polite"
+    part="helper"
+    ?hidden="${() => !!n.errorText.value || !n.helperText.value}">
+    ${() => n.helperText.value}
+  </div>
+  <div id="${n.errorId}" class="helper-text" role="alert" part="error" ?hidden="${() => !n.errorText.value}">
+    ${() => n.errorText.value}
+  </div>
+`;
 //#endregion
-export { t as renderHelperRegion };
+export { i as renderFieldStatusRegion, n as renderHelperRegion, r as renderStatusIcon };
 
 //# sourceMappingURL=templates.js.map

package/dist/inputs/shared/templates.js.map

@@ -1 +1 @@
-{"version":3,"file":"templates.js","names":[],"sources":["../../../src/inputs/shared/templates.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { html } from '@vielzeug/ore';\n\n/**\n * Renders the standard assistive text region (helper/error) used across all\n * field components. Encapsulates the repeated `aria-live`/`hidden` markup so\n * each component only passes the data.\n *\n * @param assistiveId - The stable ID shared with the ARIA `aria-describedby` attribute.\n * @param errorText   - Reactive error text signal from the field primitive.\n * @param helperText  - Reactive helper text signal from the field primitive.\n * @param setRef      - Optional callback to capture the container element.\n */\nexport const renderHelperRegion = (\n  assistiveId: string,\n  errorText: Readable<string>,\n  helperText: Readable<string>,\n  setRef?: (el: HTMLElement | null) => void,\n) => {\n  return html`<div\n    class=\"helper-text\"\n    part=\"helper-text\"\n    id=\"${assistiveId}\"\n    :role=\"${() => (errorText.value ? 'alert' : null)}\"\n    aria-live=\"polite\"\n    ?hidden=\"${() => !errorText.value && !helperText.value}\"\n    ref=${(el: HTMLElement | null) => {\n      setRef?.(el);\n    }}>\n    ${() => errorText.value || helperText.value}\n  </div>`;\n};\n"],"mappings":";;AAcA,IAAa,KACX,GACA,GACA,GACA,MAEO,CAAI;;;UAGH,EAAY;mBACF,EAAU,QAAQ,UAAU,KAAM;;qBAEjC,CAAC,EAAU,SAAS,CAAC,EAAW,MAAM;WAChD,MAA2B;CAChC,IAAS,CAAE;AACb,EAAE;YACM,EAAU,SAAS,EAAW,MAAM"}
+{"version":3,"file":"templates.js","names":[],"sources":["../../../src/inputs/shared/templates.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { html } from '@vielzeug/ore';\n\nimport { counterClassName, type CounterState } from '../../headless';\n\n/**\n * Renders the standard assistive text region (helper/error) used across all\n * field components. Encapsulates the repeated `aria-live`/`hidden` markup so\n * each component only passes the data.\n *\n * @param assistiveId - The stable ID shared with the ARIA `aria-describedby` attribute.\n * @param errorText   - Reactive error text signal from the field primitive.\n * @param helperText  - Reactive helper text signal from the field primitive.\n * @param setRef      - Optional callback to capture the container element.\n */\nexport const renderHelperRegion = (\n  assistiveId: string,\n  errorText: Readable<string>,\n  helperText: Readable<string>,\n  setRef?: (el: HTMLElement | null) => void,\n) => {\n  return html`<div\n    class=\"helper-text\"\n    part=\"helper-text\"\n    id=\"${assistiveId}\"\n    :role=\"${() => (errorText.value ? 'alert' : null)}\"\n    aria-live=\"polite\"\n    ?hidden=\"${() => !errorText.value && !helperText.value}\"\n    ref=${(el: HTMLElement | null) => {\n      setRef?.(el);\n    }}>\n    ${() => errorText.value || helperText.value}\n  </div>`;\n};\n\n/**\n * Inline error/success status icon shown inside a field — identical markup across\n * `ore-input`, `ore-textarea`, and `ore-message-composer` (previously hand-duplicated in all\n * three, down to the same derived-signal names).\n */\nexport const renderStatusIcon = (errorText: Readable<string>) => html`\n  <span\n    class=\"status-icon\"\n    part=\"status-icon\"\n    aria-hidden=\"true\"\n    :data-status=\"${() => (errorText.value ? 'error' : 'success')}\">\n    ${() =>\n      errorText.value\n        ? html`<ore-icon name=\"alert-circle\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>`}\n  </span>\n`;\n\n/**\n * Character counter + separate helper/error text regions below a field — identical across\n * `ore-textarea` and `ore-message-composer` (kept out of `ore-input`, which slots its\n * helper/error content and drives its counter off a different data-attribute scheme via its\n * own `char-counter` part — a genuinely different shape, not worth forcing into this one).\n */\nexport const renderFieldStatusRegion = (tf: {\n  assistiveId: string;\n  counter: Readable<CounterState> | null;\n  errorId: string;\n  errorText: Readable<string>;\n  helperText: Readable<string>;\n}) => html`\n  <span class=\"${() => counterClassName(tf.counter?.value)}\" aria-live=\"polite\" ?hidden=\"${() => !tf.counter}\">\n    ${() => tf.counter?.value.counterText.replace(' / ', '/') ?? ''}\n  </span>\n  <div\n    id=\"${tf.assistiveId}\"\n    class=\"helper-text\"\n    aria-live=\"polite\"\n    part=\"helper\"\n    ?hidden=\"${() => !!tf.errorText.value || !tf.helperText.value}\">\n    ${() => tf.helperText.value}\n  </div>\n  <div id=\"${tf.errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${() => !tf.errorText.value}\">\n    ${() => tf.errorText.value}\n  </div>\n`;\n"],"mappings":";;;AAgBA,IAAa,KACX,GACA,GACA,GACA,MAEO,CAAI;;;UAGH,EAAY;mBACF,EAAU,QAAQ,UAAU,KAAM;;qBAEjC,CAAC,EAAU,SAAS,CAAC,EAAW,MAAM;WAChD,MAA2B;CAChC,IAAS,CAAE;AACb,EAAE;YACM,EAAU,SAAS,EAAW,MAAM;WASnC,KAAoB,MAAgC,CAAI;;;;;0BAK1C,EAAU,QAAQ,UAAU,UAAW;YAE5D,EAAU,QACN,CAAI,4FACJ,CAAI,qFAAqF;;GAUtF,KAA2B,MAMlC,CAAI;uBACa,EAAiB,EAAG,SAAS,KAAK,EAAE,sCAAsC,CAAC,EAAG,QAAQ;YACjG,EAAG,SAAS,MAAM,YAAY,QAAQ,OAAO,GAAG,KAAK,GAAG;;;UAG1D,EAAG,YAAY;;;;qBAIJ,CAAC,CAAC,EAAG,UAAU,SAAS,CAAC,EAAG,WAAW,MAAM;YACtD,EAAG,WAAW,MAAM;;aAEnB,EAAG,QAAQ,iEAAiE,CAAC,EAAG,UAAU,MAAM;YACjG,EAAG,UAAU,MAAM"}

package/dist/inputs/switch/switch.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track-bg,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb-bg,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--size-11);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-normal), box-shadow var(--transition-normal);position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding)}.switch-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding)}input:focus-visible~.switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer refine.overrides{:host{--_active-bg:var(--switch-checked-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--_width) + var(--size-2-5))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track-bg,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb-bg,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--_touch-target);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-normal), box-shadow var(--transition-normal);position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding)}.switch-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding)}:host(:focus-visible) .switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer refine.overrides{:host{--_active-bg:var(--switch-checked-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--_width) + var(--size-2-5))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}`;exports.default=e;
 //# sourceMappingURL=switch.css.cjs.map

package/dist/inputs/switch/switch.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.cjs","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"switch.css.cjs","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--_touch-target);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}

package/dist/inputs/switch/switch.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/switch/switch.css?inline
-var e = "@layer refine.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track-bg,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb-bg,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--size-11);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-normal), box-shadow var(--transition-normal);position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding)}.switch-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding)}input:focus-visible~.switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer refine.overrides{:host{--_active-bg:var(--switch-checked-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--_width) + var(--size-2-5))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}";
+var e = "@layer refine.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track-bg,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb-bg,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--_touch-target);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-normal), box-shadow var(--transition-normal);position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding)}.switch-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding)}:host(:focus-visible) .switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer refine.overrides{:host{--_active-bg:var(--switch-checked-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--_width) + var(--size-2-5))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}";
 //#endregion
 export { e as default };
 

package/dist/inputs/switch/switch.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.js","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"switch.css.js","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--_touch-target);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}

package/dist/inputs/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAoC,MAAM,gBAAgB,CAAC;AAQ/F,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAoC,MAAM,gBAAgB,CAAC;AAc/F,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

package/dist/inputs/textarea/textarea.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1);flex-direction:column;min-width:0;display:flex}:host(:not([label-placement=outside])) .textarea-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .textarea-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid}.label,label.label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);margin-bottom:0}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--textarea-color,var(--text-color-body));resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .field:focus-within~.label{color:var(--_theme-focus)}:host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label{color:var(--_theme-focus)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=""])) .label{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--textarea-bg,var(--color-contrast-50));--_border-color:var(--textarea-border-color,var(--color-contrast-300))}:host(:not([variant])) .field,:host([variant=solid]) .field{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .field{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:var(--textarea-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--textarea-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--textarea-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--textarea-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--textarea-bg,var(--_theme-backdrop));--_border-color:var(--textarea-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) textarea{color:var(--_theme-base)}:host([variant=bordered]) textarea::placeholder{color:var(--textarea-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--textarea-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--textarea-bg,transparent)}:host([variant=outline]) .field{box-shadow:none}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--textarea-bg,transparent);--_border-color:var(--textarea-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--textarea-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer refine.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1);flex-direction:column;min-width:0;display:flex}:host(:not([label-placement=outside])) .textarea-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .textarea-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid;position:relative}.status-icon,.field-spinner{top:var(--size-2);position:absolute}.status-icon:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),.field-spinner:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}.status-icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-2)}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-2)}.status-icon{width:var(--size-5);height:var(--size-5);justify-content:center;align-items:center;display:none}:host([error]:not([error=""])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;display:none}.field-spinner:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}:host([loading]) .field-spinner{display:inline-block}.label,label.label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);margin-bottom:0}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--textarea-color,var(--text-color-body));resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within~.label{color:var(--_theme-focus)}:host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label{color:var(--_theme-focus)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}}@layer refine.variants{:host(:not([disabled],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) textarea{color:var(--color-contrast-400)}:host([disabled]) textarea::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`;exports.default=e;
 //# sourceMappingURL=textarea.css.cjs.map

package/dist/inputs/textarea/textarea.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.css.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-50));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--textarea-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --textarea-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--textarea-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--textarea-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--textarea-bg, var(--_theme-backdrop));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: var(--textarea-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--textarea-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--textarea-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--textarea-bg, transparent);\n    --_border-color: var(--textarea-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--textarea-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.css.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Status Icon & Loading Spinner (top-right corner — clear of the\n       bottom-right native resize handle)\n       ======================================== */\n\n  .status-icon,\n  .field-spinner {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2);\n  }\n\n  .status-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .field-spinner {\n    display: none;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  /* Success State */\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n}\n\n/*\n * Focus/error/success `box-shadow` on `.field` — moved out of `@layer refine.base` into\n * `refine.variants` (alongside `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/\n * ghost) so normal specificity decides the winner. Cascade layers beat specificity outright, so\n * a `refine.base` box-shadow here always lost to every variant's unconditional rest-state\n * `box-shadow`, focused/error/success or not — the same bug class fixed for `ore-otp-input`'s\n * focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', text: 'textarea', tokenPrefix: 'textarea' })`\n * in `textarea.ts`'s `styles` array — shared with `ore-input`/`ore-message-composer` instead of\n * hand-duplicated across all three (see the mixin's own doc comment for what it covers and why).\n */\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) textarea {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) textarea::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/textarea/textarea.css?inline
-var e = "@layer refine.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1);flex-direction:column;min-width:0;display:flex}:host(:not([label-placement=outside])) .textarea-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .textarea-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid}.label,label.label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);margin-bottom:0}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--textarea-color,var(--text-color-body));resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .field:focus-within~.label{color:var(--_theme-focus)}:host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label{color:var(--_theme-focus)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=\"\"])) .label{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--textarea-bg,var(--color-contrast-50));--_border-color:var(--textarea-border-color,var(--color-contrast-300))}:host(:not([variant])) .field,:host([variant=solid]) .field{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .field{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:var(--textarea-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--textarea-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--textarea-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--textarea-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--textarea-bg,var(--_theme-backdrop));--_border-color:var(--textarea-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) textarea{color:var(--_theme-base)}:host([variant=bordered]) textarea::placeholder{color:var(--textarea-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--textarea-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--textarea-bg,transparent)}:host([variant=outline]) .field{box-shadow:none}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--textarea-bg,transparent);--_border-color:var(--textarea-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--textarea-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer refine.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}";
+var e = "@layer refine.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1);flex-direction:column;min-width:0;display:flex}:host(:not([label-placement=outside])) .textarea-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .textarea-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid;position:relative}.status-icon,.field-spinner{top:var(--size-2);position:absolute}.status-icon:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),.field-spinner:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}.status-icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-2)}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-2)}.status-icon{width:var(--size-5);height:var(--size-5);justify-content:center;align-items:center;display:none}:host([error]:not([error=\"\"])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;display:none}.field-spinner:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}:host([loading]) .field-spinner{display:inline-block}.label,label.label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);margin-bottom:0}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--textarea-color,var(--text-color-body));resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within~.label{color:var(--_theme-focus)}:host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label{color:var(--_theme-focus)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .label{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}}@layer refine.variants{:host(:not([disabled],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) textarea{color:var(--color-contrast-400)}:host([disabled]) textarea::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}";
 //#endregion
 export { e as default };
 

package/dist/inputs/textarea/textarea.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.css.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-50));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--textarea-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --textarea-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--textarea-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--textarea-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--textarea-bg, var(--_theme-backdrop));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: var(--textarea-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--textarea-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--textarea-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--textarea-bg, transparent);\n    --_border-color: var(--textarea-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--textarea-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.css.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Status Icon & Loading Spinner (top-right corner — clear of the\n       bottom-right native resize handle)\n       ======================================== */\n\n  .status-icon,\n  .field-spinner {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2);\n  }\n\n  .status-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .field-spinner {\n    display: none;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  /* Success State */\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n}\n\n/*\n * Focus/error/success `box-shadow` on `.field` — moved out of `@layer refine.base` into\n * `refine.variants` (alongside `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/\n * ghost) so normal specificity decides the winner. Cascade layers beat specificity outright, so\n * a `refine.base` box-shadow here always lost to every variant's unconditional rest-state\n * `box-shadow`, focused/error/success or not — the same bug class fixed for `ore-otp-input`'s\n * focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', text: 'textarea', tokenPrefix: 'textarea' })`\n * in `textarea.ts`'s `styles` array — shared with `ore-input`/`ore-message-composer` instead of\n * hand-duplicated across all three (see the mixin's own doc comment for what it covers and why).\n */\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) textarea {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) textarea::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}