@vielzeug/refine 2.1.3 → 2.2.4

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

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

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

@@ -1,5 +1,5 @@
 //#region src/inputs/input/input.css?inline
-var e = "@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter: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}.char-counter: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}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=\"\"])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner:not(: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}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--input-focus-border-color,var(--_theme-focus))}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}";
+var e = "@layer refine.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_label-block-inset:var(--input-label-block-inset,var(--size-2));--_label-inset:var(--input-label-inset,var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));min-width:var(--input-min-width,12rem);flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{flex-direction:column;gap:0;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.input-wrapper:has(.label:not([hidden])) .field{height:auto}:host(:not([label-placement=outside])) .input-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--_label-block-inset);position:absolute}:host(:not([label-placement=outside])) .label:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--_label-inset)}:host(:not([label-placement=outside])) .label:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_label-inset)}:host(:not([label-placement=outside])) .input-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--_label-block-inset) + 1lh + 2px)}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label,label.label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));margin-bottom:2px;overflow:hidden}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-xs);line-height:var(--leading-loose);order:-1}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));overflow-wrap:anywhere;padding-left:2px;padding-right:2px}.helper-text[hidden]{display:none}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .field:focus-within .label,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter: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}.char-counter: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}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .label,.helper-text[role=alert]{color:var(--color-error)}:host([success]) .field{border-color:var(--color-success)}.status-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:none}:host([error]:not([error=\"\"])) .status-icon,:host([success]) .status-icon{display:flex}.status-icon[data-status=error]{color:var(--color-error)}.status-icon[data-status=success]{color:var(--color-success)}@keyframes spin{to{transform:rotate(360deg)}}.field-spinner{width:var(--size-4);height:var(--size-4);border:var(--border-2) solid var(--_theme-focus,currentcolor);animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;flex-shrink:0;display:none}.field-spinner:not(: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}.field-spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}:host([loading]) .field-spinner{display:inline-block}}@layer refine.variants{:host([variant=text]){--_bg:var(--input-bg,transparent);--_border-color:var(--input-border-color,var(--color-contrast-300))}:host([variant=text]) .field{box-shadow:none;background:0 0;border:none;border-radius:0}:host([variant=text]) .field:focus-within{box-shadow:none}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([success]) .field:focus-within{border-color:var(--color-success);box-shadow:var(--color-success-focus-shadow)}}@layer refine.utilities{:host([fullwidth]){width:100%}}:host([disabled]){opacity:1}:host([disabled]) .field{background:var(--color-contrast-100);border-color:var(--color-contrast-200);box-shadow:none}:host([disabled]) input{color:var(--color-contrast-400)}:host([disabled]) input::placeholder{color:var(--color-contrast-300)}:host([disabled]) .label{color:var(--color-contrast-400)}";
 //#endregion
 export { e as default };
 

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

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

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

@@ -82,6 +82,8 @@ export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
  * @cssprop --input-placeholder-color - Placeholder text color
  * @cssprop --input-radius - Border radius
  * @cssprop --input-padding - Inner padding (block inline)
+ * @cssprop --input-label-block-inset - Inset from the field block start for an inset label
+ * @cssprop --input-label-inset - Inset from the field inline start for an inset label
  * @cssprop --input-gap - Gap between prefix/suffix icons and input text
  * @cssprop --input-font-size - Font size
  * @cssprop --input-height - Field height

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAgBjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAgBjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

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

@@ -16,7 +16,7 @@ export type OreSelectEvents = {
     input: Event;
     'open-change': OverlayOpenChangeDetail;
 };
