@vielzeug/refine 26.10.0 → 26.10.1

package/dist/content/carousel/carousel.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.css.cjs","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--carousel-bg, var(--color-canvas));\n    --_radius: var(--carousel-radius, var(--rounded-xl));\n    --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n    --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: var(--carousel-min-height, 240px);\n    overflow: hidden;\n    touch-action: auto;\n    outline: none;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  /* ── Track ──────────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* ── Controls (prev / next) ────────────────────────────────────────────── */\n\n  /* Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. */\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    margin-inline-start: auto;\n    pointer-events: none;\n  }\n\n  /* Controls rendered standalone (no indicators bar) — needs own positioning + backdrop. */\n  :host > .controls {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    padding: var(--size-1-5) var(--size-2);\n    margin-inline-start: 0;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n  }\n\n  .nav-btn {\n    pointer-events: auto;\n  }\n\n  /* ── Variant-specific track styles ────────────────────────────────────── */\n\n  /* Gallery: flex row, fills host, shows active + two thumbnails */\n  :host([variant='gallery']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-gallery-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='gallery'][orientation='vertical']) .track {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Filmstrip: flex row/column with absolute positioning to fill host */\n  :host([variant='filmstrip']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-filmstrip-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='filmstrip'][orientation='vertical']) .track {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  /* ── Vertical orientation ──────────────────────────────────────────────── */\n\n  :host([orientation='vertical']) {\n    --_slide-translate-before: translateY(-100%);\n    --_slide-translate-after: translateY(100%);\n  }\n\n  :host([orientation='vertical']) .indicators {\n    inset-block: 50% auto;\n    inset-inline: var(--size-3) auto;\n    flex-direction: column;\n    width: auto;\n    height: max-content;\n    padding-block: var(--size-6) var(--size-2);\n    padding-inline: var(--size-1-5);\n    border-radius: var(--rounded-full);\n    transform: translateX(0) translateY(-50%);\n  }\n\n  :host([orientation='vertical']) .controls {\n    flex-direction: column;\n    margin-block-start: auto;\n    margin-inline-start: 0;\n  }\n\n  :host([orientation='vertical']) > .controls {\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    margin-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n  }\n\n  :host([orientation='vertical']) .indicator-active {\n    width: var(--size-1-5);\n    height: var(--size-8);\n  }\n\n  /* animation properties are inherited from .indicator-active ore-progress::part(fill) below */\n\n  /* ── Bottom nav bar: indicators + controls ───────────────────────────── */\n\n  /* Floats above the bottom edge, shrinks to content width, centered.\n     A frosted backdrop keeps it legible over any image. */\n\n  .indicators {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline: 50%;\n    display: flex;\n    flex-direction: row;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: max-content;\n    padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n    pointer-events: none;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n    transform: translateX(-50%);\n  }\n\n  .indicator {\n    display: block;\n    flex-shrink: 0;\n    padding: 0;\n    pointer-events: auto;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: opacity var(--transition-fast);\n  }\n\n  .indicator > ore-progress {\n    display: block;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  /* Inactive indicator: small circle */\n  .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n    overflow: hidden;\n    border-radius: var(--rounded-full);\n  }\n\n  /* Active indicator: wider pill (progress bar) */\n  .indicator-active {\n    --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n    width: var(--size-8);\n  }\n\n  .indicator:focus-visible {\n    outline: var(--border) solid currentcolor;\n    outline-offset: 2px;\n  }\n\n  .indicator:hover {\n    opacity: 0.8;\n  }\n\n  .indicator ore-progress::part(fill) {\n    transition: width var(--transition-normal);\n  }\n\n  .indicator-active ore-progress::part(fill) {\n    animation-name: var(--carousel-animation-name, none);\n    animation-duration: calc(var(--carousel-timeout, 4000) * 1ms);\n    animation-timing-function: var(--ease-linear);\n    animation-fill-mode: forwards;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --carousel-transition-duration: 0s;\n  }\n}\n\n@keyframes carousel-fill {\n  from {\n    width: 0%;\n  }\n\n  to {\n    width: 100%;\n  }\n}\n\n@keyframes carousel-fill-v {\n  from {\n    height: 0%;\n  }\n\n  to {\n    height: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"carousel.css.cjs","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--carousel-bg, var(--color-canvas));\n    --_radius: var(--carousel-radius, var(--rounded-xl));\n    --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n    --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: var(--carousel-min-height, 240px);\n    overflow: hidden;\n    touch-action: auto;\n    outline: none;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  /* ── Track ──────────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* ── Controls (prev / next) ────────────────────────────────────────────── */\n\n  /* Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. */\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    margin-inline-start: auto;\n    pointer-events: none;\n  }\n\n  /* Controls rendered standalone (no indicators bar): needs own positioning + backdrop. */\n  :host > .controls {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    padding: var(--size-1-5) var(--size-2);\n    margin-inline-start: 0;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n  }\n\n  .nav-btn {\n    pointer-events: auto;\n  }\n\n  /* ── Variant-specific track styles ────────────────────────────────────── */\n\n  /* Gallery: flex row, fills host, shows active + two thumbnails */\n  :host([variant='gallery']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-gallery-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='gallery'][orientation='vertical']) .track {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Filmstrip: flex row/column with absolute positioning to fill host */\n  :host([variant='filmstrip']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-filmstrip-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='filmstrip'][orientation='vertical']) .track {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  /* ── Vertical orientation ──────────────────────────────────────────────── */\n\n  :host([orientation='vertical']) {\n    --_slide-translate-before: translateY(-100%);\n    --_slide-translate-after: translateY(100%);\n  }\n\n  :host([orientation='vertical']) .indicators {\n    inset-block: 50% auto;\n    inset-inline: var(--size-3) auto;\n    flex-direction: column;\n    width: auto;\n    height: max-content;\n    padding-block: var(--size-6) var(--size-2);\n    padding-inline: var(--size-1-5);\n    border-radius: var(--rounded-full);\n    transform: translateX(0) translateY(-50%);\n  }\n\n  :host([orientation='vertical']) .controls {\n    flex-direction: column;\n    margin-block-start: auto;\n    margin-inline-start: 0;\n  }\n\n  :host([orientation='vertical']) > .controls {\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    margin-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n  }\n\n  :host([orientation='vertical']) .indicator-active {\n    width: var(--size-1-5);\n    height: var(--size-8);\n  }\n\n  /* animation properties are inherited from .indicator-active ore-progress::part(fill) below */\n\n  /* ── Bottom nav bar: indicators + controls ───────────────────────────── */\n\n  /* Floats above the bottom edge, shrinks to content width, centered.\n     A frosted backdrop keeps it legible over any image. */\n\n  .indicators {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline: 50%;\n    display: flex;\n    flex-direction: row;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: max-content;\n    padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n    pointer-events: none;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n    transform: translateX(-50%);\n  }\n\n  .indicator {\n    display: block;\n    flex-shrink: 0;\n    padding: 0;\n    pointer-events: auto;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: opacity var(--transition-fast);\n  }\n\n  .indicator > ore-progress {\n    display: block;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  /* Inactive indicator: small circle */\n  .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n    overflow: hidden;\n    border-radius: var(--rounded-full);\n  }\n\n  /* Active indicator: wider pill (progress bar) */\n  .indicator-active {\n    --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n    width: var(--size-8);\n  }\n\n  .indicator:focus-visible {\n    outline: var(--border) solid currentcolor;\n    outline-offset: 2px;\n  }\n\n  .indicator:hover {\n    opacity: 0.8;\n  }\n\n  .indicator ore-progress::part(fill) {\n    transition: width var(--transition-normal);\n  }\n\n  .indicator-active ore-progress::part(fill) {\n    animation-name: var(--carousel-animation-name, none);\n    animation-duration: calc(var(--carousel-timeout, 4000) * 1ms);\n    animation-timing-function: var(--ease-linear);\n    animation-fill-mode: forwards;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --carousel-transition-duration: 0s;\n  }\n}\n\n@keyframes carousel-fill {\n  from {\n    width: 0%;\n  }\n\n  to {\n    width: 100%;\n  }\n}\n\n@keyframes carousel-fill-v {\n  from {\n    height: 0%;\n  }\n\n  to {\n    height: 100%;\n  }\n}\n"],"mappings":""}

