@vielzeug/refine 3.2.1 → 3.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"input.css.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_label-block-inset: var(--input-label-block-inset, var(--size-2));\n    --_label-inset: var(--input-label-inset, var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--_label-block-inset);\n    inset-inline-start: var(--_label-inset);\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--_label-block-inset) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    font-size: var(--text-xs);\n    line-height: var(--leading-loose);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    min-height: var(--size-6);\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Success State (Signal 04)\n       ======================================== */\n\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (Signals 03/04: error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\n  }\n\n  /* ========================================\n       Loading Spinner (Signal 06)\n       ======================================== */\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .field-spinner {\n    display: none;\n    flex-shrink: 0;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    box-shadow: none;\n  }\n\n  /*\n   * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n   * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n   * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n   * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n   * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n   * fixed for `ore-otp-input`'s focus ring.\n   */\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State (Signal 05) — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) input {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}
+{"version":3,"file":"input.css.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_label-block-inset: var(--input-label-block-inset, var(--size-2));\n    --_label-inset: var(--input-label-inset, var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--_label-block-inset);\n    inset-inline-start: var(--_label-inset);\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--_label-block-inset) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    font-size: var(--text-xs);\n    line-height: var(--leading-loose);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    min-height: var(--size-6);\n    text-overflow: ellipsis;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Success State (Signal 04)\n       ======================================== */\n\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (Signals 03/04: error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\n  }\n\n  /* ========================================\n       Loading Spinner (Signal 06)\n       ======================================== */\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .field-spinner {\n    display: none;\n    flex-shrink: 0;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    box-shadow: none;\n  }\n\n  /*\n   * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n   * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n   * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n   * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n   * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n   * fixed for `ore-otp-input`'s focus ring.\n   */\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Full width: fill the track and never overflow it — a `fullwidth` field in a track narrower\n     than the 12rem floor shrinks with the track instead of pushing past it. */\n  :host([fullwidth]) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n     Disabled State (Signal 05) — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) input {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}

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

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

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

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

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

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

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

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

package/dist/inputs/qr-scanner/qr-scanner.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_radius:var(--qr-scanner-radius,var(--rounded-md));--_bg:var(--qr-scanner-bg,var(--color-contrast-100));--_viewfinder-color:var(--qr-scanner-viewfinder-color,var(--color-primary));--_status-color:var(--qr-scanner-status-color,var(--text-color-secondary));display:inline-block}:host([hidden]){display:none}.wrapper{--_size:var(--qr-scanner-size,var(--_size-px,280px));gap:var(--size-2);flex-direction:column;align-items:center;max-width:100%;display:inline-flex}.stage{width:var(--_size);max-width:100%;height:var(--_size);background:var(--_bg);border-radius:var(--_radius);position:relative;overflow:hidden}video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.viewfinder{inset:var(--size-4);pointer-events:none;border:var(--border-width,1px) solid var(--_viewfinder-color);border-radius:var(--_radius);position:absolute;box-shadow:0 0 0 9999px #00000026}.overlay{pointer-events:none;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0}.overlay ::slotted(*){pointer-events:auto}.state{box-sizing:border-box;gap:var(--size-2);padding:var(--size-4);color:var(--text-color-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.state-text{font-size:var(--text-sm);overflow-wrap:anywhere}.status{max-width:var(--_size);font-size:var(--text-sm);color:var(--_status-color);text-align:center;overflow-wrap:anywhere}.controls{gap:var(--size-2);display:flex}}`;exports.default=e;
+//# sourceMappingURL=qr-scanner.css.cjs.map

package/dist/inputs/qr-scanner/qr-scanner.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner.css.cjs","names":[],"sources":["../../../src/inputs/qr-scanner/qr-scanner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--qr-scanner-radius, var(--rounded-md));\n    --_bg: var(--qr-scanner-bg, var(--color-contrast-100));\n    --_viewfinder-color: var(--qr-scanner-viewfinder-color, var(--color-primary));\n    --_status-color: var(--qr-scanner-status-color, var(--text-color-secondary));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .wrapper {\n    /* --_size resolves here (not :host) so it can see the inline --_size-px set on this element. */\n    --_size: var(--qr-scanner-size, var(--_size-px, 280px));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    max-width: 100%;\n  }\n\n  .stage {\n    position: relative;\n    width: var(--_size);\n    max-width: 100%;\n    height: var(--_size);\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .viewfinder {\n    position: absolute;\n    inset: var(--size-4);\n    pointer-events: none;\n    border: var(--border-width, 1px) solid var(--_viewfinder-color);\n    border-radius: var(--_radius);\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.15);\n  }\n\n  .overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  .overlay ::slotted(*) {\n    pointer-events: auto;\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-4);\n    color: var(--text-color-secondary);\n    text-align: center;\n  }\n\n  .state-text {\n    font-size: var(--text-sm);\n    overflow-wrap: anywhere;\n  }\n\n  .status {\n    max-width: var(--_size);\n    font-size: var(--text-sm);\n    color: var(--_status-color);\n    text-align: center;\n    overflow-wrap: anywhere;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/inputs/qr-scanner/qr-scanner.css.js

@@ -0,0 +1,6 @@
+//#region src/inputs/qr-scanner/qr-scanner.css?inline
+var e = "@layer refine.base{:host{--_radius:var(--qr-scanner-radius,var(--rounded-md));--_bg:var(--qr-scanner-bg,var(--color-contrast-100));--_viewfinder-color:var(--qr-scanner-viewfinder-color,var(--color-primary));--_status-color:var(--qr-scanner-status-color,var(--text-color-secondary));display:inline-block}:host([hidden]){display:none}.wrapper{--_size:var(--qr-scanner-size,var(--_size-px,280px));gap:var(--size-2);flex-direction:column;align-items:center;max-width:100%;display:inline-flex}.stage{width:var(--_size);max-width:100%;height:var(--_size);background:var(--_bg);border-radius:var(--_radius);position:relative;overflow:hidden}video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.viewfinder{inset:var(--size-4);pointer-events:none;border:var(--border-width,1px) solid var(--_viewfinder-color);border-radius:var(--_radius);position:absolute;box-shadow:0 0 0 9999px #00000026}.overlay{pointer-events:none;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0}.overlay ::slotted(*){pointer-events:auto}.state{box-sizing:border-box;gap:var(--size-2);padding:var(--size-4);color:var(--text-color-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.state-text{font-size:var(--text-sm);overflow-wrap:anywhere}.status{max-width:var(--_size);font-size:var(--text-sm);color:var(--_status-color);text-align:center;overflow-wrap:anywhere}.controls{gap:var(--size-2);display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=qr-scanner.css.js.map

package/dist/inputs/qr-scanner/qr-scanner.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner.css.js","names":[],"sources":["../../../src/inputs/qr-scanner/qr-scanner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--qr-scanner-radius, var(--rounded-md));\n    --_bg: var(--qr-scanner-bg, var(--color-contrast-100));\n    --_viewfinder-color: var(--qr-scanner-viewfinder-color, var(--color-primary));\n    --_status-color: var(--qr-scanner-status-color, var(--text-color-secondary));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .wrapper {\n    /* --_size resolves here (not :host) so it can see the inline --_size-px set on this element. */\n    --_size: var(--qr-scanner-size, var(--_size-px, 280px));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    max-width: 100%;\n  }\n\n  .stage {\n    position: relative;\n    width: var(--_size);\n    max-width: 100%;\n    height: var(--_size);\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .viewfinder {\n    position: absolute;\n    inset: var(--size-4);\n    pointer-events: none;\n    border: var(--border-width, 1px) solid var(--_viewfinder-color);\n    border-radius: var(--_radius);\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.15);\n  }\n\n  .overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  .overlay ::slotted(*) {\n    pointer-events: auto;\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-4);\n    color: var(--text-color-secondary);\n    text-align: center;\n  }\n\n  .state-text {\n    font-size: var(--text-sm);\n    overflow-wrap: anywhere;\n  }\n\n  .status {\n    max-width: var(--_size);\n    font-size: var(--text-sm);\n    color: var(--_status-color);\n    text-align: center;\n    overflow-wrap: anywhere;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/inputs/qr-scanner/qr-scanner.d.ts

@@ -0,0 +1,87 @@
+import { type QrScanner, type QrScannerOptions, SigilError } from '@vielzeug/sigil';
+import type { ComponentSize, RoundedSize } from '../../types';
+import '../../content/icon/icon';
+import '../button/button';
+/** Testing hook — inject a fake `createQrScanner` without touching globals. */
+export type QrScannerFactory = (options: QrScannerOptions) => QrScanner;
+/** Component-level view states; sigil's transport states are mapped onto these. */
+export type OreQrScannerStatus = 'idle' | 'starting' | 'scanning' | 'result' | 'unsupported' | 'denied' | 'error';
+/** QR scanner component properties */
+export type OreQrScannerProps = {
+    /** Start/stop the camera externally; mirrors into internal intent on change */
+    active?: boolean;
+    /** Preferred camera: 'environment' (rear) or 'user' (front) */
+    'facing-mode'?: 'environment' | 'user';
+    /** Minimum ms between detection passes */
+    interval?: number;
+    /** Accessible label for the scanner region */
+    label?: string;
+    /** Stop after the first successful scan (default true) */
+    once?: boolean;
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** JS-only testing hook: custom scanner factory (defaults to `createQrScanner`) */
+    scannerFactory?: QrScannerFactory;
+    /** Preview size: named scale or pixel number */
+    size?: ComponentSize | number;
+};
+/** QR scanner component events */
+export type OreQrScannerEvents = {
+    /** Emitted on every successful decode. detail: `{ value }` */
+    scan: {
+        value: string;
+    };
+    /** Emitted on permission, support, or detection failure. detail: `{ error }` */
+    error: {
+        error: SigilError;
+    };
+    /** Emitted on every view-state transition. detail: `{ status }` */
+    status: {
+        status: OreQrScannerStatus;
+    };
+};
+/**
+ * Camera QR scanner built on `createQrScanner` (native `BarcodeDetector`).
+ * `active` starts/stops the camera externally; internal Start/Stop controls
+ * drive the same intent. Unsupported browsers render the `unsupported` slot
+ * so apps can substitute a paste fallback.
+ *
+ * @element ore-qr-scanner
+ *
+ * @attr {boolean} active - Start/stop the camera
+ * @attr {string} facing-mode - 'environment' | 'user' (default 'environment')
+ * @attr {number} interval - Ms between detection passes (default 200)
+ * @attr {boolean} once - Stop after first scan (default true)
+ * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value
+ * @attr {string} label - Region label (default "QR code scanner")
+ * @attr {string} rounded - Border radius
+ *
+ * @fires scan - detail: `{ value }` on each decode
+ * @fires error - detail: `{ error }` on permission/support/detection failure
+ * @fires status - detail: `{ status }` on view-state transitions
+ *
+ * @slot overlay - Content layered over the camera preview
+ * @slot unsupported - Fallback UI when scanning is unsupported (e.g. paste input)
+ * @slot footer - Extra content below the status row
+ *
+ * @cssprop --qr-scanner-size - Preview edge length in px (overrides `size`)
+ * @cssprop --qr-scanner-radius - Border radius
+ * @cssprop --qr-scanner-bg - Preview background while idle
+ * @cssprop --qr-scanner-viewfinder-color - Viewfinder frame color
+ * @cssprop --qr-scanner-status-color - Status text color
+ *
+ * @part wrapper - Outer container
+ * @part stage - Square preview area (video + overlays)
+ * @part video - The `<video>` preview element
+ * @part viewfinder - Decorative scan frame over the preview
+ * @part state - Idle/error/denied/unsupported/result panel
+ * @part status - Live status line
+ * @part controls - Button row
+ *
+ * @example
+ * ```html
+ * <ore-qr-scanner active @scan=${(e) => pair(e.detail.value)}></ore-qr-scanner>
+ * ```
+ */
+export declare const QR_SCANNER_TAG: "ore-qr-scanner";
+//# sourceMappingURL=qr-scanner.d.ts.map

package/dist/inputs/qr-scanner/qr-scanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner.d.ts","sourceRoot":"","sources":["../../../src/inputs/qr-scanner/qr-scanner.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,gBAAgB,EAErB,UAAU,EAGX,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAG1B,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,gBAAgB,KAAK,SAAS,CAAC;AAExE,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElH,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACvC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,mFAAmF;IACnF,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,gDAAgD;IAChD,IAAI,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;CAC/B,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8DAA8D;IAC9D,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,gFAAgF;IAChF,KAAK,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,CAAC;IAC7B,mEAAmE;IACnE,MAAM,EAAE;QAAE,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;CACxC,CAAC;AAgBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,cAAc,EAAG,gBAAyB,CAAC"}

package/dist/inputs/select/select.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader: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))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown: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))){text-align:left}.dropdown: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)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason: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))){text-align:right}.disabled-reason: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)){text-align:left}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-500);text-align:center}}`;exports.default=e;
+var e=`@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;min-width:0;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader: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))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown: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))){text-align:left}.dropdown: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)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason: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))){text-align:right}.disabled-reason: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)){text-align:left}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-500);text-align:center}}`;exports.default=e;
 //# sourceMappingURL=select.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.css.cjs","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-block;\n    min-width: var(--select-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  /* ore-input is readonly so pointer defaults to text — override to pointer.\n     `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n     flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n     children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n     only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n     select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n     narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* Chips slot inside ore-input prefix */\n  .chips-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden] {\n    display: none;\n  }\n\n  /* Suffix: loader (left) + chevron (right) */\n  .trigger-suffix {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .disabled-reason {\n    flex: 0 1 45%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--text-color-tertiary);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-500);\n    cursor: not-allowed;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check {\n    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"select.css.cjs","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-block;\n    min-width: var(--select-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n    min-width: 0;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  /* ore-input is readonly so pointer defaults to text — override to pointer.\n     `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n     flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n     children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n     only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n     select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n     narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* Chips slot inside ore-input prefix */\n  .chips-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden] {\n    display: none;\n  }\n\n  /* Suffix: loader (left) + chevron (right) */\n  .trigger-suffix {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .disabled-reason {\n    flex: 0 1 45%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--text-color-tertiary);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-500);\n    cursor: not-allowed;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check {\n    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/select/select.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/select/select.css?inline
-var e = "@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader: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))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown: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))){text-align:left}.dropdown: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)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason: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))){text-align:right}.disabled-reason: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)){text-align:left}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-500);text-align:center}}";
+var e = "@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;min-width:0;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader: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))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown: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))){text-align:left}.dropdown: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)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason: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))){text-align:right}.disabled-reason: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)){text-align:left}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-500);text-align:center}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"select.css.js","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-block;\n    min-width: var(--select-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  /* ore-input is readonly so pointer defaults to text — override to pointer.\n     `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n     flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n     children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n     only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n     select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n     narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* Chips slot inside ore-input prefix */\n  .chips-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden] {\n    display: none;\n  }\n\n  /* Suffix: loader (left) + chevron (right) */\n  .trigger-suffix {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .disabled-reason {\n    flex: 0 1 45%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--text-color-tertiary);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-500);\n    cursor: not-allowed;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check {\n    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"select.css.js","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-block;\n    min-width: var(--select-min-width, 12rem);\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n    min-width: 0;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  /* ore-input is readonly so pointer defaults to text — override to pointer.\n     `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n     flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n     children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n     only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n     select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n     narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n  .trigger {\n    width: 100%;\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* Chips slot inside ore-input prefix */\n  .chips-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden] {\n    display: none;\n  }\n\n  /* Suffix: loader (left) + chevron (right) */\n  .trigger-suffix {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .trigger-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .disabled-reason {\n    flex: 0 1 45%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--text-color-tertiary);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-500);\n    cursor: not-allowed;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check {\n    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/slider/slider.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_size:var(--slider-size,var(--size-5));--_height:var(--slider-height,var(--size-1));--_track:var(--slider-track-bg,var(--color-contrast-300));--_fill:var(--slider-fill,var(--color-neutral));--_thumb:var(--slider-thumb-bg,var(--color-contrast-50));--_thumb-size:var(--_size);--_thumb-inset:var(--slider-thumb-inset,var(--size-2-5));--_touch-target:var(--size-11);--_font-size:var(--text-sm);--_shadow:var(--color-neutral-focus-shadow);gap:var(--_gap,var(--size-3));min-width:var(--slider-min-width,12rem);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex;position:relative}:host([fullwidth]){width:100%}}.slider-container{box-sizing:border-box;width:100%;min-height:var(--_touch-target);padding-inline:var(--_thumb-inset);flex:1;align-items:center;display:flex;position:relative}.slider-track{width:100%;height:var(--_height);background:var(--_track);border-radius:var(--rounded-full);position:relative}.slider-fill{top:0;left:var(--_fill-start,0%);width:var(--_fill-width,0%);background:var(--_fill);border-radius:var(--rounded-full);height:100%;transition:var(--_motion-transition,left var(--transition-fast), width var(--transition-fast));position:absolute}:host([data-dragging]) .slider-fill{transition:none}.slider-thumb{z-index:1;box-sizing:border-box;width:var(--_thumb-size);height:var(--_thumb-size);cursor:grab;background:var(--_thumb);border:2px solid var(--_fill);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:var(--_motion-transition,box-shadow var(--transition-fast), left var(--transition-fast));will-change:transform;position:absolute;top:50%;transform:translate(-50%,-50%)}:host([data-dragging]) .slider-thumb{cursor:grabbing;box-shadow:var(--_shadow);transition:var(--_motion-transition,box-shadow var(--transition-fast))}.slider-thumb-sole{left:var(--_thumb-pos,0%)}:host(:focus-visible) .slider-thumb-sole,:host(:active) .slider-thumb-sole{box-shadow:var(--_shadow)}.slider-thumb-start{left:var(--_thumb-start,0%)}.slider-thumb-end{left:var(--_thumb-end,100%)}.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{z-index:2;outline:var(--border-2) solid var(--_fill);outline-offset:var(--size-0-5);box-shadow:var(--_shadow)}:host(:not([range])) .slider-thumb-start,:host(:not([range])) .slider-thumb-end,:host([range]) .slider-thumb-sole{display:none}@media (hover:hover){:host(:not([disabled])) .slider-thumb:hover{box-shadow:var(--_shadow)}}@media (forced-colors:active){:host(:focus-visible) .slider-thumb-sole,.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}@layer refine.overrides{:host{--_fill:var(--slider-fill,var(--_theme-base));--_shadow:var(--_theme-shadow)}}.label{font-size:var(--_font-size);color:var(--color-contrast);white-space:nowrap}.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[role=alert]{color:var(--color-error)}`;exports.default=e;
+var e=`@layer refine.base{:host{--_size:var(--slider-size,var(--size-5));--_height:var(--slider-height,var(--size-1));--_track:var(--slider-track-bg,var(--color-contrast-300));--_fill:var(--slider-fill,var(--color-neutral));--_thumb:var(--slider-thumb-bg,var(--color-contrast-50));--_thumb-size:var(--_size);--_thumb-inset:var(--slider-thumb-inset,var(--size-2-5));--_touch-target:var(--size-11);--_font-size:var(--text-sm);--_shadow:var(--color-neutral-focus-shadow);gap:var(--_gap,var(--size-3));min-width:var(--slider-min-width,12rem);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex;position:relative}:host([fullwidth]){width:100%;min-width:0}}.slider-container{box-sizing:border-box;width:100%;min-height:var(--_touch-target);padding-inline:var(--_thumb-inset);flex:1;align-items:center;display:flex;position:relative}.slider-track{width:100%;height:var(--_height);background:var(--_track);border-radius:var(--rounded-full);position:relative}.slider-fill{top:0;left:var(--_fill-start,0%);width:var(--_fill-width,0%);background:var(--_fill);border-radius:var(--rounded-full);height:100%;transition:var(--_motion-transition,left var(--transition-fast), width var(--transition-fast));position:absolute}:host([data-dragging]) .slider-fill{transition:none}.slider-thumb{z-index:1;box-sizing:border-box;width:var(--_thumb-size);height:var(--_thumb-size);cursor:grab;background:var(--_thumb);border:2px solid var(--_fill);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:var(--_motion-transition,box-shadow var(--transition-fast), left var(--transition-fast));will-change:transform;position:absolute;top:50%;transform:translate(-50%,-50%)}:host([data-dragging]) .slider-thumb{cursor:grabbing;box-shadow:var(--_shadow);transition:var(--_motion-transition,box-shadow var(--transition-fast))}.slider-thumb-sole{left:var(--_thumb-pos,0%)}:host(:focus-visible) .slider-thumb-sole,:host(:active) .slider-thumb-sole{box-shadow:var(--_shadow)}.slider-thumb-start{left:var(--_thumb-start,0%)}.slider-thumb-end{left:var(--_thumb-end,100%)}.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{z-index:2;outline:var(--border-2) solid var(--_fill);outline-offset:var(--size-0-5);box-shadow:var(--_shadow)}:host(:not([range])) .slider-thumb-start,:host(:not([range])) .slider-thumb-end,:host([range]) .slider-thumb-sole{display:none}@media (hover:hover){:host(:not([disabled])) .slider-thumb:hover{box-shadow:var(--_shadow)}}@media (forced-colors:active){:host(:focus-visible) .slider-thumb-sole,.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}@layer refine.overrides{:host{--_fill:var(--slider-fill,var(--_theme-base));--_shadow:var(--_theme-shadow)}}.label{font-size:var(--_font-size);color:var(--color-contrast);white-space:nowrap}.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[role=alert]{color:var(--color-error)}`;exports.default=e;
 //# sourceMappingURL=slider.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.css.cjs","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  /* No unconditional `width: 100%` here, on purpose — matches every other field's own `:host`\n     (`ore-input`, `ore-select`, `ore-number-input`, `ore-combobox`, `ore-date-picker`): shrink to\n     `min-width` by default, opt into full width via `:host([fullwidth])` below. A hardcoded\n     `width: 100%` here (the previous default) meant the slider always claimed the entire row in\n     a flex layout regardless of layout intent — e.g. sitting next to a label/hint column in a\n     settings-style row, it forced that column down to near its text's min-content width instead\n     of sharing the row the way a same-row `ore-select`/`ore-number-input` naturally does. */\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-1));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-50));\n    --_thumb-size: var(--_size);\n    --_thumb-inset: var(--slider-thumb-inset, var(--size-2-5));\n    --_touch-target: var(--size-11);\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    min-width: var(--slider-min-width, 12rem);\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  min-height: var(--_touch-target);\n  padding-inline: var(--_thumb-inset);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition: var(--_motion-transition, left var(--transition-fast), width var(--transition-fast));\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  box-sizing: border-box;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast), left var(--transition-fast));\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  cursor: grabbing;\n  box-shadow: var(--_shadow);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast));\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: var(--size-0-5);\n  box-shadow: var(--_shadow);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .slider-thumb:hover {\n    box-shadow: var(--_shadow);\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:focus-visible) .slider-thumb-sole,\n  .slider-thumb-start:focus-visible,\n  .slider-thumb-end:focus-visible {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\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"],"mappings":""}
+{"version":3,"file":"slider.css.cjs","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  /* No unconditional `width: 100%` here, on purpose — matches every other field's own `:host`\n     (`ore-input`, `ore-select`, `ore-number-input`, `ore-combobox`, `ore-date-picker`): shrink to\n     `min-width` by default, opt into full width via `:host([fullwidth])` below. A hardcoded\n     `width: 100%` here (the previous default) meant the slider always claimed the entire row in\n     a flex layout regardless of layout intent — e.g. sitting next to a label/hint column in a\n     settings-style row, it forced that column down to near its text's min-content width instead\n     of sharing the row the way a same-row `ore-select`/`ore-number-input` naturally does. */\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-1));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-50));\n    --_thumb-size: var(--_size);\n    --_thumb-inset: var(--slider-thumb-inset, var(--size-2-5));\n    --_touch-target: var(--size-11);\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    min-width: var(--slider-min-width, 12rem);\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  min-height: var(--_touch-target);\n  padding-inline: var(--_thumb-inset);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition: var(--_motion-transition, left var(--transition-fast), width var(--transition-fast));\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  box-sizing: border-box;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast), left var(--transition-fast));\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  cursor: grabbing;\n  box-shadow: var(--_shadow);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast));\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: var(--size-0-5);\n  box-shadow: var(--_shadow);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .slider-thumb:hover {\n    box-shadow: var(--_shadow);\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:focus-visible) .slider-thumb-sole,\n  .slider-thumb-start:focus-visible,\n  .slider-thumb-end:focus-visible {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\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"],"mappings":""}

package/dist/inputs/slider/slider.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/slider/slider.css?inline
-var e = "@layer refine.base{:host{--_size:var(--slider-size,var(--size-5));--_height:var(--slider-height,var(--size-1));--_track:var(--slider-track-bg,var(--color-contrast-300));--_fill:var(--slider-fill,var(--color-neutral));--_thumb:var(--slider-thumb-bg,var(--color-contrast-50));--_thumb-size:var(--_size);--_thumb-inset:var(--slider-thumb-inset,var(--size-2-5));--_touch-target:var(--size-11);--_font-size:var(--text-sm);--_shadow:var(--color-neutral-focus-shadow);gap:var(--_gap,var(--size-3));min-width:var(--slider-min-width,12rem);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex;position:relative}:host([fullwidth]){width:100%}}.slider-container{box-sizing:border-box;width:100%;min-height:var(--_touch-target);padding-inline:var(--_thumb-inset);flex:1;align-items:center;display:flex;position:relative}.slider-track{width:100%;height:var(--_height);background:var(--_track);border-radius:var(--rounded-full);position:relative}.slider-fill{top:0;left:var(--_fill-start,0%);width:var(--_fill-width,0%);background:var(--_fill);border-radius:var(--rounded-full);height:100%;transition:var(--_motion-transition,left var(--transition-fast), width var(--transition-fast));position:absolute}:host([data-dragging]) .slider-fill{transition:none}.slider-thumb{z-index:1;box-sizing:border-box;width:var(--_thumb-size);height:var(--_thumb-size);cursor:grab;background:var(--_thumb);border:2px solid var(--_fill);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:var(--_motion-transition,box-shadow var(--transition-fast), left var(--transition-fast));will-change:transform;position:absolute;top:50%;transform:translate(-50%,-50%)}:host([data-dragging]) .slider-thumb{cursor:grabbing;box-shadow:var(--_shadow);transition:var(--_motion-transition,box-shadow var(--transition-fast))}.slider-thumb-sole{left:var(--_thumb-pos,0%)}:host(:focus-visible) .slider-thumb-sole,:host(:active) .slider-thumb-sole{box-shadow:var(--_shadow)}.slider-thumb-start{left:var(--_thumb-start,0%)}.slider-thumb-end{left:var(--_thumb-end,100%)}.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{z-index:2;outline:var(--border-2) solid var(--_fill);outline-offset:var(--size-0-5);box-shadow:var(--_shadow)}:host(:not([range])) .slider-thumb-start,:host(:not([range])) .slider-thumb-end,:host([range]) .slider-thumb-sole{display:none}@media (hover:hover){:host(:not([disabled])) .slider-thumb:hover{box-shadow:var(--_shadow)}}@media (forced-colors:active){:host(:focus-visible) .slider-thumb-sole,.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}@layer refine.overrides{:host{--_fill:var(--slider-fill,var(--_theme-base));--_shadow:var(--_theme-shadow)}}.label{font-size:var(--_font-size);color:var(--color-contrast);white-space:nowrap}.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[role=alert]{color:var(--color-error)}";
+var e = "@layer refine.base{:host{--_size:var(--slider-size,var(--size-5));--_height:var(--slider-height,var(--size-1));--_track:var(--slider-track-bg,var(--color-contrast-300));--_fill:var(--slider-fill,var(--color-neutral));--_thumb:var(--slider-thumb-bg,var(--color-contrast-50));--_thumb-size:var(--_size);--_thumb-inset:var(--slider-thumb-inset,var(--size-2-5));--_touch-target:var(--size-11);--_font-size:var(--text-sm);--_shadow:var(--color-neutral-focus-shadow);gap:var(--_gap,var(--size-3));min-width:var(--slider-min-width,12rem);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex;position:relative}:host([fullwidth]){width:100%;min-width:0}}.slider-container{box-sizing:border-box;width:100%;min-height:var(--_touch-target);padding-inline:var(--_thumb-inset);flex:1;align-items:center;display:flex;position:relative}.slider-track{width:100%;height:var(--_height);background:var(--_track);border-radius:var(--rounded-full);position:relative}.slider-fill{top:0;left:var(--_fill-start,0%);width:var(--_fill-width,0%);background:var(--_fill);border-radius:var(--rounded-full);height:100%;transition:var(--_motion-transition,left var(--transition-fast), width var(--transition-fast));position:absolute}:host([data-dragging]) .slider-fill{transition:none}.slider-thumb{z-index:1;box-sizing:border-box;width:var(--_thumb-size);height:var(--_thumb-size);cursor:grab;background:var(--_thumb);border:2px solid var(--_fill);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:var(--_motion-transition,box-shadow var(--transition-fast), left var(--transition-fast));will-change:transform;position:absolute;top:50%;transform:translate(-50%,-50%)}:host([data-dragging]) .slider-thumb{cursor:grabbing;box-shadow:var(--_shadow);transition:var(--_motion-transition,box-shadow var(--transition-fast))}.slider-thumb-sole{left:var(--_thumb-pos,0%)}:host(:focus-visible) .slider-thumb-sole,:host(:active) .slider-thumb-sole{box-shadow:var(--_shadow)}.slider-thumb-start{left:var(--_thumb-start,0%)}.slider-thumb-end{left:var(--_thumb-end,100%)}.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{z-index:2;outline:var(--border-2) solid var(--_fill);outline-offset:var(--size-0-5);box-shadow:var(--_shadow)}:host(:not([range])) .slider-thumb-start,:host(:not([range])) .slider-thumb-end,:host([range]) .slider-thumb-sole{display:none}@media (hover:hover){:host(:not([disabled])) .slider-thumb:hover{box-shadow:var(--_shadow)}}@media (forced-colors:active){:host(:focus-visible) .slider-thumb-sole,.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}@layer refine.overrides{:host{--_fill:var(--slider-fill,var(--_theme-base));--_shadow:var(--_theme-shadow)}}.label{font-size:var(--_font-size);color:var(--color-contrast);white-space:nowrap}.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[role=alert]{color:var(--color-error)}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"slider.css.js","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  /* No unconditional `width: 100%` here, on purpose — matches every other field's own `:host`\n     (`ore-input`, `ore-select`, `ore-number-input`, `ore-combobox`, `ore-date-picker`): shrink to\n     `min-width` by default, opt into full width via `:host([fullwidth])` below. A hardcoded\n     `width: 100%` here (the previous default) meant the slider always claimed the entire row in\n     a flex layout regardless of layout intent — e.g. sitting next to a label/hint column in a\n     settings-style row, it forced that column down to near its text's min-content width instead\n     of sharing the row the way a same-row `ore-select`/`ore-number-input` naturally does. */\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-1));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-50));\n    --_thumb-size: var(--_size);\n    --_thumb-inset: var(--slider-thumb-inset, var(--size-2-5));\n    --_touch-target: var(--size-11);\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    min-width: var(--slider-min-width, 12rem);\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  min-height: var(--_touch-target);\n  padding-inline: var(--_thumb-inset);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition: var(--_motion-transition, left var(--transition-fast), width var(--transition-fast));\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  box-sizing: border-box;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast), left var(--transition-fast));\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  cursor: grabbing;\n  box-shadow: var(--_shadow);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast));\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: var(--size-0-5);\n  box-shadow: var(--_shadow);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .slider-thumb:hover {\n    box-shadow: var(--_shadow);\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:focus-visible) .slider-thumb-sole,\n  .slider-thumb-start:focus-visible,\n  .slider-thumb-end:focus-visible {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\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"],"mappings":""}
+{"version":3,"file":"slider.css.js","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  /* No unconditional `width: 100%` here, on purpose — matches every other field's own `:host`\n     (`ore-input`, `ore-select`, `ore-number-input`, `ore-combobox`, `ore-date-picker`): shrink to\n     `min-width` by default, opt into full width via `:host([fullwidth])` below. A hardcoded\n     `width: 100%` here (the previous default) meant the slider always claimed the entire row in\n     a flex layout regardless of layout intent — e.g. sitting next to a label/hint column in a\n     settings-style row, it forced that column down to near its text's min-content width instead\n     of sharing the row the way a same-row `ore-select`/`ore-number-input` naturally does. */\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-1));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-50));\n    --_thumb-size: var(--_size);\n    --_thumb-inset: var(--slider-thumb-inset, var(--size-2-5));\n    --_touch-target: var(--size-11);\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    min-width: var(--slider-min-width, 12rem);\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  min-height: var(--_touch-target);\n  padding-inline: var(--_thumb-inset);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition: var(--_motion-transition, left var(--transition-fast), width var(--transition-fast));\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  box-sizing: border-box;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast), left var(--transition-fast));\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  cursor: grabbing;\n  box-shadow: var(--_shadow);\n  transition: var(--_motion-transition, box-shadow var(--transition-fast));\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: var(--size-0-5);\n  box-shadow: var(--_shadow);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (hover: hover) {\n  :host(:not([disabled])) .slider-thumb:hover {\n    box-shadow: var(--_shadow);\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:focus-visible) .slider-thumb-sole,\n  .slider-thumb-start:focus-visible,\n  .slider-thumb-end:focus-visible {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\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"],"mappings":""}