-export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'text' | 'frost'>> & {
+export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'frost'>> & {
     /** Show loading state in dropdown */
     loading?: boolean;
     /** Allow selecting multiple options */
@@ -44,7 +44,7 @@ export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'text'
  * @attr {string} error - Error message
  * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
  * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
- * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'
  * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
  * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
  * @attr {boolean} fullwidth - Expand to full width

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAqB,MAAM,YAAY,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAexB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiBF,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,uBAAuB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG;IAC5F,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAqB,MAAM,YAAY,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAexB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiBF,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,uBAAuB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IACnF,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

package/dist/layout/grid/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/grid.ts"],"names":[],"mappings":"AAmCA,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElG,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;IACvD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC1F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/grid.ts"],"names":[],"mappings":"AAoCA,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElG,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;IACvD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC1F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/layout/navbar/navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layout/navbar/navbar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE1F,OAAO,yBAAyB,CAAC;AAsFjC,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,UAAU,qDAAgD,CAAC;AAExE,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG;IAC5B,oBAAoB,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,cAAc,GAAG;IACf,eAAe,IAAI,IAAI,CAAC;IACxB,cAAc,IAAI,IAAI,CAAC;IACvB,gBAAgB,IAAI,IAAI,CAAC;CAC1B,CAAC;AAQJ,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mCAAmC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC;AAmgBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layout/navbar/navbar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAA0B,MAAM,kBAAkB,CAAC;AAGnF,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE1F,OAAO,yBAAyB,CAAC;AAsFjC,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,UAAU,qDAAgD,CAAC;AAExE,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG;IAC5B,oBAAoB,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,cAAc,GAAG;IACf,eAAe,IAAI,IAAI,CAAC;IACxB,cAAc,IAAI,IAAI,CAAC;IACvB,gBAAgB,IAAI,IAAI,CAAC;CAC1B,CAAC;AAQJ,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mCAAmC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC;AAuhBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}

package/dist/layout/sidebar/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"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"}

package/dist/list-item.cjs