package/dist/content/carousel/carousel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.css.js","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--carousel-bg, var(--color-canvas));\n    --_radius: var(--carousel-radius, var(--rounded-xl));\n    --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n    --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: var(--carousel-min-height, 240px);\n    overflow: hidden;\n    touch-action: auto;\n    outline: none;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  /* ── Track ──────────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* ── Controls (prev / next) ────────────────────────────────────────────── */\n\n  /* Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. */\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    margin-inline-start: auto;\n    pointer-events: none;\n  }\n\n  /* Controls rendered standalone (no indicators bar) — needs own positioning + backdrop. */\n  :host > .controls {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    padding: var(--size-1-5) var(--size-2);\n    margin-inline-start: 0;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n  }\n\n  .nav-btn {\n    pointer-events: auto;\n  }\n\n  /* ── Variant-specific track styles ────────────────────────────────────── */\n\n  /* Gallery: flex row, fills host, shows active + two thumbnails */\n  :host([variant='gallery']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-gallery-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='gallery'][orientation='vertical']) .track {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Filmstrip: flex row/column with absolute positioning to fill host */\n  :host([variant='filmstrip']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-filmstrip-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='filmstrip'][orientation='vertical']) .track {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  /* ── Vertical orientation ──────────────────────────────────────────────── */\n\n  :host([orientation='vertical']) {\n    --_slide-translate-before: translateY(-100%);\n    --_slide-translate-after: translateY(100%);\n  }\n\n  :host([orientation='vertical']) .indicators {\n    inset-block: 50% auto;\n    inset-inline: var(--size-3) auto;\n    flex-direction: column;\n    width: auto;\n    height: max-content;\n    padding-block: var(--size-6) var(--size-2);\n    padding-inline: var(--size-1-5);\n    border-radius: var(--rounded-full);\n    transform: translateX(0) translateY(-50%);\n  }\n\n  :host([orientation='vertical']) .controls {\n    flex-direction: column;\n    margin-block-start: auto;\n    margin-inline-start: 0;\n  }\n\n  :host([orientation='vertical']) > .controls {\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    margin-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n  }\n\n  :host([orientation='vertical']) .indicator-active {\n    width: var(--size-1-5);\n    height: var(--size-8);\n  }\n\n  /* animation properties are inherited from .indicator-active ore-progress::part(fill) below */\n\n  /* ── Bottom nav bar: indicators + controls ───────────────────────────── */\n\n  /* Floats above the bottom edge, shrinks to content width, centered.\n     A frosted backdrop keeps it legible over any image. */\n\n  .indicators {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline: 50%;\n    display: flex;\n    flex-direction: row;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: max-content;\n    padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n    pointer-events: none;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n    transform: translateX(-50%);\n  }\n\n  .indicator {\n    display: block;\n    flex-shrink: 0;\n    padding: 0;\n    pointer-events: auto;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: opacity var(--transition-fast);\n  }\n\n  .indicator > ore-progress {\n    display: block;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  /* Inactive indicator: small circle */\n  .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n    overflow: hidden;\n    border-radius: var(--rounded-full);\n  }\n\n  /* Active indicator: wider pill (progress bar) */\n  .indicator-active {\n    --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n    width: var(--size-8);\n  }\n\n  .indicator:focus-visible {\n    outline: var(--border) solid currentcolor;\n    outline-offset: 2px;\n  }\n\n  .indicator:hover {\n    opacity: 0.8;\n  }\n\n  .indicator ore-progress::part(fill) {\n    transition: width var(--transition-normal);\n  }\n\n  .indicator-active ore-progress::part(fill) {\n    animation-name: var(--carousel-animation-name, none);\n    animation-duration: calc(var(--carousel-timeout, 4000) * 1ms);\n    animation-timing-function: var(--ease-linear);\n    animation-fill-mode: forwards;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --carousel-transition-duration: 0s;\n  }\n}\n\n@keyframes carousel-fill {\n  from {\n    width: 0%;\n  }\n\n  to {\n    width: 100%;\n  }\n}\n\n@keyframes carousel-fill-v {\n  from {\n    height: 0%;\n  }\n\n  to {\n    height: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"carousel.css.js","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--carousel-bg, var(--color-canvas));\n    --_radius: var(--carousel-radius, var(--rounded-xl));\n    --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n    --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: var(--carousel-min-height, 240px);\n    overflow: hidden;\n    touch-action: auto;\n    outline: none;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  /* ── Track ──────────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* ── Controls (prev / next) ────────────────────────────────────────────── */\n\n  /* Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. */\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    margin-inline-start: auto;\n    pointer-events: none;\n  }\n\n  /* Controls rendered standalone (no indicators bar): needs own positioning + backdrop. */\n  :host > .controls {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    padding: var(--size-1-5) var(--size-2);\n    margin-inline-start: 0;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n  }\n\n  .nav-btn {\n    pointer-events: auto;\n  }\n\n  /* ── Variant-specific track styles ────────────────────────────────────── */\n\n  /* Gallery: flex row, fills host, shows active + two thumbnails */\n  :host([variant='gallery']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-gallery-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='gallery'][orientation='vertical']) .track {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Filmstrip: flex row/column with absolute positioning to fill host */\n  :host([variant='filmstrip']) .track {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--carousel-filmstrip-gap, var(--size-2));\n    align-items: stretch;\n    overflow: hidden;\n  }\n\n  :host([variant='filmstrip'][orientation='vertical']) .track {\n    flex-direction: column;\n    width: 100%;\n  }\n\n  /* ── Vertical orientation ──────────────────────────────────────────────── */\n\n  :host([orientation='vertical']) {\n    --_slide-translate-before: translateY(-100%);\n    --_slide-translate-after: translateY(100%);\n  }\n\n  :host([orientation='vertical']) .indicators {\n    inset-block: 50% auto;\n    inset-inline: var(--size-3) auto;\n    flex-direction: column;\n    width: auto;\n    height: max-content;\n    padding-block: var(--size-6) var(--size-2);\n    padding-inline: var(--size-1-5);\n    border-radius: var(--rounded-full);\n    transform: translateX(0) translateY(-50%);\n  }\n\n  :host([orientation='vertical']) .controls {\n    flex-direction: column;\n    margin-block-start: auto;\n    margin-inline-start: 0;\n  }\n\n  :host([orientation='vertical']) > .controls {\n    inset-block-end: var(--size-3);\n    inset-inline-end: var(--size-3);\n    margin-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n  }\n\n  :host([orientation='vertical']) .indicator-active {\n    width: var(--size-1-5);\n    height: var(--size-8);\n  }\n\n  /* animation properties are inherited from .indicator-active ore-progress::part(fill) below */\n\n  /* ── Bottom nav bar: indicators + controls ───────────────────────────── */\n\n  /* Floats above the bottom edge, shrinks to content width, centered.\n     A frosted backdrop keeps it legible over any image. */\n\n  .indicators {\n    position: absolute;\n    inset-block-end: var(--size-3);\n    inset-inline: 50%;\n    display: flex;\n    flex-direction: row;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: max-content;\n    padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n    pointer-events: none;\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-radius: var(--rounded-full);\n    backdrop-filter: blur(6px);\n    transform: translateX(-50%);\n  }\n\n  .indicator {\n    display: block;\n    flex-shrink: 0;\n    padding: 0;\n    pointer-events: auto;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: opacity var(--transition-fast);\n  }\n\n  .indicator > ore-progress {\n    display: block;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  /* Inactive indicator: small circle */\n  .indicator:not(.indicator-active) {\n    width: var(--size-2);\n    height: var(--size-2);\n    overflow: hidden;\n    border-radius: var(--rounded-full);\n  }\n\n  /* Active indicator: wider pill (progress bar) */\n  .indicator-active {\n    --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n    width: var(--size-8);\n  }\n\n  .indicator:focus-visible {\n    outline: var(--border) solid currentcolor;\n    outline-offset: 2px;\n  }\n\n  .indicator:hover {\n    opacity: 0.8;\n  }\n\n  .indicator ore-progress::part(fill) {\n    transition: width var(--transition-normal);\n  }\n\n  .indicator-active ore-progress::part(fill) {\n    animation-name: var(--carousel-animation-name, none);\n    animation-duration: calc(var(--carousel-timeout, 4000) * 1ms);\n    animation-timing-function: var(--ease-linear);\n    animation-fill-mode: forwards;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --carousel-transition-duration: 0s;\n  }\n}\n\n@keyframes carousel-fill {\n  from {\n    width: 0%;\n  }\n\n  to {\n    width: 100%;\n  }\n}\n\n@keyframes carousel-fill-v {\n  from {\n    height: 0%;\n  }\n\n  to {\n    height: 100%;\n  }\n}\n"],"mappings":""}

package/dist/content/carousel/carousel.d.ts

