@vielzeug/refine 1.5.4 → 1.8.0

package/dist/inputs/input/input.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow,var(--shadow-2xs));transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-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])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);order:-1;margin-bottom:0}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}: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,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);text-align:end;white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}: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-inset,:host([error]:not([error=""])) .label-outside,.helper-text[role=alert]{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--input-bg,var(--color-contrast-50));--_border-color:var(--input-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(--input-bg,var(--color-contrast-100));--_border-color:var(--input-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(--input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--input-bg,var(--_theme-backdrop));--_border-color:var(--input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--input-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(--input-bg,transparent);--_border-color:var(--input-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--input-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}}@layer refine.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-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])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);text-align:end;white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;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%;flex-shrink:0;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}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}: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([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([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]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}`;exports.default=e;
 //# sourceMappingURL=input.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.css.cjs","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\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, var(--shadow-2xs));\n    transition: var(\n      --_motion-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  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-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'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\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    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-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    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\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    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\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-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--input-bg, var(--color-contrast-50));\n    --_border-color: var(--input-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(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-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(--input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --input-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(--input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--input-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(--input-bg, var(--_theme-backdrop));\n    --_border-color: var(--input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--input-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(--input-bg, transparent);\n    --_border-color: var(--input-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(--input-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  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--input-focus-border-color, var(--_theme-focus));\n  }\n}\n\n@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"input.css.cjs","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\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: var(\n      --_motion-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  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-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'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\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    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    font-size: var(--text-xs);\n    line-height: var(--leading-loose);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-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    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\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    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\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  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Success State (Signal 04)\n       ======================================== */\n\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (Signals 03/04: error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    display: none;\n    flex-shrink: 0;\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  /* ========================================\n       Loading Spinner (Signal 06)\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    flex-shrink: 0;\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/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--input-focus-border-color, var(--_theme-focus));\n  }\n\n  /*\n   * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n   * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n   * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n   * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n   * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n   * fixed for `ore-otp-input`'s focus ring.\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([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@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State (Signal 05) — 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.\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]) input {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::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/input/input.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/input/input.css?inline
-var e = "@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow,var(--shadow-2xs));transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-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])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);order:-1;margin-bottom:0}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}: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,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);text-align:end;white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}: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-inset,:host([error]:not([error=\"\"])) .label-outside,.helper-text[role=alert]{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--input-bg,var(--color-contrast-50));--_border-color:var(--input-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(--input-bg,var(--color-contrast-100));--_border-color:var(--input-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(--input-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--input-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--input-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--input-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--input-bg,var(--_theme-backdrop));--_border-color:var(--input-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--input-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--input-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(--input-bg,transparent);--_border-color:var(--input-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--input-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}}@layer refine.utilities{:host([fullwidth]){width:100%}}";
+var e = "@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-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])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);text-align:end;white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;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%;flex-shrink:0;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}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}: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([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([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]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"input.css.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\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, var(--shadow-2xs));\n    transition: var(\n      --_motion-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  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-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'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\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    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-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    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\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    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\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-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--input-bg, var(--color-contrast-50));\n    --_border-color: var(--input-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(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-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(--input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --input-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(--input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--input-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(--input-bg, var(--_theme-backdrop));\n    --_border-color: var(--input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--input-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(--input-bg, transparent);\n    --_border-color: var(--input-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(--input-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  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--input-focus-border-color, var(--_theme-focus));\n  }\n}\n\n@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"input.css.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\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: var(\n      --_motion-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  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-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'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\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    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    font-size: var(--text-xs);\n    line-height: var(--leading-loose);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-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    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\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    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\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  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Success State (Signal 04)\n       ======================================== */\n\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (Signals 03/04: error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    display: none;\n    flex-shrink: 0;\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  /* ========================================\n       Loading Spinner (Signal 06)\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    flex-shrink: 0;\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/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--input-focus-border-color, var(--_theme-focus));\n  }\n\n  /*\n   * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n   * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n   * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n   * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n   * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n   * fixed for `ore-otp-input`'s focus ring.\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([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@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State (Signal 05) — 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.\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]) input {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::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/input/input.d.ts

@@ -19,6 +19,12 @@ export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
     clearable?: boolean;
     /** Virtual keyboard hint for mobile devices */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+     * Shows an inline spinner inside the field and forces the inner `<input>` into
+     * `disabled` for the duration — use while an async validation/submission request
+     * is in flight (e.g. checking username availability) to prevent double-submits.
+     */
+    loading?: boolean;
     /** Maximum character length — shows a counter below the input */
     maxlength?: number;
     /** Minimum character length */
@@ -51,6 +57,8 @@ export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
  * @attr {boolean} disabled - Disable input interaction
  * @attr {boolean} readonly - Make the input read-only
  * @attr {boolean} required - Mark the field as required
+ * @attr {boolean} loading - Show an inline spinner and force the field disabled
+ * @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' | 'text'
  * @attr {string} size - Input size: 'sm' | 'md' | 'lg'
@@ -70,6 +78,8 @@ export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
  * @part field - The field container element
  * @part input-row - The input row container element
  * @part input - The input element
+ * @part status-icon - The inline error/success icon shown inside the field
+ * @part spinner - The inline loading spinner shown inside the field while `loading`
  * @part helper - The helper text element
  *
  * @cssprop --input-bg - Background color
@@ -90,6 +100,9 @@ export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
  * ```html
  * <ore-input type="email" label="Email" placeholder="you@example.com" />
  * <ore-input label="Name" variant="bordered" color="primary" />
+ * <ore-input label="Username" error="That username is taken" />
+ * <ore-input label="Username" success />
+ * <ore-input label="Username" loading />
  * ```
  */
 export declare const INPUT_TAG: "ore-input";

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,yBAAyB,CAAC;AAMjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,yBAAyB,CAAC;AAOjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/inputs/message-composer/message-composer.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_radius:var(--message-composer-radius,var(--rounded-2xl));--_padding:var(--message-composer-padding,var(--size-3));--_surface:var(--_bg);width:fit-content;max-width:100%;display:flex}:host([fullwidth]){width:100%}.composer{gap:var(--message-composer-gap,var(--_gap));width:100%;padding:var(--_padding);background:var(--_surface);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex}:host(:not([disabled],[variant=bordered],[variant=flat])) .composer:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=flat])) .composer:focus-within{--_surface:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow)}:host([error]:not([error=""])) .composer{border-color:var(--color-error)}:host([error]:not([error=""])) .composer:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}.field{box-sizing:border-box;width:100%;min-width:0;min-height:var(--message-composer-min-height,1lh);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--text-color-body);resize:none;background:0 0;border:none;outline:none;padding:0}.field::placeholder{color:var(--message-composer-placeholder-color,var(--color-contrast-500))}.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}.counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}.toolbar{gap:var(--message-composer-gap,var(--_gap));justify-content:space-between;align-items:center;display:flex}.toolbar-start,.toolbar-end{gap:var(--message-composer-gap,var(--_gap));align-items:center;min-width:0;display:flex}.send-btn{flex-shrink:0}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--message-composer-bg,var(--color-contrast-50));--_border-color:var(--message-composer-border-color,var(--color-contrast-300))}:host(:not([variant])) .composer,:host([variant=solid]) .composer{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .composer:focus-within,:host([variant=solid]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--message-composer-bg,var(--color-contrast-100));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .composer{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--message-composer-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]:not([disabled])) .composer:focus-within{background:var(--message-composer-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--message-composer-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--message-composer-bg,var(--_theme-backdrop));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]:not([disabled])) .composer:hover{border-color:var(--message-composer-hover-border-color,var(--_theme-focus))}:host([variant=bordered]) .field{color:var(--_theme-base)}:host([variant=bordered]) .field::placeholder{color:var(--message-composer-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=outline]){--_bg:var(--message-composer-bg,transparent)}:host([variant=outline]) .composer{box-shadow:none}:host([variant=outline]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--message-composer-bg,transparent);--_border-color:var(--message-composer-border-color,transparent)}:host([variant=ghost]) .composer{box-shadow:none}:host([variant=ghost]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,var(--color-contrast-100))}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_radius:var(--message-composer-radius,var(--rounded-2xl));--_padding:var(--message-composer-padding,var(--size-3));--_surface:var(--_bg);width:fit-content;max-width:100%;display:flex}:host([fullwidth]){width:100%}.composer{gap:var(--message-composer-gap,var(--_gap));width:100%;padding:var(--_padding);background:var(--_surface);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex;position:relative}:host(:not([disabled],[variant=bordered],[variant=flat])) .composer:hover{border-color:var(--color-contrast-400)}:host([error]:not([error=""])) .composer{border-color:var(--color-error)}:host([success]) .composer{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);top:var(--_padding);justify-content:center;align-items:center;display:none;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)){right:var(--_padding)}.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(--_padding)}: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)}.field{box-sizing:border-box;width:100%;min-width:0;min-height:var(--message-composer-min-height,1lh);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--text-color-body);resize:none;background:0 0;border:none;outline:none;padding:0}.field::placeholder{color:var(--message-composer-placeholder-color,var(--color-contrast-500))}.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}.counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}.toolbar{gap:var(--message-composer-gap,var(--_gap));justify-content:space-between;align-items:center;display:flex}.toolbar-start,.toolbar-end{gap:var(--message-composer-gap,var(--_gap));align-items:center;min-width:0;display:flex}.send-btn{flex-shrink:0}}@layer refine.variants{:host(:not([disabled],[variant=flat])) .composer:focus-within{--_surface:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow)}:host([error]:not([error=""])) .composer:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .composer:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}:host([loading]:not([disabled])){opacity:1}:host([loading]:not([disabled])) .composer{pointer-events:auto}:host([disabled]){opacity:1}:host([disabled]) .composer{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) .field{color:var(--color-contrast-400)}:host([disabled]) .field::placeholder{color:var(--color-contrast-300)}`;exports.default=e;
 //# sourceMappingURL=message-composer.css.cjs.map

package/dist/inputs/message-composer/message-composer.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-composer.css.cjs","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\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      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\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  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\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  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * Same five-variant set as `ore-textarea` (solid/flat/bordered/outline/ghost), applied to the\n * card (`.composer`) instead of a bare field — kept consistent with the rest of the field\n * family rather than a bespoke boolean \"flat or not\" so `ore-message-composer` doesn't read as\n * a special case next to `ore-input`/`ore-textarea`.\n */\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-50));\n    --_border-color: var(--message-composer-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .composer,\n  :host([variant='solid']) .composer {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .composer:focus-within,\n  :host([variant='solid']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Flat — a filled, theme-tinted card that \"sinks in\" via an inset shadow rather than sitting\n   * on a border, same recipe as `ore-textarea`'s flat. Previously this was transparent at rest\n   * (identical to `ghost`) and only grew a visible identity nobody could see until it happened\n   * to line up with `ghost`'s own hover state — the two read as the same variant side-by-side.\n   */\n  :host([variant='flat']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-100));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .composer {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --message-composer-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:focus-within {\n    background: var(--message-composer-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--message-composer-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered — theme-tinted backdrop and border; field text picks up the theme color too. */\n  :host([variant='bordered']) {\n    --_bg: var(--message-composer-bg, var(--_theme-backdrop));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']:not([disabled])) .composer:hover {\n    border-color: var(--message-composer-hover-border-color, var(--_theme-focus));\n  }\n\n  :host([variant='bordered']) .field {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .field::placeholder {\n    color: var(--message-composer-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  /* Outline — transparent background, border always visible, theme-colored focus ring. */\n  :host([variant='outline']) {\n    --_bg: var(--message-composer-bg, transparent);\n  }\n\n  :host([variant='outline']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Ghost — fully transparent at rest and on hover-only background tint; focus falls through to\n   * the shared `:focus-within` rule above (canvas background + theme-focus border + theme\n   * shadow) instead of a second, bespoke focus recipe here — same as `ore-textarea`'s ghost.\n   */\n  :host([variant='ghost']) {\n    --_bg: var(--message-composer-bg, transparent);\n    --_border-color: var(--message-composer-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, var(--color-contrast-100));\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"message-composer.css.cjs","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\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      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([success]) .composer {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    position: absolute;\n    inset-block-start: var(--_padding);\n    inset-inline-end: var(--_padding);\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  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\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  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\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  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously `@layer refine.variants`\n * here) now lives in `fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix:\n * 'message-composer' })` in `message-composer.ts`'s `styles` array — shared with `ore-input`/\n * `ore-textarea` instead of hand-duplicated across all three (see the mixin's own doc comment\n * for what it covers and why).\n */\n\n/*\n * Focus/error/success `box-shadow` on `.composer` — kept in `refine.variants` (alongside\n * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n * `refine.base`, so normal specificity decides the winner. Cascade layers beat specificity\n * outright, so a `refine.base` box-shadow here always lost to every variant's unconditional\n * rest-state `box-shadow`, focused/error/success or not — the same bug class fixed for\n * `ore-otp-input`'s focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .composer:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/* ========================================\n     Disabled / Loading overrides — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` treats `[disabled]` and `[loading]` identically: bare,\n * unlayered `opacity: 0.5` plus `pointer-events: none` on every direct child (this component's\n * template root is a single `.composer` div, so that means the whole card). Cascade layers always\n * lose to unlayered rules regardless of source order or specificity, so these overrides have to\n * stay unlayered too, to actually win — see `ore-input`'s `input.css` for the same pattern.\n *\n * `loading` here documents itself as \"blocks further sends... without disabling editing\" (see\n * the `loading` prop's own doc comment) — the send button already disables itself via\n * `composer.canSend`. Inheriting the generic mixin's `[loading]` treatment silently broke that:\n * `pointer-events: none` on `.composer` cascades (it's an inherited property) to the `<textarea>`\n * itself, blocking typing during every in-flight send. `:not([disabled])` keeps a real `disabled`\n * still fully blocking, exactly like every other field.\n */\n:host([loading]:not([disabled])) {\n  opacity: 1;\n}\n\n:host([loading]:not([disabled])) .composer {\n  pointer-events: auto;\n}\n\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .composer {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) .field {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .field::placeholder {\n  color: var(--color-contrast-300);\n}\n"],"mappings":""}

package/dist/inputs/message-composer/message-composer.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/message-composer/message-composer.css?inline
-var e = "@layer refine.base{:host{--_radius:var(--message-composer-radius,var(--rounded-2xl));--_padding:var(--message-composer-padding,var(--size-3));--_surface:var(--_bg);width:fit-content;max-width:100%;display:flex}:host([fullwidth]){width:100%}.composer{gap:var(--message-composer-gap,var(--_gap));width:100%;padding:var(--_padding);background:var(--_surface);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex}:host(:not([disabled],[variant=bordered],[variant=flat])) .composer:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=flat])) .composer:focus-within{--_surface:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow)}:host([error]:not([error=\"\"])) .composer{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .composer:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}.field{box-sizing:border-box;width:100%;min-width:0;min-height:var(--message-composer-min-height,1lh);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--text-color-body);resize:none;background:0 0;border:none;outline:none;padding:0}.field::placeholder{color:var(--message-composer-placeholder-color,var(--color-contrast-500))}.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}.counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}.toolbar{gap:var(--message-composer-gap,var(--_gap));justify-content:space-between;align-items:center;display:flex}.toolbar-start,.toolbar-end{gap:var(--message-composer-gap,var(--_gap));align-items:center;min-width:0;display:flex}.send-btn{flex-shrink:0}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--message-composer-bg,var(--color-contrast-50));--_border-color:var(--message-composer-border-color,var(--color-contrast-300))}:host(:not([variant])) .composer,:host([variant=solid]) .composer{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .composer:focus-within,:host([variant=solid]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--message-composer-bg,var(--color-contrast-100));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .composer{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--message-composer-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]:not([disabled])) .composer:focus-within{background:var(--message-composer-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--message-composer-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--message-composer-bg,var(--_theme-backdrop));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]:not([disabled])) .composer:hover{border-color:var(--message-composer-hover-border-color,var(--_theme-focus))}:host([variant=bordered]) .field{color:var(--_theme-base)}:host([variant=bordered]) .field::placeholder{color:var(--message-composer-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=outline]){--_bg:var(--message-composer-bg,transparent)}:host([variant=outline]) .composer{box-shadow:none}:host([variant=outline]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--message-composer-bg,transparent);--_border-color:var(--message-composer-border-color,transparent)}:host([variant=ghost]) .composer{box-shadow:none}:host([variant=ghost]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,var(--color-contrast-100))}}";
+var e = "@layer refine.base{:host{--_radius:var(--message-composer-radius,var(--rounded-2xl));--_padding:var(--message-composer-padding,var(--size-3));--_surface:var(--_bg);width:fit-content;max-width:100%;display:flex}:host([fullwidth]){width:100%}.composer{gap:var(--message-composer-gap,var(--_gap));width:100%;padding:var(--_padding);background:var(--_surface);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex;position:relative}:host(:not([disabled],[variant=bordered],[variant=flat])) .composer:hover{border-color:var(--color-contrast-400)}:host([error]:not([error=\"\"])) .composer{border-color:var(--color-error)}:host([success]) .composer{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);top:var(--_padding);justify-content:center;align-items:center;display:none;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)){right:var(--_padding)}.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(--_padding)}: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)}.field{box-sizing:border-box;width:100%;min-width:0;min-height:var(--message-composer-min-height,1lh);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--text-color-body);resize:none;background:0 0;border:none;outline:none;padding:0}.field::placeholder{color:var(--message-composer-placeholder-color,var(--color-contrast-500))}.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}.counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}.toolbar{gap:var(--message-composer-gap,var(--_gap));justify-content:space-between;align-items:center;display:flex}.toolbar-start,.toolbar-end{gap:var(--message-composer-gap,var(--_gap));align-items:center;min-width:0;display:flex}.send-btn{flex-shrink:0}}@layer refine.variants{:host(:not([disabled],[variant=flat])) .composer:focus-within{--_surface:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow)}:host([error]:not([error=\"\"])) .composer:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .composer:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}:host([loading]:not([disabled])){opacity:1}:host([loading]:not([disabled])) .composer{pointer-events:auto}:host([disabled]){opacity:1}:host([disabled]) .composer{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) .field{color:var(--color-contrast-400)}:host([disabled]) .field::placeholder{color:var(--color-contrast-300)}";
 //#endregion
 export { e as default };
 

package/dist/inputs/message-composer/message-composer.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-composer.css.js","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\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      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\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  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\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  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * Same five-variant set as `ore-textarea` (solid/flat/bordered/outline/ghost), applied to the\n * card (`.composer`) instead of a bare field — kept consistent with the rest of the field\n * family rather than a bespoke boolean \"flat or not\" so `ore-message-composer` doesn't read as\n * a special case next to `ore-input`/`ore-textarea`.\n */\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-50));\n    --_border-color: var(--message-composer-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .composer,\n  :host([variant='solid']) .composer {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .composer:focus-within,\n  :host([variant='solid']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Flat — a filled, theme-tinted card that \"sinks in\" via an inset shadow rather than sitting\n   * on a border, same recipe as `ore-textarea`'s flat. Previously this was transparent at rest\n   * (identical to `ghost`) and only grew a visible identity nobody could see until it happened\n   * to line up with `ghost`'s own hover state — the two read as the same variant side-by-side.\n   */\n  :host([variant='flat']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-100));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .composer {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --message-composer-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:focus-within {\n    background: var(--message-composer-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--message-composer-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered — theme-tinted backdrop and border; field text picks up the theme color too. */\n  :host([variant='bordered']) {\n    --_bg: var(--message-composer-bg, var(--_theme-backdrop));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']:not([disabled])) .composer:hover {\n    border-color: var(--message-composer-hover-border-color, var(--_theme-focus));\n  }\n\n  :host([variant='bordered']) .field {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .field::placeholder {\n    color: var(--message-composer-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  /* Outline — transparent background, border always visible, theme-colored focus ring. */\n  :host([variant='outline']) {\n    --_bg: var(--message-composer-bg, transparent);\n  }\n\n  :host([variant='outline']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Ghost — fully transparent at rest and on hover-only background tint; focus falls through to\n   * the shared `:focus-within` rule above (canvas background + theme-focus border + theme\n   * shadow) instead of a second, bespoke focus recipe here — same as `ore-textarea`'s ghost.\n   */\n  :host([variant='ghost']) {\n    --_bg: var(--message-composer-bg, transparent);\n    --_border-color: var(--message-composer-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, var(--color-contrast-100));\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"message-composer.css.js","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\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      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([success]) .composer {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    position: absolute;\n    inset-block-start: var(--_padding);\n    inset-inline-end: var(--_padding);\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  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\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  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\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  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously `@layer refine.variants`\n * here) now lives in `fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix:\n * 'message-composer' })` in `message-composer.ts`'s `styles` array — shared with `ore-input`/\n * `ore-textarea` instead of hand-duplicated across all three (see the mixin's own doc comment\n * for what it covers and why).\n */\n\n/*\n * Focus/error/success `box-shadow` on `.composer` — kept in `refine.variants` (alongside\n * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n * `refine.base`, so normal specificity decides the winner. Cascade layers beat specificity\n * outright, so a `refine.base` box-shadow here always lost to every variant's unconditional\n * rest-state `box-shadow`, focused/error/success or not — the same bug class fixed for\n * `ore-otp-input`'s focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .composer:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/* ========================================\n     Disabled / Loading overrides — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` treats `[disabled]` and `[loading]` identically: bare,\n * unlayered `opacity: 0.5` plus `pointer-events: none` on every direct child (this component's\n * template root is a single `.composer` div, so that means the whole card). Cascade layers always\n * lose to unlayered rules regardless of source order or specificity, so these overrides have to\n * stay unlayered too, to actually win — see `ore-input`'s `input.css` for the same pattern.\n *\n * `loading` here documents itself as \"blocks further sends... without disabling editing\" (see\n * the `loading` prop's own doc comment) — the send button already disables itself via\n * `composer.canSend`. Inheriting the generic mixin's `[loading]` treatment silently broke that:\n * `pointer-events: none` on `.composer` cascades (it's an inherited property) to the `<textarea>`\n * itself, blocking typing during every in-flight send. `:not([disabled])` keeps a real `disabled`\n * still fully blocking, exactly like every other field.\n */\n:host([loading]:not([disabled])) {\n  opacity: 1;\n}\n\n:host([loading]:not([disabled])) .composer {\n  pointer-events: auto;\n}\n\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .composer {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) .field {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .field::placeholder {\n  color: var(--color-contrast-300);\n}\n"],"mappings":""}

package/dist/inputs/message-composer/message-composer.d.ts

@@ -63,6 +63,11 @@ export type OreMessageComposerProps = {
     'send-shortcut'?: SendShortcut;
     /** Component size */
     size?: ComponentSize;
+    /**
+     * Shows an inline green check icon inside the field to confirm the value has
+     * passed validation. Ignored while `error` is set — an error always wins.
+     */
+    success?: boolean;
     /** Current text value */
     value?: string;
     /** Visual variant of the card — same variant set as `ore-textarea`, applied to the card. */
@@ -87,6 +92,7 @@ export type OreMessageComposerProps = {
  * @attr {string} name - Form field name
  * @attr {string} helper - Helper text shown below the field
  * @attr {string} error - Error message shown below the field
+ * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
  * @attr {boolean} disabled - Disable the whole composer
  * @attr {boolean} readonly - Read-only mode
  * @attr {boolean} required - Require a non-blank value for `<ore-form>` validation
@@ -123,6 +129,7 @@ export type OreMessageComposerProps = {
  *
  * @part composer - Root card container
  * @part field - The native `<textarea>` element
+ * @part status-icon - The inline error/success icon shown inside the field
  * @part helper - Helper text element
  * @part error - Error text element (`role="alert"`)
  * @part toolbar - Toolbar row below the field

package/dist/inputs/message-composer/message-composer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-composer.d.ts","sourceRoot":"","sources":["../../../src/inputs/message-composer/message-composer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAmBxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAG1B,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD,6CAA6C;AAC7C,MAAM,MAAM,wBAAwB,GAAG;IACrC,uDAAuD;IACvD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C;;;;OAIG;IACH,IAAI,EAAE;QAAE,aAAa,EAAE,aAAa,GAAG,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,uBAAuB,GAAG;IACpC,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACxD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8IAA8I;IAC9I,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,oBAAoB,EAAG,sBAA+B,CAAC"}
+{"version":3,"file":"message-composer.d.ts","sourceRoot":"","sources":["../../../src/inputs/message-composer/message-composer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAqBxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAG1B,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD,6CAA6C;AAC7C,MAAM,MAAM,wBAAwB,GAAG;IACrC,uDAAuD;IACvD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C;;;;OAIG;IACH,IAAI,EAAE;QAAE,aAAa,EAAE,aAAa,GAAG,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,uBAAuB,GAAG;IACpC,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACxD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8IAA8I;IAC9I,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,eAAO,MAAM,oBAAoB,EAAG,sBAA+B,CAAC"}

package/dist/inputs/number-input/number-input.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{min-width:var(--number-input-min-width,12rem);display:inline-flex}:host([fullwidth]){width:100%}.field{flex:1}.field::part(input){text-align:center}button[part=decrement-btn],button[part=increment-btn]{width:var(--size-6);min-width:var(--size-6);height:var(--size-6);min-height:var(--size-6);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}button[part=decrement-btn]:hover:not(:disabled),button[part=increment-btn]:hover:not(:disabled){color:var(--color-contrast-900);background:var(--color-contrast-150,var(--color-contrast-100))}button[part=decrement-btn]:active:not(:disabled),button[part=increment-btn]:active:not(:disabled){background:var(--color-contrast-200)}button[part=decrement-btn]:disabled,button[part=increment-btn]:disabled{cursor:not-allowed;opacity:.5}button[part=decrement-btn]:focus-visible,button[part=increment-btn]:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}}`;exports.default=e;
+var e=`@layer refine.base{:host{min-width:var(--number-input-min-width,12rem);display:inline-flex}:host([fullwidth]){width:100%}.field{flex:1}.field::part(input){text-align:center}button[part=decrement-btn],button[part=increment-btn]{width:var(--size-6);min-width:var(--size-6);height:var(--size-6);min-height:var(--size-6);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}button[part=decrement-btn]:hover:not(:disabled),button[part=increment-btn]:hover:not(:disabled){color:var(--color-contrast-900);background:var(--color-contrast-150,var(--color-contrast-100))}button[part=decrement-btn]:active:not(:disabled),button[part=increment-btn]:active:not(:disabled){background:var(--color-contrast-200)}button[part=decrement-btn]:disabled,button[part=increment-btn]:disabled{color:var(--color-contrast-300);cursor:not-allowed;background:0 0}button[part=decrement-btn]:focus-visible,button[part=increment-btn]:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}}:host([disabled]){opacity:1}`;exports.default=e;
 //# sourceMappingURL=number-input.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"number-input.css.cjs","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* No explicit `width` here, on purpose — matches every other field's own `:host` (`ore-input`,\n     `ore-select`, `ore-combobox`, `ore-date-picker`). A grid/flex item with `width: auto` (the\n     default) stretches to fill its track by default; the old `width: fit-content` here overrode\n     that default and forced this one field to shrink-wrap while every sibling field stretched to\n     match the column, e.g. in a 2-column form grid.\n     `min-width` is different: every field above sets the same `12rem` floor (each via its own\n     `--<field>-min-width` custom property) so that a row of mixed field types — this one included\n     — doesn't shrink-wrap to noticeably different widths purely because their *content* (a typed\n     number vs. a selected option's label vs. free text) happens to differ. */\n  :host {\n    display: inline-flex;\n    min-width: var(--number-input-min-width, 12rem);\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* The inner `ore-input` (class=\"field\", see number-input.ts) is a flex item of this `:host`'s\n     own `inline-flex` box — without `flex: 1` it only ever grows to its own `min-width` (12rem)\n     and no further, leaving this component visibly narrower than its host once the host itself\n     stretches to fill a wider grid/flex track (e.g. next to a full-width sibling field). `flex: 1`\n     lets it grow to match; its own `min-width` (inherited from `ore-input`'s `:host`) still holds\n     as the shrink floor, so this doesn't affect the min-width consistency across field types. */\n  .field {\n    flex: 1;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  /* Stepper buttons — slotted into ore-input's own prefix/suffix, so they render inside its\n     bordered box like its built-in clear/password-toggle buttons, not as separate controls. */\n  button[part='decrement-btn'],\n  button[part='increment-btn'] {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    min-width: var(--size-6);\n    height: var(--size-6);\n    min-height: var(--size-6);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  button[part='decrement-btn']:hover:not(:disabled),\n  button[part='increment-btn']:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-150, var(--color-contrast-100));\n  }\n\n  button[part='decrement-btn']:active:not(:disabled),\n  button[part='increment-btn']:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button[part='decrement-btn']:disabled,\n  button[part='increment-btn']:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  button[part='decrement-btn']:focus-visible,\n  button[part='increment-btn']:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: -2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"number-input.css.cjs","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* No explicit `width` here, on purpose — matches every other field's own `:host` (`ore-input`,\n     `ore-select`, `ore-combobox`, `ore-date-picker`). A grid/flex item with `width: auto` (the\n     default) stretches to fill its track by default; the old `width: fit-content` here overrode\n     that default and forced this one field to shrink-wrap while every sibling field stretched to\n     match the column, e.g. in a 2-column form grid.\n     `min-width` is different: every field above sets the same `12rem` floor (each via its own\n     `--<field>-min-width` custom property) so that a row of mixed field types — this one included\n     — doesn't shrink-wrap to noticeably different widths purely because their *content* (a typed\n     number vs. a selected option's label vs. free text) happens to differ. */\n  :host {\n    display: inline-flex;\n    min-width: var(--number-input-min-width, 12rem);\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* The inner `ore-input` (class=\"field\", see number-input.ts) is a flex item of this `:host`'s\n     own `inline-flex` box — without `flex: 1` it only ever grows to its own `min-width` (12rem)\n     and no further, leaving this component visibly narrower than its host once the host itself\n     stretches to fill a wider grid/flex track (e.g. next to a full-width sibling field). `flex: 1`\n     lets it grow to match; its own `min-width` (inherited from `ore-input`'s `:host`) still holds\n     as the shrink floor, so this doesn't affect the min-width consistency across field types. */\n  .field {\n    flex: 1;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  /* Stepper buttons — slotted into ore-input's own prefix/suffix, so they render inside its\n     bordered box like its built-in clear/password-toggle buttons, not as separate controls. */\n  button[part='decrement-btn'],\n  button[part='increment-btn'] {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    min-width: var(--size-6);\n    height: var(--size-6);\n    min-height: var(--size-6);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  button[part='decrement-btn']:hover:not(:disabled),\n  button[part='increment-btn']:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-150, var(--color-contrast-100));\n  }\n\n  button[part='decrement-btn']:active:not(:disabled),\n  button[part='increment-btn']:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button[part='decrement-btn']:disabled,\n  button[part='increment-btn']:disabled {\n    color: var(--color-contrast-300);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  button[part='decrement-btn']:focus-visible,\n  button[part='increment-btn']:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: -2px;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * `disabledStateMixin` (passed directly in `styles:`, not via `fieldMixins`) dims\n * `:host([disabled])` with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to\n * unlayered rules regardless of source order or specificity, so overriding that from inside any\n * `@layer` block in this file would be a no-op — this has to stay unlayered too, to actually win.\n * See `ore-input`'s `input.css` for the same pattern.\n *\n * The visible surface here is entirely the inner `ore-input`'s own `.field` (already fixed to a\n * grayscale look, not opacity) plus these slotted stepper buttons (muted via `:disabled` above,\n * also not opacity) — so this host itself needs no compensating background/color, just dropping\n * the blanket opacity that would otherwise wash out both of those over again.\n */\n:host([disabled]) {\n  opacity: 1;\n}\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 //#region src/inputs/number-input/number-input.css?inline
-var e = "@layer refine.base{:host{min-width:var(--number-input-min-width,12rem);display:inline-flex}:host([fullwidth]){width:100%}.field{flex:1}.field::part(input){text-align:center}button[part=decrement-btn],button[part=increment-btn]{width:var(--size-6);min-width:var(--size-6);height:var(--size-6);min-height:var(--size-6);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}button[part=decrement-btn]:hover:not(:disabled),button[part=increment-btn]:hover:not(:disabled){color:var(--color-contrast-900);background:var(--color-contrast-150,var(--color-contrast-100))}button[part=decrement-btn]:active:not(:disabled),button[part=increment-btn]:active:not(:disabled){background:var(--color-contrast-200)}button[part=decrement-btn]:disabled,button[part=increment-btn]:disabled{cursor:not-allowed;opacity:.5}button[part=decrement-btn]:focus-visible,button[part=increment-btn]:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}}";
+var e = "@layer refine.base{:host{min-width:var(--number-input-min-width,12rem);display:inline-flex}:host([fullwidth]){width:100%}.field{flex:1}.field::part(input){text-align:center}button[part=decrement-btn],button[part=increment-btn]{width:var(--size-6);min-width:var(--size-6);height:var(--size-6);min-height:var(--size-6);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}button[part=decrement-btn]:hover:not(:disabled),button[part=increment-btn]:hover:not(:disabled){color:var(--color-contrast-900);background:var(--color-contrast-150,var(--color-contrast-100))}button[part=decrement-btn]:active:not(:disabled),button[part=increment-btn]:active:not(:disabled){background:var(--color-contrast-200)}button[part=decrement-btn]:disabled,button[part=increment-btn]:disabled{color:var(--color-contrast-300);cursor:not-allowed;background:0 0}button[part=decrement-btn]:focus-visible,button[part=increment-btn]:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}}:host([disabled]){opacity:1}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"number-input.css.js","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* No explicit `width` here, on purpose — matches every other field's own `:host` (`ore-input`,\n     `ore-select`, `ore-combobox`, `ore-date-picker`). A grid/flex item with `width: auto` (the\n     default) stretches to fill its track by default; the old `width: fit-content` here overrode\n     that default and forced this one field to shrink-wrap while every sibling field stretched to\n     match the column, e.g. in a 2-column form grid.\n     `min-width` is different: every field above sets the same `12rem` floor (each via its own\n     `--<field>-min-width` custom property) so that a row of mixed field types — this one included\n     — doesn't shrink-wrap to noticeably different widths purely because their *content* (a typed\n     number vs. a selected option's label vs. free text) happens to differ. */\n  :host {\n    display: inline-flex;\n    min-width: var(--number-input-min-width, 12rem);\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* The inner `ore-input` (class=\"field\", see number-input.ts) is a flex item of this `:host`'s\n     own `inline-flex` box — without `flex: 1` it only ever grows to its own `min-width` (12rem)\n     and no further, leaving this component visibly narrower than its host once the host itself\n     stretches to fill a wider grid/flex track (e.g. next to a full-width sibling field). `flex: 1`\n     lets it grow to match; its own `min-width` (inherited from `ore-input`'s `:host`) still holds\n     as the shrink floor, so this doesn't affect the min-width consistency across field types. */\n  .field {\n    flex: 1;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  /* Stepper buttons — slotted into ore-input's own prefix/suffix, so they render inside its\n     bordered box like its built-in clear/password-toggle buttons, not as separate controls. */\n  button[part='decrement-btn'],\n  button[part='increment-btn'] {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    min-width: var(--size-6);\n    height: var(--size-6);\n    min-height: var(--size-6);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  button[part='decrement-btn']:hover:not(:disabled),\n  button[part='increment-btn']:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-150, var(--color-contrast-100));\n  }\n\n  button[part='decrement-btn']:active:not(:disabled),\n  button[part='increment-btn']:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button[part='decrement-btn']:disabled,\n  button[part='increment-btn']:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  button[part='decrement-btn']:focus-visible,\n  button[part='increment-btn']:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: -2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"number-input.css.js","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* No explicit `width` here, on purpose — matches every other field's own `:host` (`ore-input`,\n     `ore-select`, `ore-combobox`, `ore-date-picker`). A grid/flex item with `width: auto` (the\n     default) stretches to fill its track by default; the old `width: fit-content` here overrode\n     that default and forced this one field to shrink-wrap while every sibling field stretched to\n     match the column, e.g. in a 2-column form grid.\n     `min-width` is different: every field above sets the same `12rem` floor (each via its own\n     `--<field>-min-width` custom property) so that a row of mixed field types — this one included\n     — doesn't shrink-wrap to noticeably different widths purely because their *content* (a typed\n     number vs. a selected option's label vs. free text) happens to differ. */\n  :host {\n    display: inline-flex;\n    min-width: var(--number-input-min-width, 12rem);\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* The inner `ore-input` (class=\"field\", see number-input.ts) is a flex item of this `:host`'s\n     own `inline-flex` box — without `flex: 1` it only ever grows to its own `min-width` (12rem)\n     and no further, leaving this component visibly narrower than its host once the host itself\n     stretches to fill a wider grid/flex track (e.g. next to a full-width sibling field). `flex: 1`\n     lets it grow to match; its own `min-width` (inherited from `ore-input`'s `:host`) still holds\n     as the shrink floor, so this doesn't affect the min-width consistency across field types. */\n  .field {\n    flex: 1;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  /* Stepper buttons — slotted into ore-input's own prefix/suffix, so they render inside its\n     bordered box like its built-in clear/password-toggle buttons, not as separate controls. */\n  button[part='decrement-btn'],\n  button[part='increment-btn'] {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    min-width: var(--size-6);\n    height: var(--size-6);\n    min-height: var(--size-6);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  button[part='decrement-btn']:hover:not(:disabled),\n  button[part='increment-btn']:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-150, var(--color-contrast-100));\n  }\n\n  button[part='decrement-btn']:active:not(:disabled),\n  button[part='increment-btn']:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button[part='decrement-btn']:disabled,\n  button[part='increment-btn']:disabled {\n    color: var(--color-contrast-300);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  button[part='decrement-btn']:focus-visible,\n  button[part='increment-btn']:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: -2px;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * `disabledStateMixin` (passed directly in `styles:`, not via `fieldMixins`) dims\n * `:host([disabled])` with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to\n * unlayered rules regardless of source order or specificity, so overriding that from inside any\n * `@layer` block in this file would be a no-op — this has to stay unlayered too, to actually win.\n * See `ore-input`'s `input.css` for the same pattern.\n *\n * The visible surface here is entirely the inner `ore-input`'s own `.field` (already fixed to a\n * grayscale look, not opacity) plus these slotted stepper buttons (muted via `:disabled` above,\n * also not opacity) — so this host itself needs no compensating background/color, just dropping\n * the blanket opacity that would otherwise wash out both of those over again.\n */\n:host([disabled]) {\n  opacity: 1;\n}\n"],"mappings":""}