@vielzeug/refine 26.10.0 → 26.10.1

package/dist/feedback/chip/chip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.css.js","names":[],"sources":["../../../src/feedback/chip/chip.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chip-bg, var(--color-contrast-150));\n    --_color: var(--chip-color, var(--color-contrast-800));\n    --_border-color: var(--chip-border-color, transparent);\n    --_radius: var(--chip-radius, var(--rounded-lg));\n    --_font-size: var(--chip-font-size, var(--text-sm));\n    --_font-weight: var(--chip-font-weight, var(--font-medium));\n    --_padding-x: var(--chip-padding-x, var(--size-2-5));\n    --_padding-y: var(--chip-padding-y, var(--size-0-5));\n    --_gap: var(--chip-gap, var(--size-1));\n    --_icon-size: var(--chip-icon-size, 1em);\n\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    vertical-align: middle;\n  }\n\n  .chip {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: 100%;\n    padding: var(--_padding-y) var(--_padding-x);\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1.2;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n       Remove Button\n       ======================================== */\n\n  .remove-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.35em;\n    height: 1.35em;\n    padding: 0;\n    margin-inline: var(--size-0-5) calc(var(--size-2) * -1);\n    color: inherit;\n    cursor: pointer;\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    border: none;\n    border-radius: var(--_radius);\n    opacity: 0.7;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .remove-btn:hover {\n    background: color-mix(in oklch, currentcolor 28%, transparent);\n    opacity: 1;\n  }\n\n  .remove-btn:focus-visible {\n    outline: 2px solid currentcolor;\n    outline-offset: 1px;\n    opacity: 1;\n  }\n\n  /* ========================================\n       Icon slot\n       ======================================== */\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n  }\n\n  /* ========================================\n       Stacked layout — icon above a wrapping label (tile-like chips)\n       ======================================== */\n\n  :host([layout='stacked']) {\n    display: inline-flex;\n  }\n\n  :host([layout='stacked']) .chip {\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: var(--_padding-x);\n    text-align: center;\n    white-space: normal;\n  }\n\n  :host([layout='stacked']) .label {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: clip;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    white-space: normal;\n  }\n\n  :host([layout='stacked']) .remove-btn {\n    margin-inline: 0;\n  }\n\n  .chip-btn {\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .chip-btn:disabled {\n    cursor: not-allowed;\n  }\n\n  :host([mode='selectable'][checked]) .chip {\n    outline: var(--border-2) solid var(--_theme-base, currentColor);\n    outline-offset: -2px;\n  }\n\n  :host([mode='selectable']:not([disabled])) .chip,\n  :host([mode='action']:not([disabled])) .chip {\n    cursor: pointer;\n  }\n\n  .chip-btn:focus-visible {\n    outline: 2px solid var(--_theme-base, currentColor);\n    outline-offset: 2px;\n    border-radius: var(--_radius);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) — full theme color fill */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--chip-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_color: var(--chip-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-800)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n  }\n\n  /* Flat — subtle tint */\n  :host([variant='flat']) {\n    --_bg: var(--chip-bg, color-mix(in oklch, var(--_theme-backdrop, var(--color-contrast-200)) 55%, transparent));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-800)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Bordered — backdrop fill with themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--chip-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-border, var(--color-contrast-300)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Outline — transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-base, var(--color-contrast-400)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Ghost — transparent, no border */\n  :host([variant='ghost']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--chip-hover-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(--chip-hover-border-color, color-mix(in oklch, var(--_theme-focus) 40%, transparent));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: color-mix(in oklch, var(--_theme-focus) 40%, transparent);\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--chip-hover-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(--chip-hover-border-color, color-mix(in oklch, var(--_theme-focus) 65%, transparent));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_active-border-color: color-mix(in oklch, var(--_theme-focus) 65%, transparent);\n  }\n\n  /* ── Remove button theming (tokens set per-variant above) ── */\n\n  :host([variant='bordered']) .remove-btn,\n  :host([variant='outline']) .remove-btn {\n    color: var(--_remove-color);\n    background: var(--_remove-bg);\n    border: var(--border) solid var(--_remove-bg);\n  }\n\n  :host([variant='bordered']) .remove-btn:hover,\n  :host([variant='outline']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, var(--_remove-bg) 80%, var(--color-contrast-900)));\n    opacity: 1;\n  }\n\n  :host([variant='ghost']) .remove-btn {\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, currentcolor 15%, transparent));\n  }\n\n  /* ========================================\n     Hover / Active Feedback — interactive modes\n     ======================================== */\n\n  :host(\n      :is(\n        :not([variant]),\n        [variant='solid'],\n        [variant='flat'],\n        [variant='bordered'],\n        [variant='outline'],\n        [variant='ghost'],\n        [variant='frost']\n      ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:hover\n    .chip {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  :host(\n      :is(\n        :not([variant]),\n        [variant='solid'],\n        [variant='flat'],\n        [variant='bordered'],\n        [variant='outline'],\n        [variant='ghost'],\n        [variant='frost']\n      ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:active\n    .chip {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"chip.css.js","names":[],"sources":["../../../src/feedback/chip/chip.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chip-bg, var(--color-contrast-150));\n    --_color: var(--chip-color, var(--color-contrast-800));\n    --_border-color: var(--chip-border-color, transparent);\n    --_radius: var(--chip-radius, var(--rounded-lg));\n    --_font-size: var(--chip-font-size, var(--text-sm));\n    --_font-weight: var(--chip-font-weight, var(--font-medium));\n    --_padding-x: var(--chip-padding-x, var(--size-2-5));\n    --_padding-y: var(--chip-padding-y, var(--size-0-5));\n    --_gap: var(--chip-gap, var(--size-1));\n    --_icon-size: var(--chip-icon-size, 1em);\n\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    vertical-align: middle;\n  }\n\n  .chip {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: 100%;\n    padding: var(--_padding-y) var(--_padding-x);\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1.2;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n       Remove Button\n       ======================================== */\n\n  .remove-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.35em;\n    height: 1.35em;\n    padding: 0;\n    margin-inline: var(--size-0-5) calc(var(--size-2) * -1);\n    color: inherit;\n    cursor: pointer;\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    border: none;\n    border-radius: var(--_radius);\n    opacity: 0.7;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .remove-btn:hover {\n    background: color-mix(in oklch, currentcolor 28%, transparent);\n    opacity: 1;\n  }\n\n  .remove-btn:focus-visible {\n    outline: 2px solid currentcolor;\n    outline-offset: 1px;\n    opacity: 1;\n  }\n\n  /* ========================================\n       Icon slot\n       ======================================== */\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n  }\n\n  /* ========================================\n       Stacked layout: icon above a wrapping label (tile-like chips)\n       ======================================== */\n\n  :host([layout='stacked']) {\n    display: inline-flex;\n  }\n\n  :host([layout='stacked']) .chip {\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: var(--_padding-x);\n    text-align: center;\n    white-space: normal;\n  }\n\n  :host([layout='stacked']) .label {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: clip;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    white-space: normal;\n  }\n\n  :host([layout='stacked']) .remove-btn {\n    margin-inline: 0;\n  }\n\n  .chip-btn {\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .chip-btn:disabled {\n    cursor: not-allowed;\n  }\n\n  :host([mode='selectable'][checked]) .chip {\n    outline: var(--border-2) solid var(--_theme-base, currentColor);\n    outline-offset: -2px;\n  }\n\n  :host([mode='selectable']:not([disabled])) .chip,\n  :host([mode='action']:not([disabled])) .chip {\n    cursor: pointer;\n  }\n\n  .chip-btn:focus-visible {\n    outline: 2px solid var(--_theme-base, currentColor);\n    outline-offset: 2px;\n    border-radius: var(--_radius);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default): full theme color fill */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--chip-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_color: var(--chip-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-800)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n  }\n\n  /* Flat: subtle tint */\n  :host([variant='flat']) {\n    --_bg: var(--chip-bg, color-mix(in oklch, var(--_theme-backdrop, var(--color-contrast-200)) 55%, transparent));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-800)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Bordered: backdrop fill with themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--chip-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-border, var(--color-contrast-300)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Outline: transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-base, var(--color-contrast-400)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Ghost: transparent, no border */\n  :host([variant='ghost']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--chip-hover-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(--chip-hover-border-color, color-mix(in oklch, var(--_theme-focus) 40%, transparent));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: color-mix(in oklch, var(--_theme-focus) 40%, transparent);\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--chip-hover-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(--chip-hover-border-color, color-mix(in oklch, var(--_theme-focus) 65%, transparent));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_active-border-color: color-mix(in oklch, var(--_theme-focus) 65%, transparent);\n  }\n\n  /* ── Remove button theming (tokens set per-variant above) ── */\n\n  :host([variant='bordered']) .remove-btn,\n  :host([variant='outline']) .remove-btn {\n    color: var(--_remove-color);\n    background: var(--_remove-bg);\n    border: var(--border) solid var(--_remove-bg);\n  }\n\n  :host([variant='bordered']) .remove-btn:hover,\n  :host([variant='outline']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, var(--_remove-bg) 80%, var(--color-contrast-900)));\n    opacity: 1;\n  }\n\n  :host([variant='ghost']) .remove-btn {\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, currentcolor 15%, transparent));\n  }\n\n  /* ========================================\n     Hover / Active Feedback: interactive modes\n     ======================================== */\n\n  :host(\n      :is(\n        :not([variant]),\n        [variant='solid'],\n        [variant='flat'],\n        [variant='bordered'],\n        [variant='outline'],\n        [variant='ghost'],\n        [variant='frost']\n      ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:hover\n    .chip {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  :host(\n      :is(\n        :not([variant]),\n        [variant='solid'],\n        [variant='flat'],\n        [variant='bordered'],\n        [variant='outline'],\n        [variant='ghost'],\n        [variant='frost']\n      ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:active\n    .chip {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/chip/chip.d.ts

@@ -14,7 +14,7 @@ type ChipBaseProps = {
     rounded?: RoundedSize | '';
     /** Component size */
     size?: ComponentSize;
-    /** Value associated with this chip — included in emitted event detail */
+    /** Value associated with this chip: included in emitted event detail */
     value?: string;
     /** Visual style variant */
     variant?: Exclude<VisualVariant, 'text'>;
@@ -36,7 +36,7 @@ type SelectableChipProps = {
     'default-checked'?: boolean;
     mode: Extract<OreChipMode, 'selectable'>;
 };
-/** Action chip mode — behaves like a button, fires a click event without maintaining state */
+/** Action chip mode: behaves like a button, fires a click event without maintaining state */
 type ActionChipProps = {
     mode: Extract<OreChipMode, 'action'>;
 };
@@ -68,7 +68,7 @@ export type OreChipProps = ChipBaseProps & (StaticChipProps | RemovableChipProps
  * @attr {string}  size      - Component size: 'sm' | 'md' | 'lg'
  * @attr {string}  rounded   - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
  * @attr {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'
- * @attr {string}  layout    - Content layout: 'inline' (default) | 'stacked' — stacked places the icon above a wrapping label, for tile-like selectable chips
+ * @attr {string}  layout    - Content layout: 'inline' (default) | 'stacked': stacked places the icon above a wrapping label, for tile-like selectable chips
  * @attr {boolean} disabled  - Disable the chip
  * @attr {string}  value     - Value included in emitted event detail
  * @attr {boolean} checked   - Controlled checked state for selectable chips

package/dist/feedback/chip/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/feedback/chip/chip.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMzF,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAMnD,gCAAgC;AAChC,KAAK,aAAa,GAAG;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4HAA4H;IAC5H,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF,KAAK,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEpE,kCAAkC;AAClC,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACvC,CAAC;AAEF,0BAA0B;AAC1B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,2BAA2B;AAC3B,KAAK,mBAAmB,GAAG;IACzB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;CAC1C,CAAC;AAEF,8FAA8F;AAC9F,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACtC,CAAC;AAQF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC9E,KAAK,EAAE;QAAE,aAAa,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAChE,MAAM,EAAE;QAAE,aAAa,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CAAC,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,eAAe,CAAC,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/feedback/chip/chip.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMzF,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAMnD,gCAAgC;AAChC,KAAK,aAAa,GAAG;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4HAA4H;IAC5H,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF,KAAK,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEpE,kCAAkC;AAClC,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACvC,CAAC;AAEF,0BAA0B;AAC1B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,2BAA2B;AAC3B,KAAK,mBAAmB,GAAG;IACzB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;CAC1C,CAAC;AAEF,6FAA6F;AAC7F,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACtC,CAAC;AAQF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC9E,KAAK,EAAE;QAAE,aAAa,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAChE,MAAM,EAAE;QAAE,aAAa,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CAAC,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,eAAe,CAAC,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/feedback/cookie-banner/cookie-banner.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-banner.css.cjs","names":[],"sources":["../../../src/feedback/cookie-banner/cookie-banner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_banner-width: var(--cookie-banner-width, min(560px, calc(100vw - var(--size-8))));\n    --_banner-inset: var(--cookie-banner-inset, var(--size-4));\n    --_banner-z-index: var(--cookie-banner-z-index, var(--z-modal));\n    --_categories-max-height: var(--cookie-banner-categories-max-height, 16rem);\n    --_dock-bottom: max(var(--_banner-inset), env(safe-area-inset-bottom, 0px));\n    --_dock-top: max(var(--_banner-inset), env(safe-area-inset-top, 0px));\n\n    position: fixed;\n    inset-inline: var(--_banner-inset);\n    z-index: var(--_banner-z-index);\n    display: block;\n    max-width: var(--_banner-width);\n    margin-inline: auto;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([position='top']) {\n    top: var(--_dock-top);\n  }\n\n  :host(:not([position='top'])) {\n    bottom: var(--_dock-bottom);\n  }\n\n  /* Single column: heading, policy text, scrollable category panel, actions.\n     The same structure serves one category or ten — only the panel scrolls. */\n  .banner {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n    padding: var(--size-4) var(--size-5);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-50);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--shadow-lg);\n  }\n\n  /* The card must fit between its docked edge and the opposite viewport edge,\n     so a large --cookie-banner-inset (e.g. above a bottom nav) shrinks it. */\n  :host(:not([position='top'])) .banner {\n    max-height: calc(100dvh - var(--_dock-bottom) - var(--size-4));\n  }\n\n  :host([position='top']) .banner {\n    max-height: calc(100dvh - var(--_dock-top) - var(--size-4));\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--text-base);\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n  }\n\n  .text {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  .text ::slotted(a) {\n    color: var(--color-primary);\n    text-decoration: underline;\n  }\n\n  /* The category panel scrolls internally past the threshold, so the banner\n     never grows past the viewport regardless of how many categories there are. */\n  .categories {\n    display: flex;\n    flex-direction: column;\n    max-height: var(--_categories-max-height);\n    padding: var(--size-2) var(--size-3);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-100);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-sm);\n  }\n\n  .category-row {\n    display: flex;\n    flex-direction: column;\n    padding-block: var(--size-1);\n  }\n\n  .category-row + .category-row {\n    border-top: 1px solid var(--color-divider);\n  }\n\n  /* Category descriptions arrive as the checkbox's helper text (aria-describedby-\n     wired); sized up to --text-sm because they carry the consent decision's\n     substance, and recolored to --text-muted — the checkbox's default helper mix\n     measures 3.77:1 on the sunken panel, below AA. */\n  .category-row ore-checkbox::part(helper-text) {\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--text-muted);\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* Narrow viewports: tighter rhythm — the card padding, section gaps and the\n     nested panel padding compound (a box in a box), so each steps down one\n     token to hand more of the small screen back to the page beneath. */\n  @media (width <= 640px) {\n    .banner {\n      gap: var(--size-2);\n      padding: var(--size-3);\n    }\n\n    .categories {\n      padding: var(--size-1) var(--size-2);\n    }\n  }\n\n  /* Narrow viewports with room to spare: actions stack full-width (the primary\n     lands in the thumb zone). Short landscape viewports keep the row layout —\n     a three-row button stack would crowd out the content. */\n  @media ((width <= 640px) and (height > 480px)) {\n    .actions {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    .actions ore-button {\n      width: 100%;\n    }\n  }\n\n  :host(:not([position='top'])) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-rise var(--transition-slow) both);\n  }\n\n  :host([position='top']) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-drop var(--transition-slow) both);\n  }\n\n  @keyframes ore-cookie-banner-rise {\n    from {\n      opacity: 0;\n      transform: translateY(var(--size-4));\n    }\n  }\n\n  @keyframes ore-cookie-banner-drop {\n    from {\n      opacity: 0;\n      transform: translateY(calc(var(--size-4) * -1));\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"cookie-banner.css.cjs","names":[],"sources":["../../../src/feedback/cookie-banner/cookie-banner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_banner-width: var(--cookie-banner-width, min(560px, calc(100vw - var(--size-8))));\n    --_banner-inset: var(--cookie-banner-inset, var(--size-4));\n    --_banner-z-index: var(--cookie-banner-z-index, var(--z-modal));\n    --_categories-max-height: var(--cookie-banner-categories-max-height, 16rem);\n    --_dock-bottom: max(var(--_banner-inset), env(safe-area-inset-bottom, 0px));\n    --_dock-top: max(var(--_banner-inset), env(safe-area-inset-top, 0px));\n\n    position: fixed;\n    inset-inline: var(--_banner-inset);\n    z-index: var(--_banner-z-index);\n    display: block;\n    max-width: var(--_banner-width);\n    margin-inline: auto;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([position='top']) {\n    top: var(--_dock-top);\n  }\n\n  :host(:not([position='top'])) {\n    bottom: var(--_dock-bottom);\n  }\n\n  /* Single column: heading, policy text, scrollable category panel, actions.\n     The same structure serves one category or ten: only the panel scrolls. */\n  .banner {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n    padding: var(--size-4) var(--size-5);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-50);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--shadow-lg);\n  }\n\n  /* The card must fit between its docked edge and the opposite viewport edge,\n     so a large --cookie-banner-inset (e.g. above a bottom nav) shrinks it. */\n  :host(:not([position='top'])) .banner {\n    max-height: calc(100dvh - var(--_dock-bottom) - var(--size-4));\n  }\n\n  :host([position='top']) .banner {\n    max-height: calc(100dvh - var(--_dock-top) - var(--size-4));\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--text-base);\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n  }\n\n  .text {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  .text ::slotted(a) {\n    color: var(--color-primary);\n    text-decoration: underline;\n  }\n\n  /* The category panel scrolls internally past the threshold, so the banner\n     never grows past the viewport regardless of how many categories there are. */\n  .categories {\n    display: flex;\n    flex-direction: column;\n    max-height: var(--_categories-max-height);\n    padding: var(--size-2) var(--size-3);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-100);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-sm);\n  }\n\n  .category-row {\n    display: flex;\n    flex-direction: column;\n    padding-block: var(--size-1);\n  }\n\n  .category-row + .category-row {\n    border-top: 1px solid var(--color-divider);\n  }\n\n  /* Category descriptions arrive as the checkbox's helper text (aria-describedby-\n     wired); sized up to --text-sm because they carry the consent decision's\n     substance, and recolored to --text-muted: the checkbox's default helper mix\n     measures 3.77:1 on the sunken panel, below AA. */\n  .category-row ore-checkbox::part(helper-text) {\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--text-muted);\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* Narrow viewports: tighter rhythm: the card padding, section gaps and the\n     nested panel padding compound (a box in a box), so each steps down one\n     token to hand more of the small screen back to the page beneath. */\n  @media (width <= 640px) {\n    .banner {\n      gap: var(--size-2);\n      padding: var(--size-3);\n    }\n\n    .categories {\n      padding: var(--size-1) var(--size-2);\n    }\n  }\n\n  /* Narrow viewports with room to spare: actions stack full-width (the primary\n     lands in the thumb zone). Short landscape viewports keep the row layout :\n     a three-row button stack would crowd out the content. */\n  @media ((width <= 640px) and (height > 480px)) {\n    .actions {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    .actions ore-button {\n      width: 100%;\n    }\n  }\n\n  :host(:not([position='top'])) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-rise var(--transition-slow) both);\n  }\n\n  :host([position='top']) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-drop var(--transition-slow) both);\n  }\n\n  @keyframes ore-cookie-banner-rise {\n    from {\n      opacity: 0;\n      transform: translateY(var(--size-4));\n    }\n  }\n\n  @keyframes ore-cookie-banner-drop {\n    from {\n      opacity: 0;\n      transform: translateY(calc(var(--size-4) * -1));\n    }\n  }\n}\n"],"mappings":""}

package/dist/feedback/cookie-banner/cookie-banner.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-banner.css.js","names":[],"sources":["../../../src/feedback/cookie-banner/cookie-banner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_banner-width: var(--cookie-banner-width, min(560px, calc(100vw - var(--size-8))));\n    --_banner-inset: var(--cookie-banner-inset, var(--size-4));\n    --_banner-z-index: var(--cookie-banner-z-index, var(--z-modal));\n    --_categories-max-height: var(--cookie-banner-categories-max-height, 16rem);\n    --_dock-bottom: max(var(--_banner-inset), env(safe-area-inset-bottom, 0px));\n    --_dock-top: max(var(--_banner-inset), env(safe-area-inset-top, 0px));\n\n    position: fixed;\n    inset-inline: var(--_banner-inset);\n    z-index: var(--_banner-z-index);\n    display: block;\n    max-width: var(--_banner-width);\n    margin-inline: auto;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([position='top']) {\n    top: var(--_dock-top);\n  }\n\n  :host(:not([position='top'])) {\n    bottom: var(--_dock-bottom);\n  }\n\n  /* Single column: heading, policy text, scrollable category panel, actions.\n     The same structure serves one category or ten — only the panel scrolls. */\n  .banner {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n    padding: var(--size-4) var(--size-5);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-50);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--shadow-lg);\n  }\n\n  /* The card must fit between its docked edge and the opposite viewport edge,\n     so a large --cookie-banner-inset (e.g. above a bottom nav) shrinks it. */\n  :host(:not([position='top'])) .banner {\n    max-height: calc(100dvh - var(--_dock-bottom) - var(--size-4));\n  }\n\n  :host([position='top']) .banner {\n    max-height: calc(100dvh - var(--_dock-top) - var(--size-4));\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--text-base);\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n  }\n\n  .text {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  .text ::slotted(a) {\n    color: var(--color-primary);\n    text-decoration: underline;\n  }\n\n  /* The category panel scrolls internally past the threshold, so the banner\n     never grows past the viewport regardless of how many categories there are. */\n  .categories {\n    display: flex;\n    flex-direction: column;\n    max-height: var(--_categories-max-height);\n    padding: var(--size-2) var(--size-3);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-100);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-sm);\n  }\n\n  .category-row {\n    display: flex;\n    flex-direction: column;\n    padding-block: var(--size-1);\n  }\n\n  .category-row + .category-row {\n    border-top: 1px solid var(--color-divider);\n  }\n\n  /* Category descriptions arrive as the checkbox's helper text (aria-describedby-\n     wired); sized up to --text-sm because they carry the consent decision's\n     substance, and recolored to --text-muted — the checkbox's default helper mix\n     measures 3.77:1 on the sunken panel, below AA. */\n  .category-row ore-checkbox::part(helper-text) {\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--text-muted);\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* Narrow viewports: tighter rhythm — the card padding, section gaps and the\n     nested panel padding compound (a box in a box), so each steps down one\n     token to hand more of the small screen back to the page beneath. */\n  @media (width <= 640px) {\n    .banner {\n      gap: var(--size-2);\n      padding: var(--size-3);\n    }\n\n    .categories {\n      padding: var(--size-1) var(--size-2);\n    }\n  }\n\n  /* Narrow viewports with room to spare: actions stack full-width (the primary\n     lands in the thumb zone). Short landscape viewports keep the row layout —\n     a three-row button stack would crowd out the content. */\n  @media ((width <= 640px) and (height > 480px)) {\n    .actions {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    .actions ore-button {\n      width: 100%;\n    }\n  }\n\n  :host(:not([position='top'])) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-rise var(--transition-slow) both);\n  }\n\n  :host([position='top']) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-drop var(--transition-slow) both);\n  }\n\n  @keyframes ore-cookie-banner-rise {\n    from {\n      opacity: 0;\n      transform: translateY(var(--size-4));\n    }\n  }\n\n  @keyframes ore-cookie-banner-drop {\n    from {\n      opacity: 0;\n      transform: translateY(calc(var(--size-4) * -1));\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"cookie-banner.css.js","names":[],"sources":["../../../src/feedback/cookie-banner/cookie-banner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_banner-width: var(--cookie-banner-width, min(560px, calc(100vw - var(--size-8))));\n    --_banner-inset: var(--cookie-banner-inset, var(--size-4));\n    --_banner-z-index: var(--cookie-banner-z-index, var(--z-modal));\n    --_categories-max-height: var(--cookie-banner-categories-max-height, 16rem);\n    --_dock-bottom: max(var(--_banner-inset), env(safe-area-inset-bottom, 0px));\n    --_dock-top: max(var(--_banner-inset), env(safe-area-inset-top, 0px));\n\n    position: fixed;\n    inset-inline: var(--_banner-inset);\n    z-index: var(--_banner-z-index);\n    display: block;\n    max-width: var(--_banner-width);\n    margin-inline: auto;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([position='top']) {\n    top: var(--_dock-top);\n  }\n\n  :host(:not([position='top'])) {\n    bottom: var(--_dock-bottom);\n  }\n\n  /* Single column: heading, policy text, scrollable category panel, actions.\n     The same structure serves one category or ten: only the panel scrolls. */\n  .banner {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n    padding: var(--size-4) var(--size-5);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-50);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--shadow-lg);\n  }\n\n  /* The card must fit between its docked edge and the opposite viewport edge,\n     so a large --cookie-banner-inset (e.g. above a bottom nav) shrinks it. */\n  :host(:not([position='top'])) .banner {\n    max-height: calc(100dvh - var(--_dock-bottom) - var(--size-4));\n  }\n\n  :host([position='top']) .banner {\n    max-height: calc(100dvh - var(--_dock-top) - var(--size-4));\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--text-base);\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n  }\n\n  .text {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  .text ::slotted(a) {\n    color: var(--color-primary);\n    text-decoration: underline;\n  }\n\n  /* The category panel scrolls internally past the threshold, so the banner\n     never grows past the viewport regardless of how many categories there are. */\n  .categories {\n    display: flex;\n    flex-direction: column;\n    max-height: var(--_categories-max-height);\n    padding: var(--size-2) var(--size-3);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--color-contrast-100);\n    border: 1px solid var(--color-divider);\n    border-radius: var(--rounded-sm);\n  }\n\n  .category-row {\n    display: flex;\n    flex-direction: column;\n    padding-block: var(--size-1);\n  }\n\n  .category-row + .category-row {\n    border-top: 1px solid var(--color-divider);\n  }\n\n  /* Category descriptions arrive as the checkbox's helper text (aria-describedby-\n     wired); sized up to --text-sm because they carry the consent decision's\n     substance, and recolored to --text-muted: the checkbox's default helper mix\n     measures 3.77:1 on the sunken panel, below AA. */\n  .category-row ore-checkbox::part(helper-text) {\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--text-muted);\n  }\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* Narrow viewports: tighter rhythm: the card padding, section gaps and the\n     nested panel padding compound (a box in a box), so each steps down one\n     token to hand more of the small screen back to the page beneath. */\n  @media (width <= 640px) {\n    .banner {\n      gap: var(--size-2);\n      padding: var(--size-3);\n    }\n\n    .categories {\n      padding: var(--size-1) var(--size-2);\n    }\n  }\n\n  /* Narrow viewports with room to spare: actions stack full-width (the primary\n     lands in the thumb zone). Short landscape viewports keep the row layout :\n     a three-row button stack would crowd out the content. */\n  @media ((width <= 640px) and (height > 480px)) {\n    .actions {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    .actions ore-button {\n      width: 100%;\n    }\n  }\n\n  :host(:not([position='top'])) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-rise var(--transition-slow) both);\n  }\n\n  :host([position='top']) .banner {\n    animation: var(--_motion-animation, ore-cookie-banner-drop var(--transition-slow) both);\n  }\n\n  @keyframes ore-cookie-banner-rise {\n    from {\n      opacity: 0;\n      transform: translateY(var(--size-4));\n    }\n  }\n\n  @keyframes ore-cookie-banner-drop {\n    from {\n      opacity: 0;\n      transform: translateY(calc(var(--size-4) * -1));\n    }\n  }\n}\n"],"mappings":""}

package/dist/feedback/cookie-banner/cookie-banner.d.ts

@@ -6,7 +6,7 @@ export type OreCookieBannerCategory = {
     id: string;
     label: string;
 };
-/** All rendered labels, each with an English default — pass translated strings for other locales. */
+/** All rendered labels, each with an English default: pass translated strings for other locales. */
 export type OreCookieBannerLabels = Partial<{
     acceptAll: string;
     essential: string;
@@ -19,7 +19,7 @@ export type OreCookieBannerLabels = Partial<{
 export type CookieConsentRecord = Record<string, boolean>;
 /** Element interface exposing the imperative API for `ore-cookie-banner`. */
 export interface CookieBannerElement extends HTMLElement, OreCookieBannerProps {
-    /** Hides the banner without emitting anything — persistence stays with the consumer. */
+    /** Hides the banner without emitting anything: persistence stays with the consumer. */
     hide(): void;
     /** Shows the banner again, for example from a "Cookie settings" link after a decision. */
     show(): void;
@@ -47,8 +47,8 @@ export type OreCookieBannerProps = {
  * (default slot, links included), optional per-category opt-in checkboxes with
  * descriptions, and accept-all / reject / save actions.
  *
- * The layout is a single column — heading, policy text, a scrollable category
- * panel, and actions — that scales linearly from one to many categories. Each
+ * The layout is a single column: heading, policy text, a scrollable category
+ * panel, and actions, that scales linearly from one to many categories. Each
  * category renders as a checkbox row; its optional `description` passes through
  * the checkbox's `helper` mechanism, so it is both visible below the label and
  * linked to the control via `aria-describedby`. The category panel scrolls
@@ -62,14 +62,14 @@ export type OreCookieBannerProps = {
  * their choice.
  *
  * The banner is a non-modal `role="dialog"`: screen readers announce it when it
- * appears, focus moves to the dialog card itself on `show()` — a neutral target,
- * so no action is preselected for keyboard users — and returns to the previously
+ * appears, focus moves to the dialog card itself on `show()`: a neutral target,
+ * so no action is preselected for keyboard users, and returns to the previously
  * focused element on `hide()`. A banner that is simply present at page load (never
  * shown via `show()`) does not steal focus and is not announced; consumers that
  * want a load-time announcement should call `show()` from a user gesture.
  *
  * The `decide` record contains exactly the currently configured category ids
- * (plus `essential`, always true). Replace — do not merge — the stored record
+ * (plus `essential`, always true). Replace: do not merge: the stored record
  * with it, so categories removed between sessions drop their stale keys.
  *
  * @element ore-cookie-banner
@@ -77,7 +77,7 @@ export type OreCookieBannerProps = {
  * @attr {string} position - Viewport edge: 'bottom' (default) | 'top'
  * @attr {boolean} hide-on-decide - Hides the banner after `decide` (default true)
  *
- * @fires decide - A decision was made. detail: { consent } — every category id plus `essential`, always true.
+ * @fires decide - A decision was made. detail: { consent }: every category id plus `essential`, always true.
  *
  * @slot - Policy text, including links to the privacy policy and imprint
  *

package/dist/feedback/cookie-banner/cookie-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-banner.d.ts","sourceRoot":"","sources":["../../../src/feedback/cookie-banner/cookie-banner.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,2GAA2G;AAC3G,MAAM,MAAM,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1F,qGAAqG;AACrG,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,+FAA+F;AAC/F,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D,6EAA6E;AAC7E,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,oBAAoB;IAC5E,wFAAwF;IACxF,IAAI,IAAI,IAAI,CAAC;IACb,0FAA0F;IAC1F,IAAI,IAAI,IAAI,CAAC;CACd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,uGAAuG;IACvG,MAAM,EAAE;QAAE,OAAO,EAAE,mBAAmB,CAAA;KAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,4FAA4F;IAC5F,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACvC,0FAA0F;IAC1F,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qGAAqG;IACrG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAWF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAC"}
+{"version":3,"file":"cookie-banner.d.ts","sourceRoot":"","sources":["../../../src/feedback/cookie-banner/cookie-banner.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,2GAA2G;AAC3G,MAAM,MAAM,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1F,oGAAoG;AACpG,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,+FAA+F;AAC/F,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D,6EAA6E;AAC7E,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,oBAAoB;IAC5E,uFAAuF;IACvF,IAAI,IAAI,IAAI,CAAC;IACb,0FAA0F;IAC1F,IAAI,IAAI,IAAI,CAAC;CACd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,uGAAuG;IACvG,MAAM,EAAE;QAAE,OAAO,EAAE,mBAAmB,CAAA;KAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,4FAA4F;IAC5F,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACvC,0FAA0F;IAC1F,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qGAAqG;IACrG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAWF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAC"}

package/dist/feedback/progress/progress.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.css.cjs","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Segmented Bar\n       ======================================== */\n\n  /* Discrete blocks replace the continuous fill. The track goes transparent so the\n     gaps read as separate tokens; each block keeps the track groove colour until filled. */\n  .track-segmented {\n    display: grid;\n    grid-template-columns: repeat(var(--_segments, 1), minmax(0, 1fr));\n    gap: var(--progress-segment-gap, var(--size-1, 0.25rem));\n    overflow: visible;\n    background: transparent;\n    border-radius: 0;\n  }\n\n  .segment {\n    min-width: 0;\n    height: 100%;\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n    transition: var(--_motion-transition, background var(--transition-normal));\n  }\n\n  .segment[data-filled] {\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"progress.css.cjs","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Segmented Bar\n       ======================================== */\n\n  /* Discrete blocks replace the continuous fill. The track goes transparent so the\n     gaps read as separate tokens; each block keeps the track groove colour until filled. */\n  .track-segmented {\n    display: grid;\n    grid-template-columns: repeat(var(--_segments, 1), minmax(0, 1fr));\n    gap: var(--progress-segment-gap, var(--size-1, 0.25rem));\n    overflow: visible;\n    background: transparent;\n    border-radius: 0;\n  }\n\n  .segment {\n    min-width: 0;\n    height: 100%;\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n    transition: var(--_motion-transition, background var(--transition-normal));\n  }\n\n  .segment[data-filled] {\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay: label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides: cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

package/dist/feedback/progress/progress.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.css.js","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Segmented Bar\n       ======================================== */\n\n  /* Discrete blocks replace the continuous fill. The track goes transparent so the\n     gaps read as separate tokens; each block keeps the track groove colour until filled. */\n  .track-segmented {\n    display: grid;\n    grid-template-columns: repeat(var(--_segments, 1), minmax(0, 1fr));\n    gap: var(--progress-segment-gap, var(--size-1, 0.25rem));\n    overflow: visible;\n    background: transparent;\n    border-radius: 0;\n  }\n\n  .segment {\n    min-width: 0;\n    height: 100%;\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n    transition: var(--_motion-transition, background var(--transition-normal));\n  }\n\n  .segment[data-filled] {\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"progress.css.js","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Segmented Bar\n       ======================================== */\n\n  /* Discrete blocks replace the continuous fill. The track goes transparent so the\n     gaps read as separate tokens; each block keeps the track groove colour until filled. */\n  .track-segmented {\n    display: grid;\n    grid-template-columns: repeat(var(--_segments, 1), minmax(0, 1fr));\n    gap: var(--progress-segment-gap, var(--size-1, 0.25rem));\n    overflow: visible;\n    background: transparent;\n    border-radius: 0;\n  }\n\n  .segment {\n    min-width: 0;\n    height: 100%;\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n    transition: var(--_motion-transition, background var(--transition-normal));\n  }\n\n  .segment[data-filled] {\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay: label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides: cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

package/dist/feedback/progress/progress.d.ts

@@ -5,7 +5,7 @@ export type OreProgressProps = {
     color?: ThemeColor;
     /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */
     'floating-label'?: string;
-    /** When true, shows an infinite animation — use when progress is unknown. */
+    /** When true, shows an infinite animation: use when progress is unknown. */
     indeterminate?: boolean;
     /** Accessible name AND visible text label.
      * - Linear without `title`: rendered at the end of the bar.

package/dist/feedback/progress/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7D,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mCAAmC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+LAA+L;IAC/L,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;0DAGsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4IAA4I;IAC5I,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;+EAE2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7D,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mCAAmC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+LAA+L;IAC/L,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;0DAGsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4IAA4I;IAC5I,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;+EAE2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/feedback/skeleton/skeleton.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.css.cjs","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  :host(:not([variant='text'])) {\n    position: relative;\n  }\n\n  :host(:not([variant='text'])) .stack {\n    position: absolute;\n    inset: 0;\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"skeleton.css.cjs","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  :host(:not([variant='text'])) {\n    position: relative;\n  }\n\n  :host(:not([variant='text'])) .stack {\n    position: absolute;\n    inset: 0;\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport: no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant: avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant: thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/skeleton/skeleton.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.css.js","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  :host(:not([variant='text'])) {\n    position: relative;\n  }\n\n  :host(:not([variant='text'])) .stack {\n    position: absolute;\n    inset: 0;\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"skeleton.css.js","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  :host(:not([variant='text'])) {\n    position: relative;\n  }\n\n  :host(:not([variant='text'])) .stack {\n    position: absolute;\n    inset: 0;\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport: no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant: avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant: thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/skeleton/skeleton.d.ts

@@ -11,7 +11,7 @@ export type OreSkeletonProps = {
     radius?: string;
     /** Size preset controlling line height and circle size */
     size?: ComponentSize;
-    /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */
+    /** Render diagonal stripes instead of the shimmer: useful as a design-mode placeholder */
     striped?: boolean;
     /** Visual variant: 'rect' (default), 'circle', or 'text' */
     variant?: 'rect' | 'circle' | 'text';

package/dist/feedback/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/feedback/skeleton/skeleton.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/feedback/skeleton/skeleton.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/feedback/toast/toast.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,var(--size-4));--_inset-right:var(--toast-inset-right,var(--size-4));--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,var(--size-2));--_enter-duration:var(--toast-enter-duration,var(--duration-200));--_exit-duration:var(--toast-exit-duration,var(--duration-200));--_offset:var(--size-3);--_progress-height:var(--toast-progress-height,3px);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);width:min(var(--_max-width), 100vw - 2 * var(--size-4));pointer-events:none;display:block}:host([position=top-left]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:var(--size-4);--_inset-right:auto}:host([position=top-center]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-right:var(--size-4);--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:var(--size-4);--_inset-left:var(--size-4);--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:var(--size-4);--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:var(--size-4);--_inset-right:var(--size-4);--_inset-left:auto;--_inset-top:auto}:host([position^=top]){--_offset:calc(-1 * var(--size-3))}.toast-container{gap:var(--_gap);flex-direction:column;display:flex}:host([position^=top]) .toast-container{flex-direction:column-reverse}.toast-live-region{display:contents}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}.toast-inner{border-radius:var(--_toast-radius,var(--rounded-md));opacity:1;transition:var(--_motion-transition,opacity var(--_exit-duration) var(--ease-out), transform var(--_exit-duration) var(--ease-out));position:relative;overflow:hidden;transform:none}.toast-inner.entering{opacity:0;transform:translateY(var(--_offset)) scale(.98);transition:none}.toast-inner:not(:is(.entering,.exiting)){transition:var(--_motion-transition,opacity var(--_enter-duration) var(--ease-out), transform var(--_enter-duration) var(--ease-out))}.toast-inner.exiting{pointer-events:none;opacity:0;transform:translateY(var(--_offset)) scale(.96)}ore-alert{--alert-shadow:var(--toast-shadow,var(--shadow-xl));width:100%;margin:0}ore-alert:not([variant=solid]){--alert-bg:var(--toast-bg,color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)))}ore-alert:not([heading])::part(close){align-self:center}.toast-inner.snackbar ore-alert{--alert-bg:var(--toast-snackbar-bg,var(--color-contrast-900));--alert-color:var(--toast-snackbar-color,var(--color-contrast-100));--alert-border-color:transparent;--alert-padding:var(--toast-snackbar-padding,var(--size-2) var(--size-4));--alert-shadow:var(--toast-snackbar-shadow,var(--shadow-lg))}.toast-inner.snackbar{width:fit-content}:host([position$=-right]) .toast-inner.snackbar:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}:host([position$=-right]) .toast-inner.snackbar:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([position$=-center]) .toast-inner.snackbar{margin-left:auto;margin-right:auto}.toast-progress{height:var(--_progress-height);pointer-events:none;background:var(--toast-progress-color,var(--_toast-accent));opacity:.6;transform-origin:0;animation:var(--_motion-animation,ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);position:absolute;bottom:0;left:0;right:0}.toast-container.paused .toast-progress{animation-play-state:paused}@keyframes ore-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.toast-progress{display:none}}.toast-actions{gap:var(--size-2);justify-content:flex-end;display:flex}@media (width<=480px){:host,:host([position]){--_inset-right:var(--size-3);--_inset-left:var(--size-3);width:auto;transform:none}:host([position^=bottom]){--_inset-bottom:calc(var(--size-3) + env(safe-area-inset-bottom,0px))}:host([position^=top]){--_inset-top:calc(var(--size-3) + env(safe-area-inset-top,0px))}}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,var(--size-4));--_inset-right:var(--toast-inset-right,var(--size-4));--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,var(--size-2));--_enter-duration:var(--toast-enter-duration,var(--duration-200));--_exit-duration:var(--toast-exit-duration,var(--duration-200));--_offset:var(--size-3);--_progress-height:var(--toast-progress-height,3px);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);width:min(var(--_max-width), 100vw - 2 * var(--size-4));pointer-events:none;display:block}:host([position=top-left]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:var(--size-4);--_inset-right:auto}:host([position=top-center]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-right:var(--size-4);--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:var(--size-4);--_inset-left:var(--size-4);--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:var(--size-4);--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:var(--size-4);--_inset-right:var(--size-4);--_inset-left:auto;--_inset-top:auto}:host([position^=top]){--_offset:calc(-1 * var(--size-3))}.toast-container{gap:var(--_gap);flex-direction:column;display:flex}:host([position^=top]) .toast-container{flex-direction:column-reverse}.toast-live-region{display:contents}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}.toast-inner{border-radius:var(--_toast-radius,var(--rounded-md));opacity:1;transition:var(--_motion-transition,opacity var(--_exit-duration) var(--ease-out), transform var(--_exit-duration) var(--ease-out));position:relative;overflow:hidden;transform:none}.toast-inner.entering{opacity:0;transform:translateY(var(--_offset)) scale(.98);transition:none}.toast-inner:not(:is(.entering,.exiting)){transition:var(--_motion-transition,opacity var(--_enter-duration) var(--ease-out), transform var(--_enter-duration) var(--ease-out))}.toast-inner.exiting{pointer-events:none;opacity:0;transform:translateY(var(--_offset)) scale(.96)}ore-alert{--alert-shadow:var(--toast-shadow,var(--shadow-xl));width:100%;margin:0}ore-alert:not([variant=solid]){--alert-bg:var(--toast-bg,color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)))}ore-alert:not([heading])::part(close){align-self:center}.toast-inner.snackbar ore-alert{--alert-bg:var(--toast-snackbar-bg,var(--color-contrast-900));--alert-color:var(--toast-snackbar-color,var(--color-contrast-100));--alert-border-color:transparent;--alert-padding:var(--toast-snackbar-padding,var(--size-2) var(--size-4));--alert-shadow:var(--toast-snackbar-shadow,var(--shadow-lg))}.toast-inner.snackbar{width:fit-content}.toast-inner.snackbar ore-alert::part(body){min-height:var(--toast-snackbar-height,var(--size-8));align-items:center;display:flex}:host([position$=-right]) .toast-inner.snackbar:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}:host([position$=-right]) .toast-inner.snackbar:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([position$=-center]) .toast-inner.snackbar{margin-left:auto;margin-right:auto}.toast-progress{height:var(--_progress-height);pointer-events:none;background:var(--toast-progress-color,var(--_toast-accent));opacity:.6;transform-origin:0;animation:var(--_motion-animation,ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);position:absolute;bottom:0;left:0;right:0}.toast-container.paused .toast-progress{animation-play-state:paused}@keyframes ore-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.toast-progress{display:none}}.toast-actions{gap:var(--size-2);justify-content:flex-end;display:flex}@media (width<=480px){:host,:host([position]){--_inset-right:var(--size-3);--_inset-left:var(--size-3);width:auto;transform:none}:host([position^=bottom]){--_inset-bottom:calc(var(--size-3) + env(safe-area-inset-bottom,0px))}:host([position^=top]){--_inset-top:calc(var(--size-3) + env(safe-area-inset-top,0px))}}}`;exports.default=e;
 //# sourceMappingURL=toast.css.cjs.map

package/dist/feedback/toast/toast.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.cjs","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, var(--size-4));\n    --_inset-right: var(--toast-inset-right, var(--size-4));\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, var(--size-2));\n    --_enter-duration: var(--toast-enter-duration, var(--duration-200));\n    --_exit-duration: var(--toast-exit-duration, var(--duration-200));\n    --_offset: var(--size-3);\n    --_progress-height: var(--toast-progress-height, 3px);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: block;\n    width: min(var(--_max-width), 100vw - 2 * var(--size-4));\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* Top anchors slide down; bottom anchors slide up. */\n  :host([position^='top']) {\n    --_offset: calc(-1 * var(--size-3));\n  }\n\n  /* ── List ─────────────────────────────────────────────────────────────── */\n\n  /* Newest notification sits nearest the anchored edge. */\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n  }\n\n  :host([position^='top']) .toast-container {\n    flex-direction: column-reverse;\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  /* ── Wrapper (layout / gesture target) ────────────────────────────────── */\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* ── Inner (motion target) ────────────────────────────────────────────── */\n\n  .toast-inner {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--_toast-radius, var(--rounded-md));\n    opacity: 1;\n    transform: none;\n    transition: var(\n      --_motion-transition,\n      opacity var(--_exit-duration) var(--ease-out),\n      transform var(--_exit-duration) var(--ease-out)\n    );\n  }\n\n  /* Entry: mount invisible without a transition; removing the class animates in. */\n  .toast-inner.entering {\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.98);\n    transition: none;\n  }\n\n  .toast-inner:not(.entering, .exiting) {\n    transition: var(\n      --_motion-transition,\n      opacity var(--_enter-duration) var(--ease-out),\n      transform var(--_enter-duration) var(--ease-out)\n    );\n  }\n\n  /* Exit: fade and drift toward the anchored edge; the wrapper stays in flow until finalized. */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.96);\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  /* A floating notification must read as a layer over arbitrary content: opaque surface and real elevation.\n     --color-canvas is translucent by design (it expects a dimmed backdrop), so mix on the opaque contrast base. */\n  ore-alert {\n    --alert-shadow: var(--toast-shadow, var(--shadow-xl));\n\n    width: 100%;\n    margin: 0;\n  }\n\n  ore-alert:not([variant='solid']) {\n    --alert-bg: var(--toast-bg, color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)));\n  }\n\n  /* Single-line notifications centre the close control on the text. */\n  ore-alert:not([heading])::part(close) {\n    align-self: center;\n  }\n\n  /* ── Snackbar (Material-style compact bar) ────────────────────────────── */\n\n  /* The snackbar inverts the surface: the dark end of the contrast ramp in light themes,\n     the light end in dark themes, with the opposite end for text. Compact single-row\n     padding; borderless; real elevation. Actions render as flat text buttons. */\n  .toast-inner.snackbar ore-alert {\n    --alert-bg: var(--toast-snackbar-bg, var(--color-contrast-900));\n    --alert-color: var(--toast-snackbar-color, var(--color-contrast-100));\n    --alert-border-color: transparent;\n    --alert-padding: var(--toast-snackbar-padding, var(--size-2) var(--size-4));\n    --alert-shadow: var(--toast-snackbar-shadow, var(--shadow-lg));\n  }\n\n  /* The bar sizes to its content up to the host's width cap — a short confirmation stays\n     a chip instead of stretching the full notification width. Anchored edges keep it\n     flush with the position's side. */\n  .toast-inner.snackbar {\n    width: fit-content;\n  }\n\n  :host([position$='-right']) .toast-inner.snackbar {\n    margin-inline-start: auto;\n  }\n\n  :host([position$='-center']) .toast-inner.snackbar {\n    margin-inline: auto;\n  }\n\n  /* ── Progress ─────────────────────────────────────────────────────────── */\n\n  .toast-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--_progress-height);\n    pointer-events: none;\n    background: var(--toast-progress-color, var(--_toast-accent));\n    opacity: 0.6;\n    transform-origin: left center;\n    animation: var(--_motion-animation, ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);\n  }\n\n  .toast-container.paused .toast-progress {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-toast-progress {\n    from {\n      transform: scaleX(1);\n    }\n\n    to {\n      transform: scaleX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast-progress {\n      display: none;\n    }\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: phones use the full width above the safe area ────────── */\n\n  @media (width <= 480px) {\n    :host,\n    :host([position]) {\n      --_inset-right: var(--size-3);\n      --_inset-left: var(--size-3);\n\n      width: auto;\n      transform: none;\n    }\n\n    :host([position^='bottom']) {\n      --_inset-bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));\n    }\n\n    :host([position^='top']) {\n      --_inset-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"toast.css.cjs","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, var(--size-4));\n    --_inset-right: var(--toast-inset-right, var(--size-4));\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, var(--size-2));\n    --_enter-duration: var(--toast-enter-duration, var(--duration-200));\n    --_exit-duration: var(--toast-exit-duration, var(--duration-200));\n    --_offset: var(--size-3);\n    --_progress-height: var(--toast-progress-height, 3px);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: block;\n    width: min(var(--_max-width), 100vw - 2 * var(--size-4));\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* Top anchors slide down; bottom anchors slide up. */\n  :host([position^='top']) {\n    --_offset: calc(-1 * var(--size-3));\n  }\n\n  /* ── List ─────────────────────────────────────────────────────────────── */\n\n  /* Newest notification sits nearest the anchored edge. */\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n  }\n\n  :host([position^='top']) .toast-container {\n    flex-direction: column-reverse;\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  /* ── Wrapper (layout / gesture target) ────────────────────────────────── */\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* ── Inner (motion target) ────────────────────────────────────────────── */\n\n  .toast-inner {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--_toast-radius, var(--rounded-md));\n    opacity: 1;\n    transform: none;\n    transition: var(\n      --_motion-transition,\n      opacity var(--_exit-duration) var(--ease-out),\n      transform var(--_exit-duration) var(--ease-out)\n    );\n  }\n\n  /* Entry: mount invisible without a transition; removing the class animates in. */\n  .toast-inner.entering {\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.98);\n    transition: none;\n  }\n\n  .toast-inner:not(.entering, .exiting) {\n    transition: var(\n      --_motion-transition,\n      opacity var(--_enter-duration) var(--ease-out),\n      transform var(--_enter-duration) var(--ease-out)\n    );\n  }\n\n  /* Exit: fade and drift toward the anchored edge; the wrapper stays in flow until finalized. */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.96);\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  /* A floating notification must read as a layer over arbitrary content: opaque surface and real elevation.\n     --color-canvas is translucent by design (it expects a dimmed backdrop), so mix on the opaque contrast base. */\n  ore-alert {\n    --alert-shadow: var(--toast-shadow, var(--shadow-xl));\n\n    width: 100%;\n    margin: 0;\n  }\n\n  ore-alert:not([variant='solid']) {\n    --alert-bg: var(--toast-bg, color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)));\n  }\n\n  /* Single-line notifications centre the close control on the text. */\n  ore-alert:not([heading])::part(close) {\n    align-self: center;\n  }\n\n  /* ── Snackbar (Material-style compact bar) ────────────────────────────── */\n\n  /* The snackbar inverts the surface: the dark end of the contrast ramp in light themes,\n     the light end in dark themes, with the opposite end for text. Compact single-row\n     padding; borderless; real elevation. Actions render as flat text buttons. */\n  .toast-inner.snackbar ore-alert {\n    --alert-bg: var(--toast-snackbar-bg, var(--color-contrast-900));\n    --alert-color: var(--toast-snackbar-color, var(--color-contrast-100));\n    --alert-border-color: transparent;\n    --alert-padding: var(--toast-snackbar-padding, var(--size-2) var(--size-4));\n    --alert-shadow: var(--toast-snackbar-shadow, var(--shadow-lg));\n  }\n\n  /* The bar sizes to its content up to the host's width cap: a short confirmation stays\n     a chip instead of stretching the full notification width. Anchored edges keep it\n     flush with the position's side. */\n  .toast-inner.snackbar {\n    width: fit-content;\n  }\n\n  /* One bar height whether or not the line carries an action: the message cell reserves\n     the sm action button's height and centres its text in it, so a plain confirmation\n     stands exactly as tall as its actionable sibling. */\n  .toast-inner.snackbar ore-alert::part(body) {\n    display: flex;\n    align-items: center;\n    min-height: var(--toast-snackbar-height, var(--size-8));\n  }\n\n  :host([position$='-right']) .toast-inner.snackbar {\n    margin-inline-start: auto;\n  }\n\n  :host([position$='-center']) .toast-inner.snackbar {\n    margin-inline: auto;\n  }\n\n  /* ── Progress ─────────────────────────────────────────────────────────── */\n\n  .toast-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--_progress-height);\n    pointer-events: none;\n    background: var(--toast-progress-color, var(--_toast-accent));\n    opacity: 0.6;\n    transform-origin: left center;\n    animation: var(--_motion-animation, ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);\n  }\n\n  .toast-container.paused .toast-progress {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-toast-progress {\n    from {\n      transform: scaleX(1);\n    }\n\n    to {\n      transform: scaleX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast-progress {\n      display: none;\n    }\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: phones use the full width above the safe area ────────── */\n\n  @media (width <= 480px) {\n    :host,\n    :host([position]) {\n      --_inset-right: var(--size-3);\n      --_inset-left: var(--size-3);\n\n      width: auto;\n      transform: none;\n    }\n\n    :host([position^='bottom']) {\n      --_inset-bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));\n    }\n\n    :host([position^='top']) {\n      --_inset-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));\n    }\n  }\n}\n"],"mappings":""}

package/dist/feedback/toast/toast.css.js

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,var(--size-4));--_inset-right:var(--toast-inset-right,var(--size-4));--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,var(--size-2));--_enter-duration:var(--toast-enter-duration,var(--duration-200));--_exit-duration:var(--toast-exit-duration,var(--duration-200));--_offset:var(--size-3);--_progress-height:var(--toast-progress-height,3px);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);width:min(var(--_max-width), 100vw - 2 * var(--size-4));pointer-events:none;display:block}:host([position=top-left]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:var(--size-4);--_inset-right:auto}:host([position=top-center]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-right:var(--size-4);--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:var(--size-4);--_inset-left:var(--size-4);--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:var(--size-4);--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:var(--size-4);--_inset-right:var(--size-4);--_inset-left:auto;--_inset-top:auto}:host([position^=top]){--_offset:calc(-1 * var(--size-3))}.toast-container{gap:var(--_gap);flex-direction:column;display:flex}:host([position^=top]) .toast-container{flex-direction:column-reverse}.toast-live-region{display:contents}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}.toast-inner{border-radius:var(--_toast-radius,var(--rounded-md));opacity:1;transition:var(--_motion-transition,opacity var(--_exit-duration) var(--ease-out), transform var(--_exit-duration) var(--ease-out));position:relative;overflow:hidden;transform:none}.toast-inner.entering{opacity:0;transform:translateY(var(--_offset)) scale(.98);transition:none}.toast-inner:not(:is(.entering,.exiting)){transition:var(--_motion-transition,opacity var(--_enter-duration) var(--ease-out), transform var(--_enter-duration) var(--ease-out))}.toast-inner.exiting{pointer-events:none;opacity:0;transform:translateY(var(--_offset)) scale(.96)}ore-alert{--alert-shadow:var(--toast-shadow,var(--shadow-xl));width:100%;margin:0}ore-alert:not([variant=solid]){--alert-bg:var(--toast-bg,color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)))}ore-alert:not([heading])::part(close){align-self:center}.toast-inner.snackbar ore-alert{--alert-bg:var(--toast-snackbar-bg,var(--color-contrast-900));--alert-color:var(--toast-snackbar-color,var(--color-contrast-100));--alert-border-color:transparent;--alert-padding:var(--toast-snackbar-padding,var(--size-2) var(--size-4));--alert-shadow:var(--toast-snackbar-shadow,var(--shadow-lg))}.toast-inner.snackbar{width:fit-content}:host([position$=-right]) .toast-inner.snackbar:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}:host([position$=-right]) .toast-inner.snackbar:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([position$=-center]) .toast-inner.snackbar{margin-left:auto;margin-right:auto}.toast-progress{height:var(--_progress-height);pointer-events:none;background:var(--toast-progress-color,var(--_toast-accent));opacity:.6;transform-origin:0;animation:var(--_motion-animation,ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);position:absolute;bottom:0;left:0;right:0}.toast-container.paused .toast-progress{animation-play-state:paused}@keyframes ore-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.toast-progress{display:none}}.toast-actions{gap:var(--size-2);justify-content:flex-end;display:flex}@media (width<=480px){:host,:host([position]){--_inset-right:var(--size-3);--_inset-left:var(--size-3);width:auto;transform:none}:host([position^=bottom]){--_inset-bottom:calc(var(--size-3) + env(safe-area-inset-bottom,0px))}:host([position^=top]){--_inset-top:calc(var(--size-3) + env(safe-area-inset-top,0px))}}}`;export{e as default};
+var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,var(--size-4));--_inset-right:var(--toast-inset-right,var(--size-4));--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,var(--z-toast));--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,var(--size-2));--_enter-duration:var(--toast-enter-duration,var(--duration-200));--_exit-duration:var(--toast-exit-duration,var(--duration-200));--_offset:var(--size-3);--_progress-height:var(--toast-progress-height,3px);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);width:min(var(--_max-width), 100vw - 2 * var(--size-4));pointer-events:none;display:block}:host([position=top-left]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:var(--size-4);--_inset-right:auto}:host([position=top-center]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:var(--size-4);--_inset-bottom:auto;--_inset-right:var(--size-4);--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:var(--size-4);--_inset-left:var(--size-4);--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:var(--size-4);--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:var(--size-4);--_inset-right:var(--size-4);--_inset-left:auto;--_inset-top:auto}:host([position^=top]){--_offset:calc(-1 * var(--size-3))}.toast-container{gap:var(--_gap);flex-direction:column;display:flex}:host([position^=top]) .toast-container{flex-direction:column-reverse}.toast-live-region{display:contents}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}.toast-inner{border-radius:var(--_toast-radius,var(--rounded-md));opacity:1;transition:var(--_motion-transition,opacity var(--_exit-duration) var(--ease-out), transform var(--_exit-duration) var(--ease-out));position:relative;overflow:hidden;transform:none}.toast-inner.entering{opacity:0;transform:translateY(var(--_offset)) scale(.98);transition:none}.toast-inner:not(:is(.entering,.exiting)){transition:var(--_motion-transition,opacity var(--_enter-duration) var(--ease-out), transform var(--_enter-duration) var(--ease-out))}.toast-inner.exiting{pointer-events:none;opacity:0;transform:translateY(var(--_offset)) scale(.96)}ore-alert{--alert-shadow:var(--toast-shadow,var(--shadow-xl));width:100%;margin:0}ore-alert:not([variant=solid]){--alert-bg:var(--toast-bg,color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)))}ore-alert:not([heading])::part(close){align-self:center}.toast-inner.snackbar ore-alert{--alert-bg:var(--toast-snackbar-bg,var(--color-contrast-900));--alert-color:var(--toast-snackbar-color,var(--color-contrast-100));--alert-border-color:transparent;--alert-padding:var(--toast-snackbar-padding,var(--size-2) var(--size-4));--alert-shadow:var(--toast-snackbar-shadow,var(--shadow-lg))}.toast-inner.snackbar{width:fit-content}.toast-inner.snackbar ore-alert::part(body){min-height:var(--toast-snackbar-height,var(--size-8));align-items:center;display:flex}:host([position$=-right]) .toast-inner.snackbar:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}:host([position$=-right]) .toast-inner.snackbar:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([position$=-center]) .toast-inner.snackbar{margin-left:auto;margin-right:auto}.toast-progress{height:var(--_progress-height);pointer-events:none;background:var(--toast-progress-color,var(--_toast-accent));opacity:.6;transform-origin:0;animation:var(--_motion-animation,ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);position:absolute;bottom:0;left:0;right:0}.toast-container.paused .toast-progress{animation-play-state:paused}@keyframes ore-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.toast-progress{display:none}}.toast-actions{gap:var(--size-2);justify-content:flex-end;display:flex}@media (width<=480px){:host,:host([position]){--_inset-right:var(--size-3);--_inset-left:var(--size-3);width:auto;transform:none}:host([position^=bottom]){--_inset-bottom:calc(var(--size-3) + env(safe-area-inset-bottom,0px))}:host([position^=top]){--_inset-top:calc(var(--size-3) + env(safe-area-inset-top,0px))}}}`;export{e as default};
 //# sourceMappingURL=toast.css.js.map

package/dist/feedback/toast/toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.js","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, var(--size-4));\n    --_inset-right: var(--toast-inset-right, var(--size-4));\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, var(--size-2));\n    --_enter-duration: var(--toast-enter-duration, var(--duration-200));\n    --_exit-duration: var(--toast-exit-duration, var(--duration-200));\n    --_offset: var(--size-3);\n    --_progress-height: var(--toast-progress-height, 3px);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: block;\n    width: min(var(--_max-width), 100vw - 2 * var(--size-4));\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* Top anchors slide down; bottom anchors slide up. */\n  :host([position^='top']) {\n    --_offset: calc(-1 * var(--size-3));\n  }\n\n  /* ── List ─────────────────────────────────────────────────────────────── */\n\n  /* Newest notification sits nearest the anchored edge. */\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n  }\n\n  :host([position^='top']) .toast-container {\n    flex-direction: column-reverse;\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  /* ── Wrapper (layout / gesture target) ────────────────────────────────── */\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* ── Inner (motion target) ────────────────────────────────────────────── */\n\n  .toast-inner {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--_toast-radius, var(--rounded-md));\n    opacity: 1;\n    transform: none;\n    transition: var(\n      --_motion-transition,\n      opacity var(--_exit-duration) var(--ease-out),\n      transform var(--_exit-duration) var(--ease-out)\n    );\n  }\n\n  /* Entry: mount invisible without a transition; removing the class animates in. */\n  .toast-inner.entering {\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.98);\n    transition: none;\n  }\n\n  .toast-inner:not(.entering, .exiting) {\n    transition: var(\n      --_motion-transition,\n      opacity var(--_enter-duration) var(--ease-out),\n      transform var(--_enter-duration) var(--ease-out)\n    );\n  }\n\n  /* Exit: fade and drift toward the anchored edge; the wrapper stays in flow until finalized. */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.96);\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  /* A floating notification must read as a layer over arbitrary content: opaque surface and real elevation.\n     --color-canvas is translucent by design (it expects a dimmed backdrop), so mix on the opaque contrast base. */\n  ore-alert {\n    --alert-shadow: var(--toast-shadow, var(--shadow-xl));\n\n    width: 100%;\n    margin: 0;\n  }\n\n  ore-alert:not([variant='solid']) {\n    --alert-bg: var(--toast-bg, color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)));\n  }\n\n  /* Single-line notifications centre the close control on the text. */\n  ore-alert:not([heading])::part(close) {\n    align-self: center;\n  }\n\n  /* ── Snackbar (Material-style compact bar) ────────────────────────────── */\n\n  /* The snackbar inverts the surface: the dark end of the contrast ramp in light themes,\n     the light end in dark themes, with the opposite end for text. Compact single-row\n     padding; borderless; real elevation. Actions render as flat text buttons. */\n  .toast-inner.snackbar ore-alert {\n    --alert-bg: var(--toast-snackbar-bg, var(--color-contrast-900));\n    --alert-color: var(--toast-snackbar-color, var(--color-contrast-100));\n    --alert-border-color: transparent;\n    --alert-padding: var(--toast-snackbar-padding, var(--size-2) var(--size-4));\n    --alert-shadow: var(--toast-snackbar-shadow, var(--shadow-lg));\n  }\n\n  /* The bar sizes to its content up to the host's width cap — a short confirmation stays\n     a chip instead of stretching the full notification width. Anchored edges keep it\n     flush with the position's side. */\n  .toast-inner.snackbar {\n    width: fit-content;\n  }\n\n  :host([position$='-right']) .toast-inner.snackbar {\n    margin-inline-start: auto;\n  }\n\n  :host([position$='-center']) .toast-inner.snackbar {\n    margin-inline: auto;\n  }\n\n  /* ── Progress ─────────────────────────────────────────────────────────── */\n\n  .toast-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--_progress-height);\n    pointer-events: none;\n    background: var(--toast-progress-color, var(--_toast-accent));\n    opacity: 0.6;\n    transform-origin: left center;\n    animation: var(--_motion-animation, ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);\n  }\n\n  .toast-container.paused .toast-progress {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-toast-progress {\n    from {\n      transform: scaleX(1);\n    }\n\n    to {\n      transform: scaleX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast-progress {\n      display: none;\n    }\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: phones use the full width above the safe area ────────── */\n\n  @media (width <= 480px) {\n    :host,\n    :host([position]) {\n      --_inset-right: var(--size-3);\n      --_inset-left: var(--size-3);\n\n      width: auto;\n      transform: none;\n    }\n\n    :host([position^='bottom']) {\n      --_inset-bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));\n    }\n\n    :host([position^='top']) {\n      --_inset-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"toast.css.js","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, var(--size-4));\n    --_inset-right: var(--toast-inset-right, var(--size-4));\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, var(--z-toast));\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, var(--size-2));\n    --_enter-duration: var(--toast-enter-duration, var(--duration-200));\n    --_exit-duration: var(--toast-exit-duration, var(--duration-200));\n    --_offset: var(--size-3);\n    --_progress-height: var(--toast-progress-height, 3px);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: block;\n    width: min(var(--_max-width), 100vw - 2 * var(--size-4));\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: var(--size-4);\n    --_inset-bottom: auto;\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: var(--size-4);\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: var(--size-4);\n    --_inset-right: var(--size-4);\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* Top anchors slide down; bottom anchors slide up. */\n  :host([position^='top']) {\n    --_offset: calc(-1 * var(--size-3));\n  }\n\n  /* ── List ─────────────────────────────────────────────────────────────── */\n\n  /* Newest notification sits nearest the anchored edge. */\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n  }\n\n  :host([position^='top']) .toast-container {\n    flex-direction: column-reverse;\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  /* ── Wrapper (layout / gesture target) ────────────────────────────────── */\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* ── Inner (motion target) ────────────────────────────────────────────── */\n\n  .toast-inner {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--_toast-radius, var(--rounded-md));\n    opacity: 1;\n    transform: none;\n    transition: var(\n      --_motion-transition,\n      opacity var(--_exit-duration) var(--ease-out),\n      transform var(--_exit-duration) var(--ease-out)\n    );\n  }\n\n  /* Entry: mount invisible without a transition; removing the class animates in. */\n  .toast-inner.entering {\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.98);\n    transition: none;\n  }\n\n  .toast-inner:not(.entering, .exiting) {\n    transition: var(\n      --_motion-transition,\n      opacity var(--_enter-duration) var(--ease-out),\n      transform var(--_enter-duration) var(--ease-out)\n    );\n  }\n\n  /* Exit: fade and drift toward the anchored edge; the wrapper stays in flow until finalized. */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(var(--_offset)) scale(0.96);\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  /* A floating notification must read as a layer over arbitrary content: opaque surface and real elevation.\n     --color-canvas is translucent by design (it expects a dimmed backdrop), so mix on the opaque contrast base. */\n  ore-alert {\n    --alert-shadow: var(--toast-shadow, var(--shadow-xl));\n\n    width: 100%;\n    margin: 0;\n  }\n\n  ore-alert:not([variant='solid']) {\n    --alert-bg: var(--toast-bg, color-mix(in oklab, var(--color-contrast-50) 92%, var(--_toast-accent)));\n  }\n\n  /* Single-line notifications centre the close control on the text. */\n  ore-alert:not([heading])::part(close) {\n    align-self: center;\n  }\n\n  /* ── Snackbar (Material-style compact bar) ────────────────────────────── */\n\n  /* The snackbar inverts the surface: the dark end of the contrast ramp in light themes,\n     the light end in dark themes, with the opposite end for text. Compact single-row\n     padding; borderless; real elevation. Actions render as flat text buttons. */\n  .toast-inner.snackbar ore-alert {\n    --alert-bg: var(--toast-snackbar-bg, var(--color-contrast-900));\n    --alert-color: var(--toast-snackbar-color, var(--color-contrast-100));\n    --alert-border-color: transparent;\n    --alert-padding: var(--toast-snackbar-padding, var(--size-2) var(--size-4));\n    --alert-shadow: var(--toast-snackbar-shadow, var(--shadow-lg));\n  }\n\n  /* The bar sizes to its content up to the host's width cap: a short confirmation stays\n     a chip instead of stretching the full notification width. Anchored edges keep it\n     flush with the position's side. */\n  .toast-inner.snackbar {\n    width: fit-content;\n  }\n\n  /* One bar height whether or not the line carries an action: the message cell reserves\n     the sm action button's height and centres its text in it, so a plain confirmation\n     stands exactly as tall as its actionable sibling. */\n  .toast-inner.snackbar ore-alert::part(body) {\n    display: flex;\n    align-items: center;\n    min-height: var(--toast-snackbar-height, var(--size-8));\n  }\n\n  :host([position$='-right']) .toast-inner.snackbar {\n    margin-inline-start: auto;\n  }\n\n  :host([position$='-center']) .toast-inner.snackbar {\n    margin-inline: auto;\n  }\n\n  /* ── Progress ─────────────────────────────────────────────────────────── */\n\n  .toast-progress {\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--_progress-height);\n    pointer-events: none;\n    background: var(--toast-progress-color, var(--_toast-accent));\n    opacity: 0.6;\n    transform-origin: left center;\n    animation: var(--_motion-animation, ore-toast-progress var(--_toast-duration) linear var(--_toast-elapsed) both);\n  }\n\n  .toast-container.paused .toast-progress {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-toast-progress {\n    from {\n      transform: scaleX(1);\n    }\n\n    to {\n      transform: scaleX(0);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast-progress {\n      display: none;\n    }\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-2);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: phones use the full width above the safe area ────────── */\n\n  @media (width <= 480px) {\n    :host,\n    :host([position]) {\n      --_inset-right: var(--size-3);\n      --_inset-left: var(--size-3);\n\n      width: auto;\n      transform: none;\n    }\n\n    :host([position^='bottom']) {\n      --_inset-bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));\n    }\n\n    :host([position^='top']) {\n      --_inset-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));\n    }\n  }\n}\n"],"mappings":""}

package/dist/feedback/toast/toast.d.ts

@@ -42,7 +42,7 @@ export type ToastItem = {
     /** Called after the toast is fully dismissed and removed. */
     onDismiss?: () => void;
     /**
-     * Replace a live entry carrying the same message instead of stacking a duplicate —
+     * Replace a live entry carrying the same message instead of stacking a duplicate :
      * repeated bursts update the existing notification and restart its timer.
      */
     replace?: boolean;