@@ -14,7 +14,7 @@ export type OreCarouselEvents = {
 export type OreCarouselProps = {
     /**
      * Whether to advance slides automatically. Defaults to `false`.
-     * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.
+     * Opt in explicitly: autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.
      */
     autoplay?: boolean;
     /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */
@@ -35,10 +35,10 @@ export type OreCarouselProps = {
     'slide-index'?: number;
     /**
      * Layout variant.
-     * - `'default'`   — slides translate in/out (default)
-     * - `'fade'`      — slides crossfade; no movement
-     * - `'filmstrip'` — all slides visible side-by-side; active expands
-     * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails
+     * - `'default'`: slides translate in/out (default)
+     * - `'fade'`: slides crossfade; no movement
+     * - `'filmstrip'`: all slides visible side-by-side; active expands
+     * - `'gallery'`: active slide fills the majority; adjacent slides show as thumbnails
      */
     variant?: CarouselVariant;
 };

package/dist/content/chat-message/chat-message.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor: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:var(--size-0-5)}.cursor: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:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor: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:var(--size-0-5)}.cursor: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:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--focus-ring);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}`;exports.default=e;
 //# sourceMappingURL=chat-message.css.cjs.map

package/dist/content/chat-message/chat-message.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.css.cjs","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"chat-message.css.cjs","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content`: both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes :\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template :\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding: see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding: see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/content/chat-message/chat-message.css.js

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor: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:var(--size-0-5)}.cursor: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:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--border-2) solid var(--color-focus);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}`;export{e as default};
+var e=`@layer refine.base{:host{--_bg:var(--chat-message-bg,var(--color-contrast-100));--_color:var(--chat-message-color,var(--color-contrast-900));--_user-bg:var(--chat-message-user-bg,var(--color-primary));--_user-color:var(--chat-message-user-color,var(--color-primary-content));--_radius:var(--chat-message-radius,var(--rounded-lg));--_max-width:var(--chat-message-max-width,36rem);display:block}.row{gap:var(--size-2-5);align-items:flex-start;display:flex}:host([sender=user]) .row{flex-direction:row-reverse}.avatar{flex-shrink:0;display:flex}.avatar[hidden]{display:none}.column{gap:var(--size-1);flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}:host([sender=user]) .column{align-items:flex-end}.name{padding-inline:var(--size-3-5);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-500)}.name[hidden]{display:none}.bubble{box-sizing:border-box;width:fit-content;max-width:var(--_max-width);padding:var(--size-2-5) var(--size-3-5);color:var(--_color);background:var(--_bg);border-radius:var(--_radius)}:host([sender=user]) .bubble{color:var(--_user-color);background:var(--_user-bg)}.content{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.content-slot{overflow-wrap:anywhere;white-space:pre-wrap}.cursor{vertical-align:text-bottom;width:.5em;height:1em;animation:var(--_motion-animation,chat-message-blink 1s step-end infinite);background:currentColor;display:inline-block}.cursor: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:var(--size-0-5)}.cursor: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:var(--size-0-5)}.cursor[hidden]{display:none}@keyframes chat-message-blink{50%{opacity:0}}.meta{gap:var(--size-1-5);padding-inline:var(--size-3-5);font-size:var(--text-xs);color:var(--color-contrast-400);align-items:center;display:flex}.meta[hidden],.timestamp[hidden]{display:none}.status{align-items:center;display:inline-flex}.status[hidden]{display:none}.status[data-status=sent]{color:var(--color-success)}.status[data-status=error]{color:var(--color-error)}.spinner{border:2px solid var(--color-contrast-300);width:.75em;height:.75em;animation:var(--_motion-animation,chat-message-spin var(--transition-loader) infinite);border-radius:50%;display:inline-block}.spinner:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.spinner:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes chat-message-spin{to{transform:rotate(360deg)}}.error-text{color:var(--color-error)}.error-text[hidden]{display:none}.retry{font:inherit;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.retry[hidden]{display:none}.retry:focus-visible{outline:var(--focus-ring);outline-offset:var(--border-2)}.actions{gap:var(--size-1);padding-inline:var(--size-3-5);display:flex}.actions[hidden]{display:none}}`;export{e as default};
 //# sourceMappingURL=chat-message.css.js.map

package/dist/content/chat-message/chat-message.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.css.js","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"chat-message.css.js","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content`: both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes :\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template :\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding: see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding: see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/content/chat-message/chat-message.d.ts

@@ -14,9 +14,9 @@ export type OreChatMessageProps = {
     error?: string;
     /** Display name shown above the bubble (falls back to a generic label per `sender`) */
     name?: string;
-    /** Who sent the message — controls alignment and bubble styling */
+    /** Who sent the message: controls alignment and bubble styling */
     sender?: ChatMessageSender;
-    /** Delivery status for outgoing messages — shows an inline indicator and, for `"error"`, a retry action */
+    /** Delivery status for outgoing messages: shows an inline indicator and, for `"error"`, a retry action */
     status?: ChatMessageStatus;
     /** Append a blinking cursor after the content, for a message still streaming in */
     streaming?: boolean;
@@ -24,13 +24,13 @@ export type OreChatMessageProps = {
     timestamp?: string;
 };
 /**
- * A single message bubble for chat/conversation UIs — sender-aware alignment, an optional
+ * A single message bubble for chat/conversation UIs: sender-aware alignment, an optional
  * avatar slot, delivery status (sending/sent/error with retry), and a streaming cursor for
  * assistant messages still generating. Content is provided via the default slot, so any
  * markdown-to-HTML rendering stays the consumer's choice.
  *
  * The default slot's leading/trailing whitespace-only text nodes are trimmed in place once
- * per slot assignment (mount, and again on `slotchange`) — pretty-printed HTML's
+ * per slot assignment (mount, and again on `slotchange`): pretty-printed HTML's
  * indentation would otherwise render as blank lines, since the bubble preserves line breaks
  * (`white-space: pre-wrap`) for genuine multi-paragraph replies. This mutates those specific
  * text nodes' `textContent` directly; it never touches nodes appended afterward (e.g. by

package/dist/content/chat-message/chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/content/chat-message/chat-message.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAQ7D,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6EAA6E;IAC7E,KAAK,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,2GAA2G;IAC3G,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/content/chat-message/chat-message.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAQ7D,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6EAA6E;IAC7E,KAAK,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,0GAA0G;IAC1G,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

package/dist/content/chat-panel/chat-panel.d.ts

@@ -71,7 +71,7 @@ export type OreChatPanelProps = {
     open?: boolean;
 };
 /**
- * A self-contained assistant chat surface — the fixed corner window a demo or support
+ * A self-contained assistant chat surface: the fixed corner window a demo or support
  * flow needs: header with title, status, Start over and close; a live-region message
  * transcript built from `ore-chat-message`; suggested questions while the transcript
  * holds only the greeting; and an `ore-message-composer` footer.

package/dist/content/code-window/code-window.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code-window.css.cjs","names":[],"sources":["../../../src/content/code-window/code-window.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--code-window-bg, var(--color-canvas));\n    --_header-bg: var(--code-window-header-bg, var(--color-contrast-100));\n    --_border-color: var(--code-window-border-color, var(--color-contrast-300));\n    --_radius: var(--code-window-radius, var(--rounded-lg));\n    --_shadow: var(--code-window-shadow, var(--shadow-sm));\n    --_body-padding: var(--code-window-body-padding, var(--size-5) var(--size-6));\n\n    display: block;\n  }\n\n  .window {\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-3) var(--size-5);\n    overflow: hidden;\n    background: var(--_header-bg);\n    border-bottom: var(--border) solid var(--_border-color);\n    transition: background var(--transition-normal);\n  }\n\n  /* ── code variant ─────────────────────────────────────────── */\n\n  .lang {\n    flex-shrink: 0;\n    padding: 2px var(--size-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--text-2xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-primary);\n    letter-spacing: 0.03em;\n    background: var(--color-primary-backdrop);\n    border: var(--border) solid oklch(70% 0.12 293deg / 20%);\n    border-radius: var(--rounded-sm);\n  }\n\n  .filename {\n    min-width: 0;\n    margin-inline-start: var(--size-2);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    white-space: nowrap;\n  }\n\n  /* ── chat variant ─────────────────────────────────────────── */\n\n  .dots {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding-inline-end: var(--size-3);\n    margin-inline-end: var(--size-1-5);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Authentic macOS traffic-light palette — muted so they don't fight the content */\n  .dots span {\n    display: block;\n    width: var(--size-3);\n    height: var(--size-3);\n    border-radius: var(--rounded-full);\n  }\n\n  .dots span:nth-child(1) {\n    background: oklch(65% 0.18 25deg);\n  }\n\n  .dots span:nth-child(2) {\n    background: oklch(72% 0.18 80deg);\n  }\n\n  .dots span:nth-child(3) {\n    background: oklch(62% 0.18 145deg);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── header-end spacer ────────────────────────────────────── */\n\n  .header-spacer {\n    flex: 1;\n  }\n\n  ::slotted([slot='header-end']) {\n    flex-shrink: 0;\n  }\n\n  /* ── body ─────────────────────────────────────────────────── */\n\n  .body {\n    padding: var(--_body-padding);\n    overflow-x: auto;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"code-window.css.cjs","names":[],"sources":["../../../src/content/code-window/code-window.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--code-window-bg, var(--color-canvas));\n    --_header-bg: var(--code-window-header-bg, var(--color-contrast-100));\n    --_border-color: var(--code-window-border-color, var(--color-contrast-300));\n    --_radius: var(--code-window-radius, var(--rounded-lg));\n    --_shadow: var(--code-window-shadow, var(--shadow-sm));\n    --_body-padding: var(--code-window-body-padding, var(--size-5) var(--size-6));\n\n    display: block;\n  }\n\n  .window {\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-3) var(--size-5);\n    overflow: hidden;\n    background: var(--_header-bg);\n    border-bottom: var(--border) solid var(--_border-color);\n    transition: background var(--transition-normal);\n  }\n\n  /* ── code variant ─────────────────────────────────────────── */\n\n  .lang {\n    flex-shrink: 0;\n    padding: 2px var(--size-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--text-2xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-primary);\n    letter-spacing: 0.03em;\n    background: var(--color-primary-backdrop);\n    border: var(--border) solid oklch(70% 0.12 293deg / 20%);\n    border-radius: var(--rounded-sm);\n  }\n\n  .filename {\n    min-width: 0;\n    margin-inline-start: var(--size-2);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    white-space: nowrap;\n  }\n\n  /* ── chat variant ─────────────────────────────────────────── */\n\n  .dots {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding-inline-end: var(--size-3);\n    margin-inline-end: var(--size-1-5);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Authentic macOS traffic-light palette: muted so they don't fight the content */\n  .dots span {\n    display: block;\n    width: var(--size-3);\n    height: var(--size-3);\n    border-radius: var(--rounded-full);\n  }\n\n  .dots span:nth-child(1) {\n    background: oklch(65% 0.18 25deg);\n  }\n\n  .dots span:nth-child(2) {\n    background: oklch(72% 0.18 80deg);\n  }\n\n  .dots span:nth-child(3) {\n    background: oklch(62% 0.18 145deg);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── header-end spacer ────────────────────────────────────── */\n\n  .header-spacer {\n    flex: 1;\n  }\n\n  ::slotted([slot='header-end']) {\n    flex-shrink: 0;\n  }\n\n  /* ── body ─────────────────────────────────────────────────── */\n\n  .body {\n    padding: var(--_body-padding);\n    overflow-x: auto;\n  }\n}\n"],"mappings":""}

package/dist/content/code-window/code-window.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-window.css.js","names":[],"sources":["../../../src/content/code-window/code-window.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--code-window-bg, var(--color-canvas));\n    --_header-bg: var(--code-window-header-bg, var(--color-contrast-100));\n    --_border-color: var(--code-window-border-color, var(--color-contrast-300));\n    --_radius: var(--code-window-radius, var(--rounded-lg));\n    --_shadow: var(--code-window-shadow, var(--shadow-sm));\n    --_body-padding: var(--code-window-body-padding, var(--size-5) var(--size-6));\n\n    display: block;\n  }\n\n  .window {\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-3) var(--size-5);\n    overflow: hidden;\n    background: var(--_header-bg);\n    border-bottom: var(--border) solid var(--_border-color);\n    transition: background var(--transition-normal);\n  }\n\n  /* ── code variant ─────────────────────────────────────────── */\n\n  .lang {\n    flex-shrink: 0;\n    padding: 2px var(--size-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--text-2xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-primary);\n    letter-spacing: 0.03em;\n    background: var(--color-primary-backdrop);\n    border: var(--border) solid oklch(70% 0.12 293deg / 20%);\n    border-radius: var(--rounded-sm);\n  }\n\n  .filename {\n    min-width: 0;\n    margin-inline-start: var(--size-2);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    white-space: nowrap;\n  }\n\n  /* ── chat variant ─────────────────────────────────────────── */\n\n  .dots {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding-inline-end: var(--size-3);\n    margin-inline-end: var(--size-1-5);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Authentic macOS traffic-light palette — muted so they don't fight the content */\n  .dots span {\n    display: block;\n    width: var(--size-3);\n    height: var(--size-3);\n    border-radius: var(--rounded-full);\n  }\n\n  .dots span:nth-child(1) {\n    background: oklch(65% 0.18 25deg);\n  }\n\n  .dots span:nth-child(2) {\n    background: oklch(72% 0.18 80deg);\n  }\n\n  .dots span:nth-child(3) {\n    background: oklch(62% 0.18 145deg);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── header-end spacer ────────────────────────────────────── */\n\n  .header-spacer {\n    flex: 1;\n  }\n\n  ::slotted([slot='header-end']) {\n    flex-shrink: 0;\n  }\n\n  /* ── body ─────────────────────────────────────────────────── */\n\n  .body {\n    padding: var(--_body-padding);\n    overflow-x: auto;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"code-window.css.js","names":[],"sources":["../../../src/content/code-window/code-window.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--code-window-bg, var(--color-canvas));\n    --_header-bg: var(--code-window-header-bg, var(--color-contrast-100));\n    --_border-color: var(--code-window-border-color, var(--color-contrast-300));\n    --_radius: var(--code-window-radius, var(--rounded-lg));\n    --_shadow: var(--code-window-shadow, var(--shadow-sm));\n    --_body-padding: var(--code-window-body-padding, var(--size-5) var(--size-6));\n\n    display: block;\n  }\n\n  .window {\n    overflow: hidden;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-3) var(--size-5);\n    overflow: hidden;\n    background: var(--_header-bg);\n    border-bottom: var(--border) solid var(--_border-color);\n    transition: background var(--transition-normal);\n  }\n\n  /* ── code variant ─────────────────────────────────────────── */\n\n  .lang {\n    flex-shrink: 0;\n    padding: 2px var(--size-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--text-2xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-primary);\n    letter-spacing: 0.03em;\n    background: var(--color-primary-backdrop);\n    border: var(--border) solid oklch(70% 0.12 293deg / 20%);\n    border-radius: var(--rounded-sm);\n  }\n\n  .filename {\n    min-width: 0;\n    margin-inline-start: var(--size-2);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    white-space: nowrap;\n  }\n\n  /* ── chat variant ─────────────────────────────────────────── */\n\n  .dots {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding-inline-end: var(--size-3);\n    margin-inline-end: var(--size-1-5);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Authentic macOS traffic-light palette: muted so they don't fight the content */\n  .dots span {\n    display: block;\n    width: var(--size-3);\n    height: var(--size-3);\n    border-radius: var(--rounded-full);\n  }\n\n  .dots span:nth-child(1) {\n    background: oklch(65% 0.18 25deg);\n  }\n\n  .dots span:nth-child(2) {\n    background: oklch(72% 0.18 80deg);\n  }\n\n  .dots span:nth-child(3) {\n    background: oklch(62% 0.18 145deg);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--text-xs);\n    color: var(--text-color-secondary);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── header-end spacer ────────────────────────────────────── */\n\n  .header-spacer {\n    flex: 1;\n  }\n\n  ::slotted([slot='header-end']) {\n    flex-shrink: 0;\n  }\n\n  /* ── body ─────────────────────────────────────────────────── */\n\n  .body {\n    padding: var(--_body-padding);\n    overflow-x: auto;\n  }\n}\n"],"mappings":""}

