@vielzeug/refine 3.1.0 → 3.2.1

package/dist/content/stepper/step.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;display:flex}.label{gap:var(--size-1);min-width:0;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}`;exports.default=e;
+var e=`@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;max-width:100%;display:flex}.label{gap:var(--size-1);min-width:0;max-width:100%;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}`;exports.default=e;
 //# sourceMappingURL=step.css.cjs.map

package/dist/content/stepper/step.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"step.css.cjs","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}

package/dist/content/stepper/step.css.js

@@ -1,5 +1,5 @@
 //#region src/content/stepper/step.css?inline
-var e = "@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;display:flex}.label{gap:var(--size-1);min-width:0;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}";
+var e = "@layer refine.base{:host{--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2);flex:1;min-width:0;display:flex}.step{box-sizing:border-box;align-items:center;width:100%;list-style:none;display:flex;position:relative}.connector{top:calc(var(--size-1) + var(--step-indicator-size) / 2);width:calc(50% - var(--step-indicator-size) / 2);height:var(--stepper-connector-size,2px);background:var(--stepper-connector-color,var(--color-contrast-200));border-radius:var(--rounded-full);transition:background var(--transition-fast);position:absolute;transform:translateY(-50%)}.connector-leading{left:0}.connector-trailing{right:0}:host(:first-of-type) .connector-leading,:host(:last-of-type) .connector-trailing{display:none}.control{all:unset;box-sizing:border-box;gap:var(--step-gap);width:100%;min-width:0;padding:var(--size-1);cursor:default;border-radius:var(--rounded-lg);flex-direction:column;flex:auto;align-items:center;font-family:inherit;display:flex;position:relative}button.control{min-height:var(--_touch-target,auto);cursor:pointer;transition:background var(--transition-fast)}button.control:focus-visible{outline:var(--border-2) solid var(--_theme-base,var(--color-contrast-500));outline-offset:var(--border-2)}button.control[aria-disabled=true]{cursor:not-allowed;opacity:.5}.indicator{box-sizing:border-box;width:var(--step-indicator-size);height:var(--step-indicator-size);font-size:var(--step-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-500);background:var(--color-contrast-100);border:var(--border-2) solid var(--color-contrast-200);border-radius:var(--rounded-full);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);flex:none;justify-content:center;align-items:center;display:flex}.icon-slot[hidden]{display:none}.number{line-height:1}.content{text-align:center;flex-direction:column;flex:auto;align-items:center;min-width:0;max-width:100%;display:flex}.label{gap:var(--size-1);min-width:0;max-width:100%;font-size:var(--step-font-size);font-weight:var(--font-medium);color:var(--color-contrast-700);justify-content:center;align-items:baseline;display:flex}.label-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.optional-hint{font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--color-contrast-400);flex:none}.description{font-size:var(--text-xs);color:var(--color-contrast-500)}.description[hidden]{display:none}.sr-only{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer refine.states{:host([current]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-base,var(--color-contrast-800));border-color:var(--_theme-base,var(--color-contrast-800))}:host([current]) .label{font-weight:var(--font-semibold);color:var(--color-contrast-900)}:host([completed]) .indicator{color:var(--_theme-contrast,var(--color-canvas));background:var(--_theme-focus,var(--color-contrast-600));border-color:var(--_theme-focus,var(--color-contrast-600))}:host([completed]) .connector,:host([current]) .connector-leading{background:var(--_theme-focus,var(--color-contrast-400))}:host([error]) .indicator{color:var(--color-canvas);background:var(--color-error);border-color:var(--color-error)}:host([error]) .label{color:var(--color-error)}:host([disabled]) .label,:host([disabled]) .description{color:var(--color-contrast-400)}:host([disabled]) .indicator{opacity:.6}}@layer refine.sizes{:host([size=sm]){--step-indicator-size:var(--size-6);--step-font-size:var(--text-xs);--step-gap:var(--size-1-5)}:host(:not([size])),:host([size=md]){--step-indicator-size:var(--size-8);--step-font-size:var(--text-sm);--step-gap:var(--size-2)}:host([size=lg]){--step-indicator-size:var(--size-10);--step-font-size:var(--text-base);--step-gap:var(--size-2-5)}@media (pointer:coarse){:host(:not([size])),:host([size=sm]),:host([size=md]){--step-indicator-size:var(--size-9);--step-font-size:var(--text-sm)}}}@layer refine.orientation{:host([orientation=vertical]){flex:none;width:100%}:host([orientation=vertical]) .step{padding-top:var(--stepper-gap,var(--size-4));align-items:flex-start}:host([orientation=vertical]:first-of-type) .step{padding-top:0}:host([orientation=vertical]) .control{flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .content{text-align:left;align-items:flex-start}:host([orientation=vertical]) .label{justify-content:flex-start}:host([orientation=vertical]) .connector-leading{top:0;left:calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:calc(var(--stepper-gap,var(--size-4)) + var(--size-1));transform:translate(-50%)}:host([orientation=vertical]) .connector-trailing{inset:calc(var(--stepper-gap,var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0 calc(var(--size-1) + var(--step-indicator-size) / 2);width:var(--stepper-connector-size,2px);height:auto;transform:translate(-50%)}:host([orientation=vertical]:first-of-type) .connector-trailing{top:calc(var(--size-1) + var(--step-indicator-size))}}@media (forced-colors:active){.indicator{border:1px solid buttontext}:host([current]) .indicator,:host([completed]) .indicator{border:1px solid highlight}}";
 //#endregion
 export { e as default };
 

package/dist/content/stepper/step.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox/checkbox.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}:host(:focus-visible) .box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}:host(:focus-visible) .box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{min-width:0;font-size:var(--_font-size);color:var(--color-contrast);flex:1 1 0}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
 //# sourceMappingURL=checkbox.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.css.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"checkbox.css.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    flex: 1 1 0;\n    min-width: 0;\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox/checkbox.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/checkbox/checkbox.css?inline
-var e = "@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}:host(:focus-visible) .box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
+var e = "@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}:host(:focus-visible) .box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{min-width:0;font-size:var(--_font-size);color:var(--color-contrast);flex:1 1 0}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    flex: 1 1 0;\n    min-width: 0;\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

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;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(: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)}.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;
+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{box-sizing:border-box;gap:var(--message-composer-gap,var(--_gap));width:100%;min-width:0;max-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(: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)}.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    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":""}
+{"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    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    min-width: 0;\n    max-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;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(: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)}.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)}";
+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{box-sizing:border-box;gap:var(--message-composer-gap,var(--_gap));width:100%;min-width:0;max-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(: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)}.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    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":""}
+{"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    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    min-width: 0;\n    max-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/radio/radio.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{min-width:0;font-size:var(--_font-size);color:var(--color-contrast);flex:1 1 0}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
 //# sourceMappingURL=radio.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.css.cjs","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"radio.css.cjs","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    flex: 1 1 0;\n    min-width: 0;\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/radio/radio.css?inline
-var e = "@layer refine.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
+var e = "@layer refine.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{min-width:0;font-size:var(--_font-size);color:var(--color-contrast);flex:1 1 0}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"radio.css.js","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"radio.css.js","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    flex: 1 1 0;\n    min-width: 0;\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM7E,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM7E,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}