package/dist/keyboard-key.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./content/keyboard-key/keyboard-key.css.cjs"),n=require("./content/keyboard-key/keyboard-shortcut.css.cjs");let r=require("@vielzeug/ore");var i=`ore-keyboard-shortcut`;(0,r.define)(i,{props:{pressed:r.prop.bool(!1)},setup(e){return r.html`
+      <span class="shortcut" part="shortcut" ?data-pressed="${e.pressed}"><slot></slot></span>
+    `},styles:[e.reducedMotionMixin,n.default]});var a=`ore-keyboard-key`;(0,r.define)(a,{props:{pressed:r.prop.bool(!1),size:r.prop.string(`sm`),symbol:r.prop.string()},setup(e){return r.html`
+      <kbd class="key" part="key" ?data-has-symbol="${()=>!!e.symbol.value}" ?data-pressed="${e.pressed}">
+        <span class="symbol" aria-hidden="true" ?hidden="${()=>!e.symbol.value}">${e.symbol}</span>
+        <span class="label"><slot></slot></span>
+      </kbd>
+    `},styles:[e.reducedMotionMixin,t.default]}),exports.KEYBOARD_KEY_TAG=a,exports.KEYBOARD_SHORTCUT_TAG=i;
+//# sourceMappingURL=keyboard-key.cjs.map

package/dist/keyboard-key.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.cjs","names":[],"sources":["../src/content/keyboard-key/keyboard-key.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './keyboard-key.css?inline';\nimport shortcutStyles from './keyboard-shortcut.css?inline';\n\nexport type KeyboardKeySize = 'sm' | 'lg';\n\nexport type OreKeyboardKeyProps = {\n  pressed?: boolean;\n  size?: KeyboardKeySize;\n  symbol?: string;\n};\n\nexport type OreKeyboardShortcutProps = {\n  pressed?: boolean;\n};\n\nexport const KEYBOARD_SHORTCUT_TAG = 'ore-keyboard-shortcut' as const;\ndefine<OreKeyboardShortcutProps>(KEYBOARD_SHORTCUT_TAG, {\n  props: {\n    pressed: prop.bool(false),\n  },\n  setup(props) {\n    return html`\n      <span class=\"shortcut\" part=\"shortcut\" ?data-pressed=\"${props.pressed}\"><slot></slot></span>\n    `;\n  },\n  styles: [reducedMotionMixin, shortcutStyles],\n});\n\nexport const KEYBOARD_KEY_TAG = 'ore-keyboard-key' as const;\ndefine<OreKeyboardKeyProps>(KEYBOARD_KEY_TAG, {\n  props: {\n    pressed: prop.bool(false),\n    size: prop.string<KeyboardKeySize>('sm'),\n    symbol: prop.string(),\n  },\n  setup(props) {\n    return html`\n      <kbd class=\"key\" part=\"key\" ?data-has-symbol=\"${() => Boolean(props.symbol.value)}\" ?data-pressed=\"${props.pressed}\">\n        <span class=\"symbol\" aria-hidden=\"true\" ?hidden=\"${() => !props.symbol.value}\">${props.symbol}</span>\n        <span class=\"label\"><slot></slot></span>\n      </kbd>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"kRAiBA,IAAa,EAAwB,yBACrC,EAAA,EAAA,OAAA,CAAiC,EAAuB,CACtD,MAAO,CACL,QAAS,EAAA,KAAK,KAAK,EAAK,CAC1B,EACA,MAAM,EAAO,CACX,MAAO,GAAA,IAAI;8DAC+C,EAAM,QAAQ;KAE1E,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAc,CAC7C,CAAC,EAED,IAAa,EAAmB,oBAChC,EAAA,EAAA,OAAA,CAA4B,EAAkB,CAC5C,MAAO,CACL,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,KAAM,EAAA,KAAK,OAAwB,IAAI,EACvC,OAAQ,EAAA,KAAK,OAAO,CACtB,EACA,MAAM,EAAO,CACX,MAAO,GAAA,IAAI;0DAC6C,EAAQ,EAAM,OAAO,MAAO,mBAAmB,EAAM,QAAQ;+DACxD,CAAC,EAAM,OAAO,MAAM,IAAI,EAAM,OAAO;;;KAIpG,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/keyboard-key.js