package/dist/content/code-window/code-window.d.ts

@@ -9,8 +9,8 @@ export type OreCodeWindowProps = {
     /** Title string shown beside the traffic-light dots (`variant="chat"` only) */
     title?: string;
     /**
-     * `"code"` (default) — header shows a language badge + filename.
-     * `"chat"` — header shows traffic-light dots + a title.
+     * `"code"` (default): header shows a language badge + filename.
+     * `"chat"`: header shows traffic-light dots + a title.
      */
     variant?: CodeWindowVariant;
 };
@@ -18,8 +18,8 @@ export type OreCodeWindowProps = {
  * A styled window chrome for code blocks and AI/MCP conversation flows.
  *
  * Two variants:
- * - `variant="code"` (default) — language badge + optional filename header.
- * - `variant="chat"` — traffic-light dots + title header.
+ * - `variant="code"` (default): language badge + optional filename header.
+ * - `variant="chat"`: traffic-light dots + title header.
  *
  * @element ore-code-window
  *

package/dist/content/index.d.ts

@@ -30,6 +30,10 @@ export type { OrePaginationEvents, OrePaginationProps } from './pagination/pagin
 export { PAGINATION_TAG } from './pagination/pagination';
 export type { OreQrCodeEvents, OreQrCodeProps } from './qr-code/qr-code';
 export { QR_CODE_TAG } from './qr-code/qr-code';
+export type { OreRankItemProps } from './rank-list/rank-item';
+export { RANK_ITEM_TAG } from './rank-list/rank-item';
+export type { OreRankListProps, RankContext } from './rank-list/rank-list';
+export { RANK_CTX, RANK_LIST_TAG } from './rank-list/rank-list';
 export type { OreSeparatorProps } from './separator/separator';
 export { SEPARATOR_TAG } from './separator/separator';
 export type { OreSpeechPlayerEvents, OreSpeechPlayerLabels, OreSpeechPlayerProps, SpeechPlayerElement, SpeechPlayerState, } from './speech-player/speech-player';

package/dist/content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACvE,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAClH,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/content/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACvE,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAClH,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/content/list/_list-item-reveal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"_list-item-reveal.cjs","names":[],"sources":["../../../src/content/list/_list-item-reveal.ts"],"sourcesContent":["import { createPanGesture, type PanGesture, type PanGestureDetail } from '@vielzeug/gesture';\nimport type { Readable } from '@vielzeug/ripple';\nimport type { ListItemRevealSide } from './list-item';\n\n/** Drag distance (px) past which the action panel snaps fully open on release. */\nconst REVEAL_THRESHOLD = 64;\n/** Drag distance (px) past which the swipe auto-confirms the action — \"swiped all the way\". */\nconst CONFIRM_THRESHOLD = REVEAL_THRESHOLD * 3;\n/** Fraction of CONFIRM_THRESHOLD past which `data-confirming` warns the drag is about to fire. */\nconst CONFIRM_WARNING_RATIO = 0.85;\n\nexport type RevealStateOptions = {\n  disabled: Readable<boolean>;\n  hasActions: (side: ListItemRevealSide) => boolean;\n  /** The full-swipe-through gesture fired — emit `confirm` and click the slot's own action. */\n  onConfirm: (side: ListItemRevealSide) => void;\n};\n\n/**\n * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots\n * — isolated here since it's the one genuinely tricky part of the component (three distance\n * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a\n * shared primitive: `createPanGesture` itself already is one (shared with `ore-toast`),\n * but this two-stage reveal/confirm layer on top of it has exactly one consumer today —\n * generalizing it further would be speculative, not reusable.\n *\n * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`\n * style — it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`\n * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this\n * module setting the attribute is enough to drive both that watcher and `list.css`'s\n * `[revealed]` styling.\n */\nexport function createRevealState(el: HTMLElement, target: Element, options: RevealStateOptions): PanGesture {\n  const resolveSide = (detail: PanGestureDetail): ListItemRevealSide => (detail.distance < 0 ? 'right' : 'left');\n\n  // Inline `--_swipe-x` override during an active drag lets the row (and both action panels,\n  // which read the same variable) follow the pointer 1:1 with no transition lag. Clearing it\n  // hands control back to the `[revealed]`/`:focus-within` CSS rules in list-item.css, which\n  // then animate normally via the CSS `transition`.\n  const resetInline = (): void => {\n    el.removeAttribute('data-dragging');\n    el.removeAttribute('data-confirming');\n    el.style.removeProperty('--_swipe-x');\n  };\n\n  let pan: PanGesture;\n\n  pan = createPanGesture(target, {\n    axis: 'x',\n    disabled: () => options.disabled.value,\n    onEnd: (detail) => {\n      resetInline();\n\n      if (detail.reason !== 'release') return;\n\n      const side = resolveSide(detail);\n\n      if (options.hasActions(side) && Math.abs(detail.distance) >= REVEAL_THRESHOLD) el.setAttribute('revealed', side);\n    },\n    onMove: (detail) => {\n      const side = resolveSide(detail);\n\n      if (!options.hasActions(side)) return;\n\n      const distance = Math.abs(detail.distance);\n\n      if (distance >= CONFIRM_THRESHOLD) {\n        pan.cancel();\n        el.removeAttribute('revealed');\n        options.onConfirm(side);\n\n        return;\n      }\n\n      const revealProgress = Math.min(distance / REVEAL_THRESHOLD, 1);\n\n      el.setAttribute('data-dragging', '');\n      el.toggleAttribute('data-confirming', distance / CONFIRM_THRESHOLD >= CONFIRM_WARNING_RATIO);\n      el.style.setProperty('--_swipe-x', String((side === 'left' ? 1 : -1) * revealProgress));\n    },\n    pointerCapture: false,\n  });\n\n  return pan;\n}\n"],"mappings":"mCAKA,IAAM,EAAmB,GAEnB,EAAoB,IAEpB,EAAwB,IAuB9B,SAAgB,kBAAkB,EAAiB,EAAiB,EAAyC,CAC3G,IAAM,YAAe,GAAkD,EAAO,SAAW,EAAI,QAAU,OAMjG,gBAA0B,CAC9B,EAAG,gBAAgB,eAAe,EAClC,EAAG,gBAAgB,iBAAiB,EACpC,EAAG,MAAM,eAAe,YAAY,CACtC,EAEI,EAsCJ,MApCA,IAAA,EAAM,EAAA,iBAAA,CAAiB,EAAQ,CAC7B,KAAM,IACN,aAAgB,EAAQ,SAAS,MACjC,MAAQ,GAAW,CAGjB,GAFA,YAAY,EAER,EAAO,SAAW,UAAW,OAEjC,IAAM,EAAO,YAAY,CAAM,EAE3B,EAAQ,WAAW,CAAI,GAAK,KAAK,IAAI,EAAO,QAAQ,GAAK,GAAkB,EAAG,aAAa,WAAY,CAAI,CACjH,EACA,OAAS,GAAW,CAClB,IAAM,EAAO,YAAY,CAAM,EAE/B,GAAI,CAAC,EAAQ,WAAW,CAAI,EAAG,OAE/B,IAAM,EAAW,KAAK,IAAI,EAAO,QAAQ,EAEzC,GAAI,GAAY,EAAmB,CACjC,EAAI,OAAO,EACX,EAAG,gBAAgB,UAAU,EAC7B,EAAQ,UAAU,CAAI,EAEtB,MACF,CAEA,IAAM,EAAiB,KAAK,IAAI,EAAW,EAAkB,CAAC,EAE9D,EAAG,aAAa,gBAAiB,EAAE,EACnC,EAAG,gBAAgB,kBAAmB,EAAW,GAAqB,CAAqB,EAC3F,EAAG,MAAM,YAAY,aAAc,QAAQ,IAAS,OAAS,EAAI,IAAM,CAAc,CAAC,CACxF,EACA,eAAgB,EAClB,CAAC,EAEM,CACT"}
+{"version":3,"file":"_list-item-reveal.cjs","names":[],"sources":["../../../src/content/list/_list-item-reveal.ts"],"sourcesContent":["import { createPanGesture, type PanGesture, type PanGestureDetail } from '@vielzeug/gesture';\nimport type { Readable } from '@vielzeug/ripple';\nimport type { ListItemRevealSide } from './list-item';\n\n/** Drag distance (px) past which the action panel snaps fully open on release. */\nconst REVEAL_THRESHOLD = 64;\n/** Drag distance (px) past which the swipe auto-confirms the action: \"swiped all the way\". */\nconst CONFIRM_THRESHOLD = REVEAL_THRESHOLD * 3;\n/** Fraction of CONFIRM_THRESHOLD past which `data-confirming` warns the drag is about to fire. */\nconst CONFIRM_WARNING_RATIO = 0.85;\n\nexport type RevealStateOptions = {\n  disabled: Readable<boolean>;\n  hasActions: (side: ListItemRevealSide) => boolean;\n  /** The full-swipe-through gesture fired: emit `confirm` and click the slot's own action. */\n  onConfirm: (side: ListItemRevealSide) => void;\n};\n\n/**\n * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots\n *: isolated here since it's the one genuinely tricky part of the component (three distance\n * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a\n * shared primitive: `createPanGesture` itself already is one (shared with `ore-toast`),\n * but this two-stage reveal/confirm layer on top of it has exactly one consumer today :\n * generalizing it further would be speculative, not reusable.\n *\n * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`\n * style: it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`\n * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this\n * module setting the attribute is enough to drive both that watcher and `list.css`'s\n * `[revealed]` styling.\n */\nexport function createRevealState(el: HTMLElement, target: Element, options: RevealStateOptions): PanGesture {\n  const resolveSide = (detail: PanGestureDetail): ListItemRevealSide => (detail.distance < 0 ? 'right' : 'left');\n\n  // Inline `--_swipe-x` override during an active drag lets the row (and both action panels,\n  // which read the same variable) follow the pointer 1:1 with no transition lag. Clearing it\n  // hands control back to the `[revealed]`/`:focus-within` CSS rules in list-item.css, which\n  // then animate normally via the CSS `transition`.\n  const resetInline = (): void => {\n    el.removeAttribute('data-dragging');\n    el.removeAttribute('data-confirming');\n    el.style.removeProperty('--_swipe-x');\n  };\n\n  let pan: PanGesture;\n\n  pan = createPanGesture(target, {\n    axis: 'x',\n    disabled: () => options.disabled.value,\n    onEnd: (detail) => {\n      resetInline();\n\n      if (detail.reason !== 'release') return;\n\n      const side = resolveSide(detail);\n\n      if (options.hasActions(side) && Math.abs(detail.distance) >= REVEAL_THRESHOLD) el.setAttribute('revealed', side);\n    },\n    onMove: (detail) => {\n      const side = resolveSide(detail);\n\n      if (!options.hasActions(side)) return;\n\n      const distance = Math.abs(detail.distance);\n\n      if (distance >= CONFIRM_THRESHOLD) {\n        pan.cancel();\n        el.removeAttribute('revealed');\n        options.onConfirm(side);\n\n        return;\n      }\n\n      const revealProgress = Math.min(distance / REVEAL_THRESHOLD, 1);\n\n      el.setAttribute('data-dragging', '');\n      el.toggleAttribute('data-confirming', distance / CONFIRM_THRESHOLD >= CONFIRM_WARNING_RATIO);\n      el.style.setProperty('--_swipe-x', String((side === 'left' ? 1 : -1) * revealProgress));\n    },\n    pointerCapture: false,\n  });\n\n  return pan;\n}\n"],"mappings":"mCAKA,IAAM,EAAmB,GAEnB,EAAoB,IAEpB,EAAwB,IAuB9B,SAAgB,kBAAkB,EAAiB,EAAiB,EAAyC,CAC3G,IAAM,YAAe,GAAkD,EAAO,SAAW,EAAI,QAAU,OAMjG,gBAA0B,CAC9B,EAAG,gBAAgB,eAAe,EAClC,EAAG,gBAAgB,iBAAiB,EACpC,EAAG,MAAM,eAAe,YAAY,CACtC,EAEI,EAsCJ,MApCA,IAAA,EAAM,EAAA,iBAAA,CAAiB,EAAQ,CAC7B,KAAM,IACN,aAAgB,EAAQ,SAAS,MACjC,MAAQ,GAAW,CAGjB,GAFA,YAAY,EAER,EAAO,SAAW,UAAW,OAEjC,IAAM,EAAO,YAAY,CAAM,EAE3B,EAAQ,WAAW,CAAI,GAAK,KAAK,IAAI,EAAO,QAAQ,GAAK,GAAkB,EAAG,aAAa,WAAY,CAAI,CACjH,EACA,OAAS,GAAW,CAClB,IAAM,EAAO,YAAY,CAAM,EAE/B,GAAI,CAAC,EAAQ,WAAW,CAAI,EAAG,OAE/B,IAAM,EAAW,KAAK,IAAI,EAAO,QAAQ,EAEzC,GAAI,GAAY,EAAmB,CACjC,EAAI,OAAO,EACX,EAAG,gBAAgB,UAAU,EAC7B,EAAQ,UAAU,CAAI,EAEtB,MACF,CAEA,IAAM,EAAiB,KAAK,IAAI,EAAW,EAAkB,CAAC,EAE9D,EAAG,aAAa,gBAAiB,EAAE,EACnC,EAAG,gBAAgB,kBAAmB,EAAW,GAAqB,CAAqB,EAC3F,EAAG,MAAM,YAAY,aAAc,QAAQ,IAAS,OAAS,EAAI,IAAM,CAAc,CAAC,CACxF,EACA,eAAgB,EAClB,CAAC,EAEM,CACT"}