@@ -1,14 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./list.cjs"),r=require("./content/list/_list-item-reveal.cjs"),i=require("./content/list/list-item.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=e=>e===`left`?`actions-left`:`actions-right`,c=`ore-list-item`;(0,a.define)(c,{props:{...t.disablableBundle,revealed:a.prop.oneOf([`left`,`right`],void 0),value:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=(0,a.useSlots)(),l=(0,a.inject)(n.LIST_CTX),u=(0,o.computed)(()=>!!l?.selectable.value),d=(0,o.computed)(()=>e.value.value!=null&&l!=null&&l.value.value===e.value.value),f=r.createRevealState(t,{disabled:(0,o.computed)(()=>e.disabled.value||!!e.revealed.value),hasActions:e=>c.has(s(e)).value,onConfirm:e=>{let n=c.elements(s(e)).value[0];i(`confirm`,{item:t,side:e}),n?.click()}});(0,a.onCleanup)(()=>f.dispose()),(0,a.watchEffect)(()=>{t.toggleAttribute(`selected`,d.value)});let p=d.value;(0,a.watchEffect)(()=>{let n=d.value;n!==p&&(p=n,i(n?`select`:`deselect`,{item:t,value:e.value.value??null}))});let m=e.revealed.value??null;(0,a.watchEffect)(()=>{let n=e.revealed.value??null;n!==m&&(m=n,n?(l?.requestReveal(t),i(`reveal`,{item:t,side:n})):i(`conceal`,{item:t}))});let h=n=>{if(e.disabled.value)return;if(e.revealed.value){n.preventDefault(),n.stopPropagation(),t.removeAttribute(`revealed`);return}if(!u.value)return;let r=e.value.value;r!=null&&l?.select(d.value?void 0:r)};return(0,a.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,"aria-selected":()=>u.value?String(d.value):null,role:()=>u.value?`option`:`listitem`}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./list.cjs"),r=require("./content/list/_list-item-reveal.cjs"),i=require("./content/list/list-item.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=e=>e===`left`?`actions-left`:`actions-right`,c=`ore-list-item`;(0,a.define)(c,{props:{...t.disablableBundle,revealed:a.prop.oneOf([`left`,`right`],void 0),value:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=(0,a.useSlots)(),l=(0,a.inject)(n.LIST_CTX),u=(0,o.computed)(()=>!!l?.selectable.value),d=(0,o.computed)(()=>e.value.value!=null&&l!=null&&l.value.value===e.value.value),f=e=>c.has(s(e)).value;(0,a.onMounted)(()=>{let n=t.shadowRoot?.querySelector(`.row`);if(!n)return;let l=r.createRevealState(t,n,{disabled:(0,o.computed)(()=>e.disabled.value||!!e.revealed.value),hasActions:f,onConfirm:e=>{let n=c.elements(s(e)).value[0];i(`confirm`,{item:t,side:e}),n?.click()}});(0,a.onCleanup)(()=>l.dispose())}),(0,a.watchEffect)(()=>{t.toggleAttribute(`selected`,d.value)});let p=d.value;(0,a.watchEffect)(()=>{let n=d.value;n!==p&&(p=n,i(n?`select`:`deselect`,{item:t,value:e.value.value??null}))});let m=e.revealed.value??null;(0,a.watchEffect)(()=>{let n=e.revealed.value??null;n!==m&&(m=n,n?(l?.requestReveal(t),i(`reveal`,{item:t,side:n})):i(`conceal`,{item:t}))});let h=n=>{if(e.disabled.value)return;if(e.revealed.value){n.preventDefault(),n.stopPropagation(),t.removeAttribute(`revealed`);return}if(!u.value)return;let r=e.value.value;r!=null&&l?.select(d.value?void 0:r)};return(0,a.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,"aria-selected":()=>u.value?String(d.value):null,role:()=>u.value?`option`:`listitem`}}),a.html`
       <div
         class="row"
         part="row"
         tabindex="${()=>e.disabled.value?`-1`:`0`}"
         @click="${h}"
-        @keydown="${t=>{(t.key===`Enter`||t.key===` `)&&(e.disabled.value||!e.revealed.value&&!u.value||(t.preventDefault(),h(t)))}}"
-        @pointercancel="${e=>f.handlePointerCancel(e)}"
-        @pointerdown="${e=>f.handlePointerDown(e)}"
-        @pointermove="${e=>f.handlePointerMove(e)}"
-        @pointerup="${e=>f.handlePointerUp(e)}">
+        @keydown="${t=>{(t.key===`Enter`||t.key===` `)&&(e.disabled.value||!e.revealed.value&&!u.value||(t.preventDefault(),h(t)))}}">
         <span class="leading" part="leading"><slot name="leading"></slot></span>
         <span class="content" part="content">
           <span class="title" part="title"><slot></slot></span>

package/dist/list-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    const swipe = createRevealState(el, {\n      disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n      hasActions,\n      // Clicks the slot's own first element (the common case: a single action button) so its own\n      // click handler runs the real action — `confirm` covers slots without a clickable element.\n      onConfirm: (side) => {\n        const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n        emit('confirm', { item: el, side });\n        target?.click();\n      },\n    });\n\n    onCleanup(() => swipe.dispose());\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\"\n        @pointercancel=\"${(e: PointerEvent) => swipe.handlePointerCancel(e)}\"\n        @pointerdown=\"${(e: PointerEvent) => swipe.handlePointerDown(e)}\"\n        @pointermove=\"${(e: PointerEvent) => swipe.handlePointerMove(e)}\"\n        @pointerup=\"${(e: PointerEvent) => swipe.handlePointerUp(e)}\">\n        <span class=\"leading\" part=\"leading\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"list-item.cjs","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    onMounted(() => {\n      const row = el.shadowRoot?.querySelector<HTMLElement>('.row');\n\n      if (!row) return;\n\n      const pan = createRevealState(el, row, {\n        disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n        hasActions,\n        // Clicks the slot's own first element (the common case: a single action button) so its own\n        // click handler runs the real action — `confirm` covers slots without a clickable element.\n        onConfirm: (side) => {\n          const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n          emit('confirm', { item: el, side });\n          target?.click();\n        },\n      });\n\n      onCleanup(() => pan.dispose());\n    });\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\">\n        <span class=\"leading\" part=\"leading\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/list-item.js

@@ -3,74 +3,75 @@ import { disablableBundle as t } from "./shared/prop-bundles.js";
 import { LIST_CTX as n } from "./list.js";
 import { createRevealState as r } from "./content/list/_list-item-reveal.js";
 import i from "./content/list/list-item.css.js";
-import { bind as a, define as o, getHost as s, html as c, inject as l, onCleanup as u, prop as d, useEmit as f, useSlots as p, watchEffect as m } from "@vielzeug/ore";
-import { computed as h } from "@vielzeug/ripple";
+import { bind as a, define as o, getHost as s, html as c, inject as l, onCleanup as u, onMounted as d, prop as f, useEmit as p, useSlots as m, watchEffect as h } from "@vielzeug/ore";
+import { computed as g } from "@vielzeug/ripple";
 //#region src/content/list/list-item.ts
-var g = (e) => e === "left" ? "actions-left" : "actions-right", _ = "ore-list-item";
-o(_, {
+var _ = (e) => e === "left" ? "actions-left" : "actions-right", v = "ore-list-item";
+o(v, {
 	props: {
 		...t,
-		revealed: d.oneOf(["left", "right"], void 0),
-		value: d.string()
+		revealed: f.oneOf(["left", "right"], void 0),
+		value: f.string()
 	},
 	setup(e) {
-		let t = s(), i = f(), o = p(), d = l(n), _ = h(() => !!d?.selectable.value), v = h(() => e.value.value != null && d != null && d.value.value === e.value.value), y = r(t, {
-			disabled: h(() => e.disabled.value || !!e.revealed.value),
-			hasActions: (e) => o.has(g(e)).value,
-			onConfirm: (e) => {
-				let n = o.elements(g(e)).value[0];
-				i("confirm", {
-					item: t,
-					side: e
-				}), n?.click();
-			}
-		});
-		u(() => y.dispose()), m(() => {
-			t.toggleAttribute("selected", v.value);
+		let t = s(), i = p(), o = m(), f = l(n), v = g(() => !!f?.selectable.value), y = g(() => e.value.value != null && f != null && f.value.value === e.value.value), b = (e) => o.has(_(e)).value;
+		d(() => {
+			let n = t.shadowRoot?.querySelector(".row");
+			if (!n) return;
+			let a = r(t, n, {
+				disabled: g(() => e.disabled.value || !!e.revealed.value),
+				hasActions: b,
+				onConfirm: (e) => {
+					let n = o.elements(_(e)).value[0];
+					i("confirm", {
+						item: t,
+						side: e
+					}), n?.click();
+				}
+			});
+			u(() => a.dispose());
+		}), h(() => {
+			t.toggleAttribute("selected", y.value);
 		});
-		let b = v.value;
-		m(() => {
-			let n = v.value;
-			n !== b && (b = n, i(n ? "select" : "deselect", {
+		let x = y.value;
+		h(() => {
+			let n = y.value;
+			n !== x && (x = n, i(n ? "select" : "deselect", {
 				item: t,
 				value: e.value.value ?? null
 			}));
 		});
-		let x = e.revealed.value ?? null;
-		m(() => {
+		let S = e.revealed.value ?? null;
+		h(() => {
 			let n = e.revealed.value ?? null;
-			n !== x && (x = n, n ? (d?.requestReveal(t), i("reveal", {
+			n !== S && (S = n, n ? (f?.requestReveal(t), i("reveal", {
 				item: t,
 				side: n
 			})) : i("conceal", { item: t }));
 		});
-		let S = (n) => {
+		let C = (n) => {
 			if (e.disabled.value) return;
 			if (e.revealed.value) {
 				n.preventDefault(), n.stopPropagation(), t.removeAttribute("revealed");
 				return;
 			}
-			if (!_.value) return;
+			if (!v.value) return;
 			let r = e.value.value;
-			r != null && d?.select(v.value ? void 0 : r);
+			r != null && f?.select(y.value ? void 0 : r);
 		};
 		return a({ attr: {
 			"aria-disabled": () => e.disabled.value ? "true" : null,
-			"aria-selected": () => _.value ? String(v.value) : null,
-			role: () => _.value ? "option" : "listitem"
+			"aria-selected": () => v.value ? String(y.value) : null,
+			role: () => v.value ? "option" : "listitem"
 		} }), c`
       <div
         class="row"
         part="row"
         tabindex="${() => e.disabled.value ? "-1" : "0"}"
-        @click="${S}"
+        @click="${C}"
         @keydown="${(t) => {
-			(t.key === "Enter" || t.key === " ") && (e.disabled.value || !e.revealed.value && !_.value || (t.preventDefault(), S(t)));
-		}}"
-        @pointercancel="${(e) => y.handlePointerCancel(e)}"
-        @pointerdown="${(e) => y.handlePointerDown(e)}"
-        @pointermove="${(e) => y.handlePointerMove(e)}"
-        @pointerup="${(e) => y.handlePointerUp(e)}">
+			(t.key === "Enter" || t.key === " ") && (e.disabled.value || !e.revealed.value && !v.value || (t.preventDefault(), C(t)));
+		}}">
         <span class="leading" part="leading"><slot name="leading"></slot></span>
         <span class="content" part="content">
           <span class="title" part="title"><slot></slot></span>