@@ -0,0 +1,36 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import t from "./content/keyboard-key/keyboard-key.css.js";
+import n from "./content/keyboard-key/keyboard-shortcut.css.js";
+import { define as r, html as i, prop as a } from "@vielzeug/ore";
+//#region src/content/keyboard-key/keyboard-key.ts
+var o = "ore-keyboard-shortcut";
+r(o, {
+	props: { pressed: a.bool(!1) },
+	setup(e) {
+		return i`
+      <span class="shortcut" part="shortcut" ?data-pressed="${e.pressed}"><slot></slot></span>
+    `;
+	},
+	styles: [e, n]
+});
+var s = "ore-keyboard-key";
+r(s, {
+	props: {
+		pressed: a.bool(!1),
+		size: a.string("sm"),
+		symbol: a.string()
+	},
+	setup(e) {
+		return i`
+      <kbd class="key" part="key" ?data-has-symbol="${() => !!e.symbol.value}" ?data-pressed="${e.pressed}">
+        <span class="symbol" aria-hidden="true" ?hidden="${() => !e.symbol.value}">${e.symbol}</span>
+        <span class="label"><slot></slot></span>
+      </kbd>
+    `;
+	},
+	styles: [e, t]
+});
+//#endregion
+export { s as KEYBOARD_KEY_TAG, o as KEYBOARD_SHORTCUT_TAG };
+
+//# sourceMappingURL=keyboard-key.js.map