package/dist/content/list/_list-item-reveal.d.ts

@@ -4,19 +4,19 @@ import type { ListItemRevealSide } from './list-item';
 export type RevealStateOptions = {
     disabled: Readable<boolean>;
     hasActions: (side: ListItemRevealSide) => boolean;
-    /** The full-swipe-through gesture fired — emit `confirm` and click the slot's own action. */
+    /** The full-swipe-through gesture fired: emit `confirm` and click the slot's own action. */
     onConfirm: (side: ListItemRevealSide) => void;
 };
 /**
  * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots
- * — isolated here since it's the one genuinely tricky part of the component (three distance
+ *: isolated here since it's the one genuinely tricky part of the component (three distance
  * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a
  * shared primitive: `createPanGesture` itself already is one (shared with `ore-toast`),
- * but this two-stage reveal/confirm layer on top of it has exactly one consumer today —
+ * but this two-stage reveal/confirm layer on top of it has exactly one consumer today :
  * generalizing it further would be speculative, not reusable.
  *
  * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`
- * style — it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`
+ * style: it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`
  * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this
  * module setting the attribute is enough to drive both that watcher and `list.css`'s
  * `[revealed]` styling.

package/dist/content/list/_list-item-reveal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_list-item-reveal.d.ts","sourceRoot":"","sources":["../../../src/content/list/_list-item-reveal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAyB,MAAM,mBAAmB,CAAC;AAC7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,OAAO,CAAC;IAClD,6FAA6F;IAC7F,SAAS,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,kBAAkB,GAAG,UAAU,CAoD3G"}
+{"version":3,"file":"_list-item-reveal.d.ts","sourceRoot":"","sources":["../../../src/content/list/_list-item-reveal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAyB,MAAM,mBAAmB,CAAC;AAC7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,OAAO,CAAC;IAClD,4FAA4F;IAC5F,SAAS,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,kBAAkB,GAAG,UAAU,CAoD3G"}

package/dist/content/list/_list-item-reveal.js.map

@@ -1 +1 @@
-{"version":3,"file":"_list-item-reveal.js","names":[],"sources":["../../../src/content/list/_list-item-reveal.ts"],"sourcesContent":["import { createPanGesture, type PanGesture, type PanGestureDetail } from '@vielzeug/gesture';\nimport type { Readable } from '@vielzeug/ripple';\nimport type { ListItemRevealSide } from './list-item';\n\n/** Drag distance (px) past which the action panel snaps fully open on release. */\nconst REVEAL_THRESHOLD = 64;\n/** Drag distance (px) past which the swipe auto-confirms the action — \"swiped all the way\". */\nconst CONFIRM_THRESHOLD = REVEAL_THRESHOLD * 3;\n/** Fraction of CONFIRM_THRESHOLD past which `data-confirming` warns the drag is about to fire. */\nconst CONFIRM_WARNING_RATIO = 0.85;\n\nexport type RevealStateOptions = {\n  disabled: Readable<boolean>;\n  hasActions: (side: ListItemRevealSide) => boolean;\n  /** The full-swipe-through gesture fired — emit `confirm` and click the slot's own action. */\n  onConfirm: (side: ListItemRevealSide) => void;\n};\n\n/**\n * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots\n * — isolated here since it's the one genuinely tricky part of the component (three distance\n * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a\n * shared primitive: `createPanGesture` itself already is one (shared with `ore-toast`),\n * but this two-stage reveal/confirm layer on top of it has exactly one consumer today —\n * generalizing it further would be speculative, not reusable.\n *\n * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`\n * style — it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`\n * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this\n * module setting the attribute is enough to drive both that watcher and `list.css`'s\n * `[revealed]` styling.\n */\nexport function createRevealState(el: HTMLElement, target: Element, options: RevealStateOptions): PanGesture {\n  const resolveSide = (detail: PanGestureDetail): ListItemRevealSide => (detail.distance < 0 ? 'right' : 'left');\n\n  // Inline `--_swipe-x` override during an active drag lets the row (and both action panels,\n  // which read the same variable) follow the pointer 1:1 with no transition lag. Clearing it\n  // hands control back to the `[revealed]`/`:focus-within` CSS rules in list-item.css, which\n  // then animate normally via the CSS `transition`.\n  const resetInline = (): void => {\n    el.removeAttribute('data-dragging');\n    el.removeAttribute('data-confirming');\n    el.style.removeProperty('--_swipe-x');\n  };\n\n  let pan: PanGesture;\n\n  pan = createPanGesture(target, {\n    axis: 'x',\n    disabled: () => options.disabled.value,\n    onEnd: (detail) => {\n      resetInline();\n\n      if (detail.reason !== 'release') return;\n\n      const side = resolveSide(detail);\n\n      if (options.hasActions(side) && Math.abs(detail.distance) >= REVEAL_THRESHOLD) el.setAttribute('revealed', side);\n    },\n    onMove: (detail) => {\n      const side = resolveSide(detail);\n\n      if (!options.hasActions(side)) return;\n\n      const distance = Math.abs(detail.distance);\n\n      if (distance >= CONFIRM_THRESHOLD) {\n        pan.cancel();\n        el.removeAttribute('revealed');\n        options.onConfirm(side);\n\n        return;\n      }\n\n      const revealProgress = Math.min(distance / REVEAL_THRESHOLD, 1);\n\n      el.setAttribute('data-dragging', '');\n      el.toggleAttribute('data-confirming', distance / CONFIRM_THRESHOLD >= CONFIRM_WARNING_RATIO);\n      el.style.setProperty('--_swipe-x', String((side === 'left' ? 1 : -1) * revealProgress));\n    },\n    pointerCapture: false,\n  });\n\n  return pan;\n}\n"],"mappings":"qDAKA,IAAM,EAAmB,GAEnB,EAAoB,IAEpB,EAAwB,IAuB9B,SAAgB,kBAAkB,EAAiB,EAAiB,EAAyC,CAC3G,IAAM,YAAe,GAAkD,EAAO,SAAW,EAAI,QAAU,OAMjG,gBAA0B,CAC9B,EAAG,gBAAgB,eAAe,EAClC,EAAG,gBAAgB,iBAAiB,EACpC,EAAG,MAAM,eAAe,YAAY,CACtC,EAEI,EAsCJ,MApCA,GAAM,EAAiB,EAAQ,CAC7B,KAAM,IACN,aAAgB,EAAQ,SAAS,MACjC,MAAQ,GAAW,CAGjB,GAFA,YAAY,EAER,EAAO,SAAW,UAAW,OAEjC,IAAM,EAAO,YAAY,CAAM,EAE3B,EAAQ,WAAW,CAAI,GAAK,KAAK,IAAI,EAAO,QAAQ,GAAK,GAAkB,EAAG,aAAa,WAAY,CAAI,CACjH,EACA,OAAS,GAAW,CAClB,IAAM,EAAO,YAAY,CAAM,EAE/B,GAAI,CAAC,EAAQ,WAAW,CAAI,EAAG,OAE/B,IAAM,EAAW,KAAK,IAAI,EAAO,QAAQ,EAEzC,GAAI,GAAY,EAAmB,CACjC,EAAI,OAAO,EACX,EAAG,gBAAgB,UAAU,EAC7B,EAAQ,UAAU,CAAI,EAEtB,MACF,CAEA,IAAM,EAAiB,KAAK,IAAI,EAAW,EAAkB,CAAC,EAE9D,EAAG,aAAa,gBAAiB,EAAE,EACnC,EAAG,gBAAgB,kBAAmB,EAAW,GAAqB,CAAqB,EAC3F,EAAG,MAAM,YAAY,aAAc,QAAQ,IAAS,OAAS,EAAI,IAAM,CAAc,CAAC,CACxF,EACA,eAAgB,EAClB,CAAC,EAEM,CACT"}
+{"version":3,"file":"_list-item-reveal.js","names":[],"sources":["../../../src/content/list/_list-item-reveal.ts"],"sourcesContent":["import { createPanGesture, type PanGesture, type PanGestureDetail } from '@vielzeug/gesture';\nimport type { Readable } from '@vielzeug/ripple';\nimport type { ListItemRevealSide } from './list-item';\n\n/** Drag distance (px) past which the action panel snaps fully open on release. */\nconst REVEAL_THRESHOLD = 64;\n/** Drag distance (px) past which the swipe auto-confirms the action: \"swiped all the way\". */\nconst CONFIRM_THRESHOLD = REVEAL_THRESHOLD * 3;\n/** Fraction of CONFIRM_THRESHOLD past which `data-confirming` warns the drag is about to fire. */\nconst CONFIRM_WARNING_RATIO = 0.85;\n\nexport type RevealStateOptions = {\n  disabled: Readable<boolean>;\n  hasActions: (side: ListItemRevealSide) => boolean;\n  /** The full-swipe-through gesture fired: emit `confirm` and click the slot's own action. */\n  onConfirm: (side: ListItemRevealSide) => void;\n};\n\n/**\n * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots\n *: isolated here since it's the one genuinely tricky part of the component (three distance\n * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a\n * shared primitive: `createPanGesture` itself already is one (shared with `ore-toast`),\n * but this two-stage reveal/confirm layer on top of it has exactly one consumer today :\n * generalizing it further would be speculative, not reusable.\n *\n * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`\n * style: it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`\n * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this\n * module setting the attribute is enough to drive both that watcher and `list.css`'s\n * `[revealed]` styling.\n */\nexport function createRevealState(el: HTMLElement, target: Element, options: RevealStateOptions): PanGesture {\n  const resolveSide = (detail: PanGestureDetail): ListItemRevealSide => (detail.distance < 0 ? 'right' : 'left');\n\n  // Inline `--_swipe-x` override during an active drag lets the row (and both action panels,\n  // which read the same variable) follow the pointer 1:1 with no transition lag. Clearing it\n  // hands control back to the `[revealed]`/`:focus-within` CSS rules in list-item.css, which\n  // then animate normally via the CSS `transition`.\n  const resetInline = (): void => {\n    el.removeAttribute('data-dragging');\n    el.removeAttribute('data-confirming');\n    el.style.removeProperty('--_swipe-x');\n  };\n\n  let pan: PanGesture;\n\n  pan = createPanGesture(target, {\n    axis: 'x',\n    disabled: () => options.disabled.value,\n    onEnd: (detail) => {\n      resetInline();\n\n      if (detail.reason !== 'release') return;\n\n      const side = resolveSide(detail);\n\n      if (options.hasActions(side) && Math.abs(detail.distance) >= REVEAL_THRESHOLD) el.setAttribute('revealed', side);\n    },\n    onMove: (detail) => {\n      const side = resolveSide(detail);\n\n      if (!options.hasActions(side)) return;\n\n      const distance = Math.abs(detail.distance);\n\n      if (distance >= CONFIRM_THRESHOLD) {\n        pan.cancel();\n        el.removeAttribute('revealed');\n        options.onConfirm(side);\n\n        return;\n      }\n\n      const revealProgress = Math.min(distance / REVEAL_THRESHOLD, 1);\n\n      el.setAttribute('data-dragging', '');\n      el.toggleAttribute('data-confirming', distance / CONFIRM_THRESHOLD >= CONFIRM_WARNING_RATIO);\n      el.style.setProperty('--_swipe-x', String((side === 'left' ? 1 : -1) * revealProgress));\n    },\n    pointerCapture: false,\n  });\n\n  return pan;\n}\n"],"mappings":"qDAKA,IAAM,EAAmB,GAEnB,EAAoB,IAEpB,EAAwB,IAuB9B,SAAgB,kBAAkB,EAAiB,EAAiB,EAAyC,CAC3G,IAAM,YAAe,GAAkD,EAAO,SAAW,EAAI,QAAU,OAMjG,gBAA0B,CAC9B,EAAG,gBAAgB,eAAe,EAClC,EAAG,gBAAgB,iBAAiB,EACpC,EAAG,MAAM,eAAe,YAAY,CACtC,EAEI,EAsCJ,MApCA,GAAM,EAAiB,EAAQ,CAC7B,KAAM,IACN,aAAgB,EAAQ,SAAS,MACjC,MAAQ,GAAW,CAGjB,GAFA,YAAY,EAER,EAAO,SAAW,UAAW,OAEjC,IAAM,EAAO,YAAY,CAAM,EAE3B,EAAQ,WAAW,CAAI,GAAK,KAAK,IAAI,EAAO,QAAQ,GAAK,GAAkB,EAAG,aAAa,WAAY,CAAI,CACjH,EACA,OAAS,GAAW,CAClB,IAAM,EAAO,YAAY,CAAM,EAE/B,GAAI,CAAC,EAAQ,WAAW,CAAI,EAAG,OAE/B,IAAM,EAAW,KAAK,IAAI,EAAO,QAAQ,EAEzC,GAAI,GAAY,EAAmB,CACjC,EAAI,OAAO,EACX,EAAG,gBAAgB,UAAU,EAC7B,EAAQ,UAAU,CAAI,EAEtB,MACF,CAEA,IAAM,EAAiB,KAAK,IAAI,EAAW,EAAkB,CAAC,EAE9D,EAAG,aAAa,gBAAiB,EAAE,EACnC,EAAG,gBAAgB,kBAAmB,EAAW,GAAqB,CAAqB,EAC3F,EAAG,MAAM,YAAY,aAAc,QAAQ,IAAS,OAAS,EAAI,IAAM,CAAc,CAAC,CACxF,EACA,eAAgB,EAClB,CAAC,EAEM,CACT"}

package/dist/content/list/list-item.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.css.cjs","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array — they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, var(--_peek-x, 0)) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  :host([data-two-line]) .row {\n    min-height: var(--_min-height-two-line, var(--size-18));\n  }\n\n  :host([actionable]) .row {\n    cursor: pointer;\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .leading[hidden],\n  .trailing[hidden] {\n    display: none;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel — the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size — pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid — `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD) — set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n\n  /* ========================================\n       Hover peek — the swipe affordance\n       ======================================== */\n\n  /* A hovered row peeks a few pixels of its first action panel so the swipe affordance is\n     discoverable without a gesture. `--_peek-x` is only consumed while `--_swipe-x` is unset\n     (not revealed, not dragging, no slotted action focused), so the peek can never fight the\n     real states — it is the fallback, not a competitor. Fine pointers only: touch discovers\n     the gesture natively, and `hover` media guards hybrid devices. */\n  @media (hover: hover) and (pointer: fine) {\n    :host([data-peek='left']:hover:not([revealed])) {\n      --_peek-x: var(--list-item-peek, 0.08);\n    }\n\n    :host([data-peek='right']:hover:not([revealed])) {\n      --_peek-x: calc(var(--list-item-peek, 0.08) * -1);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"list-item.css.cjs","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array: they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, var(--_peek-x, 0)) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  :host([data-two-line]) .row {\n    min-height: var(--_min-height-two-line, var(--size-18));\n  }\n\n  :host([actionable]) .row {\n    cursor: pointer;\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .leading[hidden],\n  .trailing[hidden] {\n    display: none;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel: the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size: pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid: `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD): set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n\n  /* ========================================\n       Hover peek: the swipe affordance\n       ======================================== */\n\n  /* A hovered row peeks a few pixels of its first action panel so the swipe affordance is\n     discoverable without a gesture. `--_peek-x` is only consumed while `--_swipe-x` is unset\n     (not revealed, not dragging, no slotted action focused), so the peek can never fight the\n     real states: it is the fallback, not a competitor. Fine pointers only: touch discovers\n     the gesture natively, and `hover` media guards hybrid devices. */\n  @media (hover: hover) and (pointer: fine) {\n    :host([data-peek='left']:hover:not([revealed])) {\n      --_peek-x: var(--list-item-peek, 0.08);\n    }\n\n    :host([data-peek='right']:hover:not([revealed])) {\n      --_peek-x: calc(var(--list-item-peek, 0.08) * -1);\n    }\n  }\n}\n"],"mappings":""}