@@ -86,6 +87,6 @@ o(_, {
 	styles: [e, i]
 });
 //#endregion
-export { _ as LIST_ITEM_TAG };
+export { v as LIST_ITEM_TAG };
 
 //# sourceMappingURL=list-item.js.map

package/dist/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    const swipe = createRevealState(el, {\n      disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n      hasActions,\n      // Clicks the slot's own first element (the common case: a single action button) so its own\n      // click handler runs the real action — `confirm` covers slots without a clickable element.\n      onConfirm: (side) => {\n        const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n        emit('confirm', { item: el, side });\n        target?.click();\n      },\n    });\n\n    onCleanup(() => swipe.dispose());\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\"\n        @pointercancel=\"${(e: PointerEvent) => swipe.handlePointerCancel(e)}\"\n        @pointerdown=\"${(e: PointerEvent) => swipe.handlePointerDown(e)}\"\n        @pointermove=\"${(e: PointerEvent) => swipe.handlePointerMove(e)}\"\n        @pointerup=\"${(e: PointerEvent) => swipe.handlePointerUp(e)}\">\n        <span class=\"leading\" part=\"leading\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;AA6CA,IAAM,KAAc,MAClB,MAAS,SAAS,iBAAiB,iBAiExB,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,GAAG;EACH,UAAU,EAAK,MAAsC,CAAC,QAAQ,OAAO,GAAG,KAAA,CAAS;EACjF,OAAO,EAAK,OAAO;CACrB;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA2B,GAClC,IAAQ,EAAoF,GAE5F,IAAU,EAAO,CAAQ,GACzB,IAAe,QAAe,EAAQ,GAAS,WAAW,KAAM,GAGhE,IAAa,QACX,EAAM,MAAM,SAAS,QAAQ,KAAW,QAAQ,EAAQ,MAAM,UAAU,EAAM,MAAM,KAC5F,GAIM,IAAQ,EAAkB,GAAI;GAClC,UAAU,QAAe,EAAM,SAAS,SAAS,EAAQ,EAAM,SAAS,KAAM;GAC9E,aAJkB,MAAsC,EAAM,IAAI,EAAW,CAAI,CAAC,CAAC,CAAC;GAOpF,YAAY,MAAS;IACnB,IAAM,IAAS,EAAM,SAAS,EAAW,CAAI,CAAC,CAAC,CAAC,MAAM;IAGtD,AADA,EAAK,WAAW;KAAE,MAAM;KAAI;IAAK,CAAC,GAClC,GAAQ,MAAM;GAChB;EACF,CAAC;EAOD,AALA,QAAgB,EAAM,QAAQ,CAAC,GAK/B,QAAkB;GAChB,EAAG,gBAAgB,YAAY,EAAW,KAAK;EACjD,CAAC;EAMD,IAAI,IAAe,EAAW;EAE9B,QAAkB;GAChB,IAAM,IAAU,EAAW;GAEvB,MAAY,MAEhB,IAAe,GACf,EAAK,IAAU,WAAW,YAAY;IAAE,MAAM;IAAI,OAAO,EAAM,MAAM,SAAS;GAAK,CAAC;EACtF,CAAC;EAED,IAAI,IAAe,EAAM,SAAS,SAAS;EAE3C,QAAkB;GAChB,IAAM,IAAU,EAAM,SAAS,SAAS;GAEpC,MAAY,MAEhB,IAAe,GAEX,KAGF,GAAS,cAAc,CAAE,GACzB,EAAK,UAAU;IAAE,MAAM;IAAI,MAAM;GAAQ,CAAC,KAE1C,EAAK,WAAW,EAAE,MAAM,EAAG,CAAC;EAEhC,CAAC;EAED,IAAM,KAAkB,MAAuB;GAC7C,IAAI,EAAM,SAAS,OAAO;GAE1B,IAAI,EAAM,SAAS,OAAO;IAGxB,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAG,gBAAgB,UAAU;IAE7B;GACF;GAEA,IAAI,CAAC,EAAa,OAAO;GAEzB,IAAM,IAAQ,EAAM,MAAM;GAI1B,AAAI,KAAS,QAAM,GAAS,OAAO,EAAW,QAAQ,KAAA,IAAY,CAAK;EACzE;EAmBA,OARA,EAAK,EACH,MAAM;GACJ,uBAAwB,EAAM,SAAS,QAAQ,SAAS;GACxD,uBAAwB,EAAa,QAAQ,OAAO,EAAW,KAAK,IAAI;GACxE,YAAa,EAAa,QAAQ,WAAW;EAC/C,EACF,CAAC,GAEM,CAAI;;;;0BAIY,EAAM,SAAS,QAAQ,OAAO,IAAK;kBAC5C,EAAe;qBAtBH,MAA+B;GACnD,GAAM,QAAQ,WAAW,EAAM,QAAQ,SAEvC,EAAM,SAAS,SAAU,CAAC,EAAM,SAAS,SAAS,CAAC,EAAa,UAEpE,EAAM,eAAe,GACrB,EAAe,CAAK;EACtB,EAgBiC;2BACV,MAAoB,EAAM,oBAAoB,CAAC,EAAE;yBACnD,MAAoB,EAAM,kBAAkB,CAAC,EAAE;yBAC/C,MAAoB,EAAM,kBAAkB,CAAC,EAAE;uBACjD,MAAoB,EAAM,gBAAgB,CAAC,EAAE;;;;;;;;;;;CAWlE;CAEA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}
+{"version":3,"file":"list-item.js","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    onMounted(() => {\n      const row = el.shadowRoot?.querySelector<HTMLElement>('.row');\n\n      if (!row) return;\n\n      const pan = createRevealState(el, row, {\n        disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n        hasActions,\n        // Clicks the slot's own first element (the common case: a single action button) so its own\n        // click handler runs the real action — `confirm` covers slots without a clickable element.\n        onConfirm: (side) => {\n          const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n          emit('confirm', { item: el, side });\n          target?.click();\n        },\n      });\n\n      onCleanup(() => pan.dispose());\n    });\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\">\n        <span class=\"leading\" part=\"leading\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;AAyDA,IAAM,KAAc,MAClB,MAAS,SAAS,iBAAiB,iBAiExB,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,GAAG;EACH,UAAU,EAAK,MAAsC,CAAC,QAAQ,OAAO,GAAG,KAAA,CAAS;EACjF,OAAO,EAAK,OAAO;CACrB;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA2B,GAClC,IAAQ,EAAoF,GAE5F,IAAU,EAAO,CAAQ,GACzB,IAAe,QAAe,EAAQ,GAAS,WAAW,KAAM,GAGhE,IAAa,QACX,EAAM,MAAM,SAAS,QAAQ,KAAW,QAAQ,EAAQ,MAAM,UAAU,EAAM,MAAM,KAC5F,GAEM,KAAc,MAAsC,EAAM,IAAI,EAAW,CAAI,CAAC,CAAC,CAAC;EA0BtF,AAxBA,QAAgB;GACd,IAAM,IAAM,EAAG,YAAY,cAA2B,MAAM;GAE5D,IAAI,CAAC,GAAK;GAEV,IAAM,IAAM,EAAkB,GAAI,GAAK;IACrC,UAAU,QAAe,EAAM,SAAS,SAAS,EAAQ,EAAM,SAAS,KAAM;IAC9E;IAGA,YAAY,MAAS;KACnB,IAAM,IAAS,EAAM,SAAS,EAAW,CAAI,CAAC,CAAC,CAAC,MAAM;KAGtD,AADA,EAAK,WAAW;MAAE,MAAM;MAAI;KAAK,CAAC,GAClC,GAAQ,MAAM;IAChB;GACF,CAAC;GAED,QAAgB,EAAI,QAAQ,CAAC;EAC/B,CAAC,GAKD,QAAkB;GAChB,EAAG,gBAAgB,YAAY,EAAW,KAAK;EACjD,CAAC;EAMD,IAAI,IAAe,EAAW;EAE9B,QAAkB;GAChB,IAAM,IAAU,EAAW;GAEvB,MAAY,MAEhB,IAAe,GACf,EAAK,IAAU,WAAW,YAAY;IAAE,MAAM;IAAI,OAAO,EAAM,MAAM,SAAS;GAAK,CAAC;EACtF,CAAC;EAED,IAAI,IAAe,EAAM,SAAS,SAAS;EAE3C,QAAkB;GAChB,IAAM,IAAU,EAAM,SAAS,SAAS;GAEpC,MAAY,MAEhB,IAAe,GAEX,KAGF,GAAS,cAAc,CAAE,GACzB,EAAK,UAAU;IAAE,MAAM;IAAI,MAAM;GAAQ,CAAC,KAE1C,EAAK,WAAW,EAAE,MAAM,EAAG,CAAC;EAEhC,CAAC;EAED,IAAM,KAAkB,MAAuB;GAC7C,IAAI,EAAM,SAAS,OAAO;GAE1B,IAAI,EAAM,SAAS,OAAO;IAGxB,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAG,gBAAgB,UAAU;IAE7B;GACF;GAEA,IAAI,CAAC,EAAa,OAAO;GAEzB,IAAM,IAAQ,EAAM,MAAM;GAI1B,AAAI,KAAS,QAAM,GAAS,OAAO,EAAW,QAAQ,KAAA,IAAY,CAAK;EACzE;EAmBA,OARA,EAAK,EACH,MAAM;GACJ,uBAAwB,EAAM,SAAS,QAAQ,SAAS;GACxD,uBAAwB,EAAa,QAAQ,OAAO,EAAW,KAAK,IAAI;GACxE,YAAa,EAAa,QAAQ,WAAW;EAC/C,EACF,CAAC,GAEM,CAAI;;;;0BAIY,EAAM,SAAS,QAAQ,OAAO,IAAK;kBAC5C,EAAe;qBAtBH,MAA+B;GACnD,GAAM,QAAQ,WAAW,EAAM,QAAQ,SAEvC,EAAM,SAAS,SAAU,CAAC,EAAM,SAAS,SAAS,CAAC,EAAa,UAEpE,EAAM,eAAe,GACrB,EAAe,CAAK;EACtB,EAgBiC;;;;;;;;;;;CAWnC;CAEA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/list.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./content/list/list.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`ListContext`),l=`ore-list`;(0,o.define)(l,{props:{...r.disablableBundle,...r.sizableBundle,selectable:o.prop.bool(!1),value:o.prop.string(),variant:o.prop.string()},setup(e){let r=(0,o.getHost)(),i=(0,o.useEmit)(),a=()=>[...r.querySelectorAll(`:scope > ore-list-item:not([disabled])`)],l=()=>[...r.querySelectorAll(`:scope > ore-list-item`)],u=e=>e.shadowRoot?.querySelector(`[part="row"]`)??null,d=()=>a().map(u).filter(e=>e!=null),f=n.createListControl({getItems:a,loop:!0,onNavigate:(e,t)=>{u(a()[t])?.focus()},signal:t.lifecycleSignal(o.onCleanup)}),p=(0,s.signal)(e.value.value);(0,s.watch)(e.value,e=>{p.value=e});let m=e=>{p.value!==e&&(p.value=e,i(`change`,{value:e??null}))},h=e=>{for(let t of l())t!==e&&t.removeAttribute(`revealed`)},g=e=>{let t=l().find(e=>e.hasAttribute(`revealed`));!t||e.composedPath().includes(t)||t.removeAttribute(`revealed`)};return document.addEventListener(`pointerdown`,g,{capture:!0}),(0,o.onCleanup)(()=>document.removeEventListener(`pointerdown`,g,{capture:!0})),(0,o.provide)(c,{requestReveal:h,select:m,selectable:(0,s.computed)(()=>!!e.selectable.value),value:p}),(0,o.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,role:()=>e.selectable.value?`listbox`:`list`,value:()=>p.value??null},on:{keydown:t=>{if(!e.selectable.value||e.disabled.value)return;let n=t.composedPath().find(e=>e instanceof HTMLElement&&e.getAttribute(`part`)===`row`);if(!n)return;let r=d().indexOf(n);r!==-1&&(f.set(r),f.handleKeydown(t))}}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./content/list/list.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`ListContext`),l=`ore-list`;(0,o.define)(l,{props:{...r.disablableBundle,...r.sizableBundle,selectable:o.prop.bool(!1),value:o.prop.string(),variant:o.prop.string()},setup(e){let r=(0,o.getHost)(),i=(0,o.useEmit)(),a=()=>[...r.querySelectorAll(`:scope > ore-list-item:not([disabled])`)],l=()=>[...r.querySelectorAll(`:scope > ore-list-item`)],u=e=>e.shadowRoot?.querySelector(`[part="row"]`)??null,d=()=>a().map(u).filter(e=>e!=null),f=n.createListControl({getItems:a,loop:!0,onNavigate:({item:e})=>{u(e)?.focus()},signal:t.lifecycleSignal(o.onCleanup)}),p=(0,s.signal)(e.value.value);(0,s.watch)(e.value,e=>{p.value=e});let m=e=>{p.value!==e&&(p.value=e,i(`change`,{value:e??null}))},h=e=>{for(let t of l())t!==e&&t.removeAttribute(`revealed`)},g=e=>{let t=l().find(e=>e.hasAttribute(`revealed`));!t||e.composedPath().includes(t)||t.removeAttribute(`revealed`)};return document.addEventListener(`pointerdown`,g,{capture:!0}),(0,o.onCleanup)(()=>document.removeEventListener(`pointerdown`,g,{capture:!0})),(0,o.provide)(c,{requestReveal:h,select:m,selectable:(0,s.computed)(()=>!!e.selectable.value),value:p}),(0,o.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,role:()=>e.selectable.value?`listbox`:`list`,value:()=>p.value??null},on:{keydown:t=>{if(!e.selectable.value||e.disabled.value)return;let n=t.composedPath().find(e=>e instanceof HTMLElement&&e.getAttribute(`part`)===`row`);if(!n)return;let r=d().indexOf(n);r!==-1&&(f.set(r),f.handleKeydown(t))}}}),o.html`
       <slot></slot>
     `},styles:[e.sizeVariantMixin(i.LIST_SIZE_PRESET),a.default]}),exports.LIST_CTX=c,exports.LIST_TAG=l;
 //# sourceMappingURL=list.cjs.map