package/dist/keyboard-key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.js","names":[],"sources":["../src/content/keyboard-key/keyboard-key.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './keyboard-key.css?inline';\nimport shortcutStyles from './keyboard-shortcut.css?inline';\n\nexport type KeyboardKeySize = 'sm' | 'lg';\n\nexport type OreKeyboardKeyProps = {\n  pressed?: boolean;\n  size?: KeyboardKeySize;\n  symbol?: string;\n};\n\nexport type OreKeyboardShortcutProps = {\n  pressed?: boolean;\n};\n\nexport const KEYBOARD_SHORTCUT_TAG = 'ore-keyboard-shortcut' as const;\ndefine<OreKeyboardShortcutProps>(KEYBOARD_SHORTCUT_TAG, {\n  props: {\n    pressed: prop.bool(false),\n  },\n  setup(props) {\n    return html`\n      <span class=\"shortcut\" part=\"shortcut\" ?data-pressed=\"${props.pressed}\"><slot></slot></span>\n    `;\n  },\n  styles: [reducedMotionMixin, shortcutStyles],\n});\n\nexport const KEYBOARD_KEY_TAG = 'ore-keyboard-key' as const;\ndefine<OreKeyboardKeyProps>(KEYBOARD_KEY_TAG, {\n  props: {\n    pressed: prop.bool(false),\n    size: prop.string<KeyboardKeySize>('sm'),\n    symbol: prop.string(),\n  },\n  setup(props) {\n    return html`\n      <kbd class=\"key\" part=\"key\" ?data-has-symbol=\"${() => Boolean(props.symbol.value)}\" ?data-pressed=\"${props.pressed}\">\n        <span class=\"symbol\" aria-hidden=\"true\" ?hidden=\"${() => !props.symbol.value}\">${props.symbol}</span>\n        <span class=\"label\"><slot></slot></span>\n      </kbd>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;AAiBA,IAAa,IAAwB;AACrC,EAAiC,GAAuB;CACtD,OAAO,EACL,SAAS,EAAK,KAAK,EAAK,EAC1B;CACA,MAAM,GAAO;EACX,OAAO,CAAI;8DAC+C,EAAM,QAAQ;;CAE1E;CACA,QAAQ,CAAC,GAAoB,CAAc;AAC7C,CAAC;AAED,IAAa,IAAmB;AAChC,EAA4B,GAAkB;CAC5C,OAAO;EACL,SAAS,EAAK,KAAK,EAAK;EACxB,MAAM,EAAK,OAAwB,IAAI;EACvC,QAAQ,EAAK,OAAO;CACtB;CACA,MAAM,GAAO;EACX,OAAO,CAAI;4DAC6C,EAAQ,EAAM,OAAO,MAAO,mBAAmB,EAAM,QAAQ;iEACxD,CAAC,EAAM,OAAO,MAAM,IAAI,EAAM,OAAO;;;;CAIpG;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/menu.cjs

@@ -14,7 +14,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        `},styles:[t.colorThemeMixin,u.default]});var g=`ore-menu-separator`;(0,f.define)(g,{setup(){return f.html``},styles:[d.default]});var _=e=>e===`checkbox`||e===`radio`,v=e=>e==null?void 0:e===``||e===`true`,y=`ore-menu`;(0,f.define)(y,{props:{...s.sizableBundle,...s.disablableBundle,"default-open":f.prop.bool(!1),open:{default:void 0,parse:v},placement:f.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e){let t=(0,f.getHost)(),s=(0,f.useEmit)(),c=(0,f.useSlots)(),l=f.watchEffect,u=(0,f.createId)(`menu`),d=(0,p.computed)(()=>!!e.disabled.value),h=r.lifecycleSignal(f.onCleanup),g=null,v=null,y=null;function b(){return Array.from(t.querySelectorAll(`ore-menu-item:not([disabled])`))}function x(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function S(){return b().findIndex(e=>{let t=x(e);return e===document.activeElement||t===document.activeElement})}let C=(0,p.signal)(!1),w=null,T=o.createDropdownPositioner({getFloating:()=>v,getPlacement:()=>e.placement.value??`bottom-start`,getReference:()=>g,matchWidth:!1,offsetPx:4,padding:6}),E=a.createListControl({disabled:(0,p.computed)(()=>!C.value),getItems:b,isItemDisabled:e=>e.hasAttribute(`disabled`),onNavigate:({item:e})=>{x(e)?.focus()},signal:h}),D=(e=`programmatic`,t=!0)=>{C.value&&(C.value=!1,E.reset(),w?.(),w=null,t&&(0,m.restoreFocus)(()=>g),s(`open-change`,{open:!1,reason:e}))},O=(e=`programmatic`)=>{d.value||C.value||(C.value=!0,T.update(),w=T.startAutoUpdate?.()??null,s(`open-change`,{open:!0,reason:e}))},k=()=>{C.value?D(`trigger`):O(`click`)};i.createOutsidePointerDismissal({getTargets:()=>[t,v],isActive:()=>C.value,onDismiss:()=>D(`outsideClick`),signal:h});let A=!1;(0,p.watch)(e.open,t=>{t===void 0?A?D(`programmatic`):e[`default-open`].value&&O(`programmatic`):t?O(`programmatic`):D(`programmatic`),A=!0},{immediate:!0}),h.addEventListener(`abort`,()=>{C.value&&(C.value=!1,E.reset(),w?.(),w=null)},{once:!0});let j=e=>{let n=e.getAttribute(`type`),r=_(n);if(n===`checkbox`)e.toggleAttribute(`checked`,!e.hasAttribute(`checked`));else if(n===`radio`)for(let n of t.querySelectorAll(`ore-menu-item[type="radio"]`))n.toggleAttribute(`checked`,n===e);let i=e.getAttribute(`value`)??``,a=r?e.hasAttribute(`checked`):void 0;s(`select`,{checked:a,value:i}),r||D(`programmatic`)},M=n.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{O(`keyboard`),requestAnimationFrame(()=>E.set(0))}}),N=n.createInteraction({onPress:()=>{let e=E.getActiveItem();e&&j(e)}});function P(e){if(d.value)return;if(!C.value){M.handleKeydown(e);return}let t=S();if(t>=0&&E.set(t),e.key===`Escape`){e.preventDefault(),D(`escape`);return}if(!E.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){N.handleKeydown(e);return}e.key===`Tab`&&D(`programmatic`)}}(0,f.bind)({on:{click:e=>{let t=e.composedPath();if(!C.value)return;let n=t.find(e=>e instanceof HTMLElement&&e.tagName===`ORE-MENU-ITEM`)??e.target?.closest(`ore-menu-item`)??null;n&&!n.hasAttribute(`disabled`)&&j(n)}}}),l(()=>{let e=C.value;v&&v.toggleAttribute(`data-open`,e)});function F(){if(y?.(),y=null,g=c.elements(`trigger`).value?.[0]??null,!g)return;let e=[],t=(0,f.bind)({attr:{"aria-controls":()=>u,"aria-disabled":()=>d.value,"aria-expanded":()=>String(C.value),"aria-haspopup":`menu`}},{target:g}),n=e=>{e.stopPropagation(),!d.value&&k()},r=e=>{P(e)};g.addEventListener(`click`,n),g.addEventListener(`keydown`,r),e.push(()=>g?.removeEventListener(`click`,n)),e.push(()=>g?.removeEventListener(`keydown`,r)),y=()=>{t();for(let t of e)t()}}return(0,p.watch)(c.elements(`trigger`),F,{immediate:!0}),(0,f.onMounted)(()=>(F(),()=>{y?.(),y=null})),f.html`
+        `},styles:[t.colorThemeMixin,u.default]});var g=`ore-menu-separator`;(0,f.define)(g,{setup(){return f.html``},styles:[d.default]});var _=e=>e===`checkbox`||e===`radio`,v=e=>e==null?void 0:e===``||e===`true`,y=`ore-menu`;(0,f.define)(y,{props:{...s.sizableBundle,...s.disablableBundle,"default-open":f.prop.bool(!1),open:{default:void 0,parse:v},placement:f.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e){let t=(0,f.getHost)(),s=(0,f.useEmit)(),c=(0,f.useSlots)(),l=f.watchEffect,u=(0,f.createId)(`menu`),d=(0,p.computed)(()=>!!e.disabled.value),h=r.lifecycleSignal(f.onCleanup),g=null,v=null,y=null;function b(){return Array.from(t.querySelectorAll(`ore-menu-item:not([disabled])`))}function x(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function S(){return b().findIndex(e=>{let t=x(e);return e===document.activeElement||t===document.activeElement})}let C=(0,p.signal)(!1),w=null,T=o.createDropdownPositioner({getFloating:()=>v,getPlacement:()=>e.placement.value??`bottom-start`,getReference:()=>g,matchWidth:!1,offsetPx:4,padding:6,useClippingAncestor:!1}),E=a.createListControl({disabled:(0,p.computed)(()=>!C.value),getItems:b,isItemDisabled:e=>e.hasAttribute(`disabled`),onNavigate:({item:e})=>{x(e)?.focus()},signal:h}),D=(e=`programmatic`,t=!0)=>{C.value&&(C.value=!1,E.reset(),w?.(),w=null,t&&(0,m.restoreFocus)(()=>g),s(`open-change`,{open:!1,reason:e}))},O=(e=`programmatic`)=>{d.value||C.value||(C.value=!0,T.update(),w=T.startAutoUpdate?.()??null,s(`open-change`,{open:!0,reason:e}))},k=()=>{C.value?D(`trigger`):O(`click`)};i.createOutsidePointerDismissal({getTargets:()=>[t,v],isActive:()=>C.value,onDismiss:()=>D(`outsideClick`),signal:h});let A=!1;(0,p.watch)(e.open,t=>{t===void 0?A?D(`programmatic`):e[`default-open`].value&&O(`programmatic`):t?O(`programmatic`):D(`programmatic`),A=!0},{immediate:!0}),h.addEventListener(`abort`,()=>{C.value&&(C.value=!1,E.reset(),w?.(),w=null)},{once:!0});let j=e=>{let n=e.getAttribute(`type`),r=_(n);if(n===`checkbox`)e.toggleAttribute(`checked`,!e.hasAttribute(`checked`));else if(n===`radio`)for(let n of t.querySelectorAll(`ore-menu-item[type="radio"]`))n.toggleAttribute(`checked`,n===e);let i=e.getAttribute(`value`)??``,a=r?e.hasAttribute(`checked`):void 0;s(`select`,{checked:a,value:i}),r||D(`programmatic`)},M=n.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{O(`keyboard`),requestAnimationFrame(()=>E.set(0))}}),N=n.createInteraction({onPress:()=>{let e=E.getActiveItem();e&&j(e)}});function P(e){if(d.value)return;if(!C.value){M.handleKeydown(e);return}let t=S();if(t>=0&&E.set(t),e.key===`Escape`){e.preventDefault(),D(`escape`);return}if(!E.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){N.handleKeydown(e);return}e.key===`Tab`&&D(`programmatic`)}}(0,f.bind)({on:{click:e=>{let t=e.composedPath();if(!C.value)return;let n=t.find(e=>e instanceof HTMLElement&&e.tagName===`ORE-MENU-ITEM`)??e.target?.closest(`ore-menu-item`)??null;n&&!n.hasAttribute(`disabled`)&&j(n)}}}),l(()=>{let e=C.value;v&&v.toggleAttribute(`data-open`,e)});function F(){if(y?.(),y=null,g=c.elements(`trigger`).value?.[0]??null,!g)return;let e=[],t=(0,f.bind)({attr:{"aria-controls":()=>u,"aria-disabled":()=>d.value,"aria-expanded":()=>String(C.value),"aria-haspopup":`menu`}},{target:g}),n=e=>{e.stopPropagation(),!d.value&&k()},r=e=>{P(e)};g.addEventListener(`click`,n),g.addEventListener(`keydown`,r),e.push(()=>g?.removeEventListener(`click`,n)),e.push(()=>g?.removeEventListener(`keydown`,r)),y=()=>{t();for(let t of e)t()}}return(0,p.watch)(c.elements(`trigger`),F,{immediate:!0}),(0,f.onMounted)(()=>(F(),()=>{y?.(),y=null})),f.html`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"