package/dist/content/list/list-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.css.js","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array — they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, var(--_peek-x, 0)) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  :host([data-two-line]) .row {\n    min-height: var(--_min-height-two-line, var(--size-18));\n  }\n\n  :host([actionable]) .row {\n    cursor: pointer;\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .leading[hidden],\n  .trailing[hidden] {\n    display: none;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel — the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size — pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid — `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD) — set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n\n  /* ========================================\n       Hover peek — the swipe affordance\n       ======================================== */\n\n  /* A hovered row peeks a few pixels of its first action panel so the swipe affordance is\n     discoverable without a gesture. `--_peek-x` is only consumed while `--_swipe-x` is unset\n     (not revealed, not dragging, no slotted action focused), so the peek can never fight the\n     real states — it is the fallback, not a competitor. Fine pointers only: touch discovers\n     the gesture natively, and `hover` media guards hybrid devices. */\n  @media (hover: hover) and (pointer: fine) {\n    :host([data-peek='left']:hover:not([revealed])) {\n      --_peek-x: var(--list-item-peek, 0.08);\n    }\n\n    :host([data-peek='right']:hover:not([revealed])) {\n      --_peek-x: calc(var(--list-item-peek, 0.08) * -1);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"list-item.css.js","names":[],"sources":["../../../src/content/list/list-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* `--_gap` / `--_padding` / `--_font-size` are intentionally not emitted by any mixin in this\n     component's own `styles` array: they're inherited from the parent `ore-list`'s\n     `sizeVariantMixin(LIST_SIZE_PRESET)` call the same way `ore-menu-item` inherits\n     `--_gap`/`--_font-size` from `ore-menu` (see `LIST_SIZE_PRESET`'s doc comment). The\n     `var(..., fallback)` defaults below cover standalone use outside an `ore-list`. */\n  :host {\n    --_actions-width: var(--list-item-actions-width, var(--size-24));\n    position: relative;\n    display: block;\n    overflow: hidden;\n    color: var(--color-contrast-700);\n  }\n\n  /* ========================================\n       Row\n       ======================================== */\n\n  .row {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-4));\n    align-items: center;\n    width: 100%;\n    min-height: var(--_min-height, var(--size-4));\n    padding: var(--_padding, var(--size-2-5) var(--size-4));\n    padding-inline-end: var(--_padding-inline-end, var(--size-6));\n    font-size: var(--_font-size, var(--text-sm));\n    text-align: start;\n    touch-action: pan-y;\n    cursor: default;\n    outline: none;\n    background: var(--list-item-bg, var(--color-canvas));\n    border: none;\n    transform: translateX(calc(var(--_swipe-x, var(--_peek-x, 0)) * var(--_actions-width)));\n    transition: var(--_motion-transition, transform var(--transition-fast), background var(--transition-fast));\n  }\n\n  :host([data-two-line]) .row {\n    min-height: var(--_min-height-two-line, var(--size-18));\n  }\n\n  :host([actionable]) .row {\n    cursor: pointer;\n  }\n\n  .leading,\n  .trailing {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .leading[hidden],\n  .trailing[hidden] {\n    display: none;\n  }\n\n  .content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .description {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    white-space: nowrap;\n  }\n\n  .description:empty {\n    display: none;\n  }\n\n  .row:hover {\n    background: var(--list-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .row:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: -2px;\n  }\n\n  /* ========================================\n       Selected / Disabled States\n       ======================================== */\n\n  :host([selected]) .row {\n    color: var(--color-primary);\n    background: var(--list-item-selected-bg, color-mix(in oklch, var(--color-primary) 10%, transparent));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n       Swipe Action Panels\n       ======================================== */\n\n  .actions {\n    position: absolute;\n    inset-block: 0;\n    display: flex;\n    align-items: stretch;\n    width: var(--_actions-width);\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  /* A single slotted action button fills the whole revealed panel: the common case (one big\n     tappable target, e.g. a full-height \"Delete\" button) rather than a small icon-sized hit area.\n     This stretches the slotted element's own light-DOM box, which is enough for plain elements\n     (a native <button>, an <a>, ...). It is NOT enough on its own for `ore-button`: its visible\n     surface is an inner `[part=\"button\"]` with a fixed height from its size preset, independent\n     of its own host box size: pass `fullheight` on the `ore-button` itself too (see its own\n     `fullheight` prop) to actually fill this panel edge-to-edge. */\n  .actions ::slotted(*) {\n    flex: 1;\n    height: 100%;\n  }\n\n  .actions-left {\n    left: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) - 1) * 100%));\n  }\n\n  .actions-right {\n    right: 0;\n    transform: translateX(calc((var(--_swipe-x, var(--_peek-x, 0)) + 1) * 100%));\n  }\n\n  /* `:host(:has(...))` (`:has()` as `:host()`'s functional argument) is invalid: `:host()`\n     only accepts a compound selector and doesn't accept `:has()` inside it. The plain `:host`\n     pseudo-class chained directly with `:has()` (no parentheses) is the valid form. Kept as\n     separate rules (not grouped via a comma with the `[revealed]` rules) so a selector list\n     doesn't silently drop the whole rule if either half were ever invalid again. */\n  :host([revealed='left']) {\n    --_swipe-x: 1;\n  }\n\n  :host([revealed='right']) {\n    --_swipe-x: -1;\n  }\n\n  :host:has(.actions-left:focus-within) {\n    --_swipe-x: 1;\n  }\n\n  :host:has(.actions-right:focus-within) {\n    --_swipe-x: -1;\n  }\n\n  /* Suppress the transition while a drag is actively updating `--_swipe-x` inline so the row\n     and action panels track the pointer 1:1 instead of lagging behind on every move event. */\n  :host([data-dragging]) .row,\n  :host([data-dragging]) .actions-left,\n  :host([data-dragging]) .actions-right {\n    transition: none;\n  }\n\n  /* Feedback that the drag has passed into \"swipe all the way through\" territory (close to\n     CONFIRM_THRESHOLD): set by list-item.ts's onMove once past ~85% of that distance, cleared\n     on release/cancel/commit. Visual-only; the confirm itself fires from JS regardless of CSS. */\n  :host([data-confirming]) .actions-left,\n  :host([data-confirming]) .actions-right {\n    filter: saturate(1.4) brightness(0.94);\n  }\n\n  /* ========================================\n       Hover peek: the swipe affordance\n       ======================================== */\n\n  /* A hovered row peeks a few pixels of its first action panel so the swipe affordance is\n     discoverable without a gesture. `--_peek-x` is only consumed while `--_swipe-x` is unset\n     (not revealed, not dragging, no slotted action focused), so the peek can never fight the\n     real states: it is the fallback, not a competitor. Fine pointers only: touch discovers\n     the gesture natively, and `hover` media guards hybrid devices. */\n  @media (hover: hover) and (pointer: fine) {\n    :host([data-peek='left']:hover:not([revealed])) {\n      --_peek-x: var(--list-item-peek, 0.08);\n    }\n\n    :host([data-peek='right']:hover:not([revealed])) {\n      --_peek-x: calc(var(--list-item-peek, 0.08) * -1);\n    }\n  }\n}\n"],"mappings":""}

package/dist/content/list/list-item.d.ts

@@ -12,7 +12,7 @@ export type OreListItemEvents = {
         item: HTMLElement;
     };
     /**
-     * Emitted when a swipe crosses the full-swipe-through distance — the "swiped all the way"
+     * Emitted when a swipe crosses the full-swipe-through distance: the "swiped all the way"
      * confirm gesture. Fired just before the slotted action's own click (if any).
      */
     confirm: {
@@ -39,13 +39,13 @@ export type OreListItemEvents = {
 export type OreListItemProps = {
     /** Enable pointer and Enter/Space activation with button semantics. */
     actionable?: boolean;
-    /** Disable this item — blocks pointer interaction, swipe actions, and selection */
+    /** Disable this item: blocks pointer interaction, swipe actions, and selection */
     disabled?: boolean;
     /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */
     revealed?: ListItemRevealSide;
     /**
      * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive
-     * `selected` — required for selection to work. There's no separate `selected` prop: the parent
+     * `selected`: required for selection to work. There's no separate `selected` prop: the parent
      * list's `value` is the single source of truth, so this item's selected state can't drift from
      * it. Also reported in `select`/`deselect`/the parent's `change` event.
      */
@@ -54,19 +54,19 @@ export type OreListItemProps = {
 /**
  * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`
  * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal
- * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An
+ * pointer/touch swipe reveals: useful for mobile-style row actions (archive, delete, …). An
  * action panel only opens if it actually has slotted content; swiping the other direction is a
  * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button
  * reveals its panel via `:focus-within`, independent of any gesture).
  *
- * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —
- * past the full-swipe-through distance — auto-confirms that side's action immediately (fires
+ * Swiping past the reveal distance snaps the panel fully open on release; swiping further still :
+ * past the full-swipe-through distance: auto-confirms that side's action immediately (fires
  * `confirm` and clicks the slot's first element), the same "swipe all the way" shortcut as iOS
  * Mail's delete gesture.
  *
  * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside
  * the item, or open a different item's panel. Reverse-swiping an already-open item is not
- * supported — see `ore-list`'s docs for the reasoning.
+ * supported: see `ore-list`'s docs for the reasoning.
  *
  * On hover-capable fine pointers, a hovered row peeks a few pixels of its first action panel
  * (`--list-item-peek`, a fraction of the panel width) so the swipe affordance is discoverable
@@ -85,7 +85,7 @@ export type OreListItemProps = {
  * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }
  * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }
  * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }
- * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }
+ * @fires confirm  - Swiped all the way through: fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }
  *
  * @slot leading - Content before the title (e.g. icon, avatar)
  * @slot - Item title

package/dist/content/list/list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../src/content/list/list-item.ts"],"names":[],"mappings":"AAqBA,sEAAsE;AACtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,qFAAqF;IACrF,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACzD,gDAAgD;IAChD,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,0DAA0D;IAC1D,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACxD,iGAAiG;IACjG,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CACrD,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../src/content/list/list-item.ts"],"names":[],"mappings":"AAqBA,sEAAsE;AACtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,qFAAqF;IACrF,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACzD,gDAAgD;IAChD,QAAQ,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,0DAA0D;IAC1D,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACxD,iGAAiG;IACjG,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CACrD,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}