@vielzeug/refine 2.1.0 → 2.1.2

package/dist/list-item.js.map

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

package/dist/list.cjs

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

package/dist/list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.cjs","names":[],"sources":["../src/content/list/list.ts"],"sourcesContent":["import { createContext, define, html, prop, bind, getHost, onCleanup, provide, useEmit } from '@vielzeug/ore';\nimport { computed, signal, type Readable } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize } from '../../types';\n\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, LIST_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { sizeVariantMixin } from '../../styles';\nimport componentStyles from './list.css?inline';\n\n/** Visual variant for `ore-list`. */\nexport type ListVariant = 'bordered' | 'plain' | 'separated';\n\n/** Context provided by `ore-list` to its `ore-list-item` children. */\nexport type ListContext = {\n  /**\n   * Closes every other item's swipe-revealed action panel. Called directly by an item the moment\n   * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —\n   * replaces listening for a bubbled `reveal` event and re-deriving \"is this actually my direct\n   * child\" with a plain function call, the same shape as `select` below.\n   */\n  requestReveal: (item: HTMLElement) => void;\n  /**\n   * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called\n   * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.\n   * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so\n   * changing it here is the only thing that has to happen.\n   */\n  select: (value: string | undefined) => void;\n  selectable: Readable<boolean>;\n  /**\n   * Single source of truth for the current selection — `ore-list-item` never owns its own\n   * \"selected\" state; it's always derived by comparing its own `value` against this one (the\n   * same shape as `ore-radio-group`'s `RadioGroupContext.value`).\n   */\n  value: Readable<string | undefined>;\n};\n/** Injection key for the list context. */\nexport const LIST_CTX = createContext<ListContext>('ListContext');\n\n/** Events emitted by the list component */\nexport type OreListEvents = {\n  /** Emitted when the selected value changes (only when `selectable` is set). */\n  change: { value: null | string };\n};\n\n/** List component properties */\nexport type OreListProps = {\n  /** Disable the entire list — blocks pointer interaction and removes items from tab order */\n  disabled?: boolean;\n  /**\n   * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item\n   * selects it and deselects any previously-selected sibling. Arrow keys / Home / End move\n   * focus between items. Omit for a plain, non-interactive display list.\n   */\n  selectable?: boolean;\n  /** Size applied to all items (propagated via inherited CSS custom properties) */\n  size?: ComponentSize;\n  /**\n   * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for\n   * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for\n   * two-way control, or read it back from `change`.\n   */\n  value?: string;\n  /** Visual variant: 'plain' (default, no dividers) | 'bordered' (outer border + row dividers) | 'separated' (each item is its own card) */\n  variant?: ListVariant;\n};\n\n/**\n * A vertical list container for `ore-list-item` children — plain display list by default, or a\n * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal\n * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/\n * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).\n *\n * @element ore-list\n * @element ore-list-item - Child element for each row\n *\n * @attr {boolean} disabled - Disable the entire list\n * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation\n * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'\n * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection\n * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'\n *\n * @fires change - Emitted when the selected value changes. detail: { value: string | null }\n *\n * @slot - `ore-list-item` elements\n *\n * @cssprop --list-radius - Border radius for the 'bordered'/'separated' variants\n *\n * @example\n * ```html\n * <ore-list variant=\"bordered\">\n *   <ore-list-item>Inbox</ore-list-item>\n *   <ore-list-item>Drafts</ore-list-item>\n * </ore-list>\n * <ore-list selectable value=\"inbox\">\n *   <ore-list-item value=\"inbox\">Inbox</ore-list-item>\n *   <ore-list-item value=\"drafts\">Drafts</ore-list-item>\n * </ore-list>\n * ```\n */\nexport const LIST_TAG = 'ore-list' as const;\ndefine<OreListProps>(LIST_TAG, {\n  props: {\n    ...disablableBundle,\n    ...sizableBundle,\n    selectable: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<ListVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListEvents>();\n\n    const getItems = (): HTMLElement[] => [\n      ...el.querySelectorAll<HTMLElement>(':scope > ore-list-item:not([disabled])'),\n    ];\n\n    const getAllItems = (): HTMLElement[] => [...el.querySelectorAll<HTMLElement>(':scope > ore-list-item')];\n\n    // Reaches into each item's shadow root for its focusable row — mirrors `ore-accordion`'s\n    // `getSummaryElements()` — rather than relying on `item.focus()` + `shadow: { delegatesFocus:\n    // true }` to land focus correctly, since that cross-boundary reporting is inconsistent enough\n    // between real browsers and jsdom that other multi-item components in this package\n    // (`ore-menu`, `ore-tabs`) defensively check both forms too. Queried via `[part=\"row\"]`, not\n    // the `.row` class — `part` is list-item's declared public seam for exactly this kind of\n    // cross-component reach; the class name is a private styling detail that could change.\n    const getRow = (item: Element): HTMLElement | null =>\n      item.shadowRoot?.querySelector<HTMLElement>('[part=\"row\"]') ?? null;\n\n    const getRows = (): HTMLElement[] =>\n      getItems()\n        .map(getRow)\n        .filter((row): row is HTMLElement => row != null);\n\n    const listControl = createListControl<HTMLElement>({\n      getItems,\n      loop: true,\n      onNavigate: (_action, index) => {\n        getRow(getItems()[index])?.focus();\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // Selection — `selectedValue` is the single source of truth (mirrors `ore-radio-group`'s\n    // `selectedValue`/`RadioGroupContext.value` pattern): reflected onto the `value` attribute,\n    // synced back in when set externally, and read by every item via context to derive its own\n    // `selected` state. No sibling-clearing needed anywhere — changing this one signal is enough.\n    const selectedValue = signal<string | undefined>(props.value.value);\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n    });\n\n    const select = (value: string | undefined): void => {\n      if (selectedValue.value === value) return;\n\n      selectedValue.value = value;\n      emit('change', { value: value ?? null });\n    };\n\n    // Only one item's swipe-revealed action panel is open at a time. The item calls this\n    // directly the moment its own `revealed` attribute transitions to non-null — see\n    // `ListContext.requestReveal`'s doc comment for why this replaced a bubbled event.\n    const requestReveal = (item: HTMLElement): void => {\n      for (const sibling of getAllItems()) {\n        if (sibling !== item) sibling.removeAttribute('revealed');\n      }\n    };\n\n    // Closes any swipe-revealed item when the user interacts anywhere outside of it — matches\n    // the outside-pointerdown-closes pattern used by ore-date-picker/ore-time-picker's popovers.\n    const handleOutsidePointerDown = (event: PointerEvent): void => {\n      const open = getAllItems().find((item) => item.hasAttribute('revealed'));\n\n      if (!open || event.composedPath().includes(open)) return;\n\n      open.removeAttribute('revealed');\n    };\n\n    document.addEventListener('pointerdown', handleOutsidePointerDown, { capture: true });\n    onCleanup(() => document.removeEventListener('pointerdown', handleOutsidePointerDown, { capture: true }));\n\n    provide(LIST_CTX, {\n      requestReveal,\n      select,\n      selectable: computed(() => Boolean(props.selectable.value)),\n      value: selectedValue,\n    });\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        role: () => (props.selectable.value ? 'listbox' : 'list'),\n        value: () => selectedValue.value ?? null,\n      },\n      on: {\n        keydown: (event: KeyboardEvent) => {\n          if (!props.selectable.value || props.disabled.value) return;\n\n          const row = event\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.getAttribute('part') === 'row');\n\n          if (!row) return;\n\n          const focused = getRows().indexOf(row);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(event);\n        },\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [sizeVariantMixin(LIST_SIZE_PRESET), componentStyles],\n});\n"],"mappings":"oYAuCA,IAAa,GAAA,EAAW,EAAA,cAAA,CAA2B,aAAa,EA+DnD,EAAW,YACxB,EAAA,EAAA,OAAA,CAAqB,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,iBACH,GAAG,EAAA,cACH,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,MAAO,EAAA,KAAK,OAAO,EACnB,QAAS,EAAA,KAAK,OAAoB,CACpC,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAuB,EAE9B,MAAgC,CACpC,GAAG,EAAG,iBAA8B,wCAAwC,CAC9E,EAEM,MAAmC,CAAC,GAAG,EAAG,iBAA8B,wBAAwB,CAAC,EASjG,EAAU,GACd,EAAK,YAAY,cAA2B,cAAc,GAAK,KAE3D,MACJ,EAAS,CAAC,CACP,IAAI,CAAM,CAAC,CACX,OAAQ,GAA4B,GAAO,IAAI,EAE9C,EAAc,EAAA,kBAA+B,CACjD,WACA,KAAM,GACN,YAAa,EAAS,IAAU,CAC9B,EAAO,EAAS,CAAC,CAAC,EAAM,CAAC,EAAE,MAAM,CACnC,EACA,OAAQ,EAAA,gBAAgB,EAAA,SAAS,CACnC,CAAC,EAMK,GAAA,EAAgB,EAAA,OAAA,CAA2B,EAAM,MAAM,KAAK,GAElE,EAAA,EAAA,MAAA,CAAM,EAAM,MAAQ,GAAU,CAC5B,EAAc,MAAQ,CACxB,CAAC,EAED,IAAM,EAAU,GAAoC,CAC9C,EAAc,QAAU,IAE5B,EAAc,MAAQ,EACtB,EAAK,SAAU,CAAE,MAAO,GAAS,IAAK,CAAC,EACzC,EAKM,EAAiB,GAA4B,CACjD,IAAK,IAAM,KAAW,EAAY,EAC5B,IAAY,GAAM,EAAQ,gBAAgB,UAAU,CAE5D,EAIM,EAA4B,GAA8B,CAC9D,IAAM,EAAO,EAAY,CAAC,CAAC,KAAM,GAAS,EAAK,aAAa,UAAU,CAAC,EAEnE,CAAC,GAAQ,EAAM,aAAa,CAAC,CAAC,SAAS,CAAI,GAE/C,EAAK,gBAAgB,UAAU,CACjC,EAsCA,OApCA,SAAS,iBAAiB,cAAe,EAA0B,CAAE,QAAS,EAAK,CAAC,GACpF,EAAA,EAAA,UAAA,KAAgB,SAAS,oBAAoB,cAAe,EAA0B,CAAE,QAAS,EAAK,CAAC,CAAC,GAExG,EAAA,EAAA,QAAA,CAAQ,EAAU,CAChB,gBACA,SACA,YAAA,EAAY,EAAA,SAAA,KAAe,EAAQ,EAAM,WAAW,KAAM,EAC1D,MAAO,CACT,CAAC,GAED,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,oBAAwB,EAAM,SAAS,MAAQ,OAAS,KACxD,SAAa,EAAM,WAAW,MAAQ,UAAY,OAClD,UAAa,EAAc,OAAS,IACtC,EACA,GAAI,CACF,QAAU,GAAyB,CACjC,GAAI,CAAC,EAAM,WAAW,OAAS,EAAM,SAAS,MAAO,OAErD,IAAM,EAAM,EACT,aAAa,CAAC,CACd,KAAM,GAA8B,aAAgB,aAAe,EAAK,aAAa,MAAM,IAAM,KAAK,EAEzG,GAAI,CAAC,EAAK,OAEV,IAAM,EAAU,EAAQ,CAAC,CAAC,QAAQ,CAAG,EAEjC,IAAY,KAEhB,EAAY,IAAI,CAAO,EACvB,EAAY,cAAc,CAAK,EACjC,CACF,CACF,CAAC,EAEM,EAAA,IAAI;;KAGb,EAEA,OAAQ,CAAC,EAAA,iBAAiB,EAAA,gBAAgB,EAAG,EAAA,OAAe,CAC9D,CAAC"}
+{"version":3,"file":"list.cjs","names":[],"sources":["../src/content/list/list.ts"],"sourcesContent":["import { bind, createContext, define, getHost, html, onCleanup, prop, provide, useEmit } from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, LIST_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './list.css?inline';\n\n/** Visual variant for `ore-list`. */\nexport type ListVariant = 'bordered' | 'plain' | 'separated';\n\n/** Context provided by `ore-list` to its `ore-list-item` children. */\nexport type ListContext = {\n  /**\n   * Closes every other item's swipe-revealed action panel. Called directly by an item the moment\n   * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —\n   * replaces listening for a bubbled `reveal` event and re-deriving \"is this actually my direct\n   * child\" with a plain function call, the same shape as `select` below.\n   */\n  requestReveal: (item: HTMLElement) => void;\n  /**\n   * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called\n   * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.\n   * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so\n   * changing it here is the only thing that has to happen.\n   */\n  select: (value: string | undefined) => void;\n  selectable: Readable<boolean>;\n  /**\n   * Single source of truth for the current selection — `ore-list-item` never owns its own\n   * \"selected\" state; it's always derived by comparing its own `value` against this one (the\n   * same shape as `ore-radio-group`'s `RadioGroupContext.value`).\n   */\n  value: Readable<string | undefined>;\n};\n/** Injection key for the list context. */\nexport const LIST_CTX = createContext<ListContext>('ListContext');\n\n/** Events emitted by the list component */\nexport type OreListEvents = {\n  /** Emitted when the selected value changes (only when `selectable` is set). */\n  change: { value: null | string };\n};\n\n/** List component properties */\nexport type OreListProps = {\n  /** Disable the entire list — blocks pointer interaction and removes items from tab order */\n  disabled?: boolean;\n  /**\n   * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item\n   * selects it and deselects any previously-selected sibling. Arrow keys / Home / End move\n   * focus between items. Omit for a plain, non-interactive display list.\n   */\n  selectable?: boolean;\n  /** Size applied to all items (propagated via inherited CSS custom properties) */\n  size?: ComponentSize;\n  /**\n   * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for\n   * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for\n   * two-way control, or read it back from `change`.\n   */\n  value?: string;\n  /** Visual variant: 'plain' (default, no dividers) | 'bordered' (outer border + row dividers) | 'separated' (each item is its own card) */\n  variant?: ListVariant;\n};\n\n/**\n * A vertical list container for `ore-list-item` children — plain display list by default, or a\n * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal\n * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/\n * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).\n *\n * @element ore-list\n * @element ore-list-item - Child element for each row\n *\n * @attr {boolean} disabled - Disable the entire list\n * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation\n * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'\n * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection\n * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'\n *\n * @fires change - Emitted when the selected value changes. detail: { value: string | null }\n *\n * @slot - `ore-list-item` elements\n *\n * @cssprop --list-radius - Border radius for the 'bordered'/'separated' variants\n *\n * @example\n * ```html\n * <ore-list variant=\"bordered\">\n *   <ore-list-item>Inbox</ore-list-item>\n *   <ore-list-item>Drafts</ore-list-item>\n * </ore-list>\n * <ore-list selectable value=\"inbox\">\n *   <ore-list-item value=\"inbox\">Inbox</ore-list-item>\n *   <ore-list-item value=\"drafts\">Drafts</ore-list-item>\n * </ore-list>\n * ```\n */\nexport const LIST_TAG = 'ore-list' as const;\ndefine<OreListProps>(LIST_TAG, {\n  props: {\n    ...disablableBundle,\n    ...sizableBundle,\n    selectable: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<ListVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListEvents>();\n\n    const getItems = (): HTMLElement[] => [\n      ...el.querySelectorAll<HTMLElement>(':scope > ore-list-item:not([disabled])'),\n    ];\n\n    const getAllItems = (): HTMLElement[] => [...el.querySelectorAll<HTMLElement>(':scope > ore-list-item')];\n\n    // Reaches into each item's shadow root for its focusable row — mirrors `ore-accordion`'s\n    // `getSummaryElements()` — rather than relying on `item.focus()` + `shadow: { delegatesFocus:\n    // true }` to land focus correctly, since that cross-boundary reporting is inconsistent enough\n    // between real browsers and jsdom that other multi-item components in this package\n    // (`ore-menu`, `ore-tabs`) defensively check both forms too. Queried via `[part=\"row\"]`, not\n    // the `.row` class — `part` is list-item's declared public seam for exactly this kind of\n    // cross-component reach; the class name is a private styling detail that could change.\n    const getRow = (item: Element): HTMLElement | null =>\n      item.shadowRoot?.querySelector<HTMLElement>('[part=\"row\"]') ?? null;\n\n    const getRows = (): HTMLElement[] =>\n      getItems()\n        .map(getRow)\n        .filter((row): row is HTMLElement => row != null);\n\n    const listControl = createListControl<HTMLElement>({\n      getItems,\n      loop: true,\n      onNavigate: (_action, index) => {\n        getRow(getItems()[index])?.focus();\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // Selection — `selectedValue` is the single source of truth (mirrors `ore-radio-group`'s\n    // `selectedValue`/`RadioGroupContext.value` pattern): reflected onto the `value` attribute,\n    // synced back in when set externally, and read by every item via context to derive its own\n    // `selected` state. No sibling-clearing needed anywhere — changing this one signal is enough.\n    const selectedValue = signal<string | undefined>(props.value.value);\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n    });\n\n    const select = (value: string | undefined): void => {\n      if (selectedValue.value === value) return;\n\n      selectedValue.value = value;\n      emit('change', { value: value ?? null });\n    };\n\n    // Only one item's swipe-revealed action panel is open at a time. The item calls this\n    // directly the moment its own `revealed` attribute transitions to non-null — see\n    // `ListContext.requestReveal`'s doc comment for why this replaced a bubbled event.\n    const requestReveal = (item: HTMLElement): void => {\n      for (const sibling of getAllItems()) {\n        if (sibling !== item) sibling.removeAttribute('revealed');\n      }\n    };\n\n    // Closes any swipe-revealed item when the user interacts anywhere outside of it — matches\n    // the outside-pointerdown-closes pattern used by ore-date-picker/ore-time-picker's popovers.\n    const handleOutsidePointerDown = (event: PointerEvent): void => {\n      const open = getAllItems().find((item) => item.hasAttribute('revealed'));\n\n      if (!open || event.composedPath().includes(open)) return;\n\n      open.removeAttribute('revealed');\n    };\n\n    document.addEventListener('pointerdown', handleOutsidePointerDown, { capture: true });\n    onCleanup(() => document.removeEventListener('pointerdown', handleOutsidePointerDown, { capture: true }));\n\n    provide(LIST_CTX, {\n      requestReveal,\n      select,\n      selectable: computed(() => Boolean(props.selectable.value)),\n      value: selectedValue,\n    });\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        role: () => (props.selectable.value ? 'listbox' : 'list'),\n        value: () => selectedValue.value ?? null,\n      },\n      on: {\n        keydown: (event: KeyboardEvent) => {\n          if (!props.selectable.value || props.disabled.value) return;\n\n          const row = event\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.getAttribute('part') === 'row');\n\n          if (!row) return;\n\n          const focused = getRows().indexOf(row);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(event);\n        },\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [sizeVariantMixin(LIST_SIZE_PRESET), componentStyles],\n});\n"],"mappings":"gWAoCA,IAAa,GAAA,EAAW,EAAA,cAAA,CAA2B,aAAa,EA+DnD,EAAW,YACxB,EAAA,EAAA,OAAA,CAAqB,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,iBACH,GAAG,EAAA,cACH,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,MAAO,EAAA,KAAK,OAAO,EACnB,QAAS,EAAA,KAAK,OAAoB,CACpC,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAuB,EAE9B,MAAgC,CACpC,GAAG,EAAG,iBAA8B,wCAAwC,CAC9E,EAEM,MAAmC,CAAC,GAAG,EAAG,iBAA8B,wBAAwB,CAAC,EASjG,EAAU,GACd,EAAK,YAAY,cAA2B,cAAc,GAAK,KAE3D,MACJ,EAAS,CAAC,CACP,IAAI,CAAM,CAAC,CACX,OAAQ,GAA4B,GAAO,IAAI,EAE9C,EAAc,EAAA,kBAA+B,CACjD,WACA,KAAM,GACN,YAAa,EAAS,IAAU,CAC9B,EAAO,EAAS,CAAC,CAAC,EAAM,CAAC,EAAE,MAAM,CACnC,EACA,OAAQ,EAAA,gBAAgB,EAAA,SAAS,CACnC,CAAC,EAMK,GAAA,EAAgB,EAAA,OAAA,CAA2B,EAAM,MAAM,KAAK,GAElE,EAAA,EAAA,MAAA,CAAM,EAAM,MAAQ,GAAU,CAC5B,EAAc,MAAQ,CACxB,CAAC,EAED,IAAM,EAAU,GAAoC,CAC9C,EAAc,QAAU,IAE5B,EAAc,MAAQ,EACtB,EAAK,SAAU,CAAE,MAAO,GAAS,IAAK,CAAC,EACzC,EAKM,EAAiB,GAA4B,CACjD,IAAK,IAAM,KAAW,EAAY,EAC5B,IAAY,GAAM,EAAQ,gBAAgB,UAAU,CAE5D,EAIM,EAA4B,GAA8B,CAC9D,IAAM,EAAO,EAAY,CAAC,CAAC,KAAM,GAAS,EAAK,aAAa,UAAU,CAAC,EAEnE,CAAC,GAAQ,EAAM,aAAa,CAAC,CAAC,SAAS,CAAI,GAE/C,EAAK,gBAAgB,UAAU,CACjC,EAsCA,OApCA,SAAS,iBAAiB,cAAe,EAA0B,CAAE,QAAS,EAAK,CAAC,GACpF,EAAA,EAAA,UAAA,KAAgB,SAAS,oBAAoB,cAAe,EAA0B,CAAE,QAAS,EAAK,CAAC,CAAC,GAExG,EAAA,EAAA,QAAA,CAAQ,EAAU,CAChB,gBACA,SACA,YAAA,EAAY,EAAA,SAAA,KAAe,EAAQ,EAAM,WAAW,KAAM,EAC1D,MAAO,CACT,CAAC,GAED,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,oBAAwB,EAAM,SAAS,MAAQ,OAAS,KACxD,SAAa,EAAM,WAAW,MAAQ,UAAY,OAClD,UAAa,EAAc,OAAS,IACtC,EACA,GAAI,CACF,QAAU,GAAyB,CACjC,GAAI,CAAC,EAAM,WAAW,OAAS,EAAM,SAAS,MAAO,OAErD,IAAM,EAAM,EACT,aAAa,CAAC,CACd,KAAM,GAA8B,aAAgB,aAAe,EAAK,aAAa,MAAM,IAAM,KAAK,EAEzG,GAAI,CAAC,EAAK,OAEV,IAAM,EAAU,EAAQ,CAAC,CAAC,QAAQ,CAAG,EAEjC,IAAY,KAEhB,EAAY,IAAI,CAAO,EACvB,EAAY,cAAc,CAAK,EACjC,CACF,CACF,CAAC,EAEM,EAAA,IAAI;;KAGb,EAEA,OAAQ,CAAC,EAAA,iBAAiB,EAAA,gBAAgB,EAAG,EAAA,OAAe,CAC9D,CAAC"}

package/dist/list.js

@@ -1,12 +1,11 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { lifecycleSignal as t } from "./core/ore.js";
 import { createListControl as n } from "./core/nav.js";
 import { disablableBundle as r, sizableBundle as i } from "./shared/prop-bundles.js";
 import { LIST_SIZE_PRESET as a } from "./shared/size-presets.js";
 import o from "./content/list/list.css.js";
 import { bind as s, createContext as c, define as l, getHost as u, html as d, onCleanup as f, prop as p, provide as m, useEmit as h } from "@vielzeug/ore";
-import { computed as g, signal as _ } from "@vielzeug/ripple";
-import { watch as v } from "@vielzeug/ripple/watch";
+import { computed as g, signal as _, watch as v } from "@vielzeug/ripple";
 //#region src/content/list/list.ts
 var y = c("ListContext"), b = "ore-list";
 l(b, {
@@ -17,16 +16,16 @@ l(b, {
 		value: p.string(),
 		variant: p.string()
 	},
-	setup(t) {
+	setup(e) {
 		let r = u(), i = h(), a = () => [...r.querySelectorAll(":scope > ore-list-item:not([disabled])")], o = () => [...r.querySelectorAll(":scope > ore-list-item")], c = (e) => e.shadowRoot?.querySelector("[part=\"row\"]") ?? null, l = () => a().map(c).filter((e) => e != null), p = n({
 			getItems: a,
 			loop: !0,
 			onNavigate: (e, t) => {
 				c(a()[t])?.focus();
 			},
-			signal: e(f)
-		}), b = _(t.value.value);
-		v(t.value, (e) => {
+			signal: t(f)
+		}), b = _(e.value.value);
+		v(e.value, (e) => {
 			b.value = e;
 		});
 		let x = (e) => {
@@ -40,26 +39,26 @@ l(b, {
 		return document.addEventListener("pointerdown", C, { capture: !0 }), f(() => document.removeEventListener("pointerdown", C, { capture: !0 })), m(y, {
 			requestReveal: S,
 			select: x,
-			selectable: g(() => !!t.selectable.value),
+			selectable: g(() => !!e.selectable.value),
 			value: b
 		}), s({
 			attr: {
-				"aria-disabled": () => t.disabled.value ? "true" : null,
-				role: () => t.selectable.value ? "listbox" : "list",
+				"aria-disabled": () => e.disabled.value ? "true" : null,
+				role: () => e.selectable.value ? "listbox" : "list",
 				value: () => b.value ?? null
 			},
-			on: { keydown: (e) => {
-				if (!t.selectable.value || t.disabled.value) return;
-				let n = e.composedPath().find((e) => e instanceof HTMLElement && e.getAttribute("part") === "row");
+			on: { keydown: (t) => {
+				if (!e.selectable.value || e.disabled.value) return;
+				let n = t.composedPath().find((e) => e instanceof HTMLElement && e.getAttribute("part") === "row");
 				if (!n) return;
 				let r = l().indexOf(n);
-				r !== -1 && (p.set(r), p.handleKeydown(e));
+				r !== -1 && (p.set(r), p.handleKeydown(t));
 			} }
 		}), d`
       <slot></slot>
     `;
 	},
-	styles: [t(a), o]
+	styles: [e(a), o]
 });
 //#endregion
 export { y as LIST_CTX, b as LIST_TAG };

package/dist/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":[],"sources":["../src/content/list/list.ts"],"sourcesContent":["import { createContext, define, html, prop, bind, getHost, onCleanup, provide, useEmit } from '@vielzeug/ore';\nimport { computed, signal, type Readable } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize } from '../../types';\n\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, LIST_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { sizeVariantMixin } from '../../styles';\nimport componentStyles from './list.css?inline';\n\n/** Visual variant for `ore-list`. */\nexport type ListVariant = 'bordered' | 'plain' | 'separated';\n\n/** Context provided by `ore-list` to its `ore-list-item` children. */\nexport type ListContext = {\n  /**\n   * Closes every other item's swipe-revealed action panel. Called directly by an item the moment\n   * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —\n   * replaces listening for a bubbled `reveal` event and re-deriving \"is this actually my direct\n   * child\" with a plain function call, the same shape as `select` below.\n   */\n  requestReveal: (item: HTMLElement) => void;\n  /**\n   * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called\n   * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.\n   * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so\n   * changing it here is the only thing that has to happen.\n   */\n  select: (value: string | undefined) => void;\n  selectable: Readable<boolean>;\n  /**\n   * Single source of truth for the current selection — `ore-list-item` never owns its own\n   * \"selected\" state; it's always derived by comparing its own `value` against this one (the\n   * same shape as `ore-radio-group`'s `RadioGroupContext.value`).\n   */\n  value: Readable<string | undefined>;\n};\n/** Injection key for the list context. */\nexport const LIST_CTX = createContext<ListContext>('ListContext');\n\n/** Events emitted by the list component */\nexport type OreListEvents = {\n  /** Emitted when the selected value changes (only when `selectable` is set). */\n  change: { value: null | string };\n};\n\n/** List component properties */\nexport type OreListProps = {\n  /** Disable the entire list — blocks pointer interaction and removes items from tab order */\n  disabled?: boolean;\n  /**\n   * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item\n   * selects it and deselects any previously-selected sibling. Arrow keys / Home / End move\n   * focus between items. Omit for a plain, non-interactive display list.\n   */\n  selectable?: boolean;\n  /** Size applied to all items (propagated via inherited CSS custom properties) */\n  size?: ComponentSize;\n  /**\n   * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for\n   * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for\n   * two-way control, or read it back from `change`.\n   */\n  value?: string;\n  /** Visual variant: 'plain' (default, no dividers) | 'bordered' (outer border + row dividers) | 'separated' (each item is its own card) */\n  variant?: ListVariant;\n};\n\n/**\n * A vertical list container for `ore-list-item` children — plain display list by default, or a\n * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal\n * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/\n * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).\n *\n * @element ore-list\n * @element ore-list-item - Child element for each row\n *\n * @attr {boolean} disabled - Disable the entire list\n * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation\n * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'\n * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection\n * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'\n *\n * @fires change - Emitted when the selected value changes. detail: { value: string | null }\n *\n * @slot - `ore-list-item` elements\n *\n * @cssprop --list-radius - Border radius for the 'bordered'/'separated' variants\n *\n * @example\n * ```html\n * <ore-list variant=\"bordered\">\n *   <ore-list-item>Inbox</ore-list-item>\n *   <ore-list-item>Drafts</ore-list-item>\n * </ore-list>\n * <ore-list selectable value=\"inbox\">\n *   <ore-list-item value=\"inbox\">Inbox</ore-list-item>\n *   <ore-list-item value=\"drafts\">Drafts</ore-list-item>\n * </ore-list>\n * ```\n */\nexport const LIST_TAG = 'ore-list' as const;\ndefine<OreListProps>(LIST_TAG, {\n  props: {\n    ...disablableBundle,\n    ...sizableBundle,\n    selectable: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<ListVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListEvents>();\n\n    const getItems = (): HTMLElement[] => [\n      ...el.querySelectorAll<HTMLElement>(':scope > ore-list-item:not([disabled])'),\n    ];\n\n    const getAllItems = (): HTMLElement[] => [...el.querySelectorAll<HTMLElement>(':scope > ore-list-item')];\n\n    // Reaches into each item's shadow root for its focusable row — mirrors `ore-accordion`'s\n    // `getSummaryElements()` — rather than relying on `item.focus()` + `shadow: { delegatesFocus:\n    // true }` to land focus correctly, since that cross-boundary reporting is inconsistent enough\n    // between real browsers and jsdom that other multi-item components in this package\n    // (`ore-menu`, `ore-tabs`) defensively check both forms too. Queried via `[part=\"row\"]`, not\n    // the `.row` class — `part` is list-item's declared public seam for exactly this kind of\n    // cross-component reach; the class name is a private styling detail that could change.\n    const getRow = (item: Element): HTMLElement | null =>\n      item.shadowRoot?.querySelector<HTMLElement>('[part=\"row\"]') ?? null;\n\n    const getRows = (): HTMLElement[] =>\n      getItems()\n        .map(getRow)\n        .filter((row): row is HTMLElement => row != null);\n\n    const listControl = createListControl<HTMLElement>({\n      getItems,\n      loop: true,\n      onNavigate: (_action, index) => {\n        getRow(getItems()[index])?.focus();\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // Selection — `selectedValue` is the single source of truth (mirrors `ore-radio-group`'s\n    // `selectedValue`/`RadioGroupContext.value` pattern): reflected onto the `value` attribute,\n    // synced back in when set externally, and read by every item via context to derive its own\n    // `selected` state. No sibling-clearing needed anywhere — changing this one signal is enough.\n    const selectedValue = signal<string | undefined>(props.value.value);\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n    });\n\n    const select = (value: string | undefined): void => {\n      if (selectedValue.value === value) return;\n\n      selectedValue.value = value;\n      emit('change', { value: value ?? null });\n    };\n\n    // Only one item's swipe-revealed action panel is open at a time. The item calls this\n    // directly the moment its own `revealed` attribute transitions to non-null — see\n    // `ListContext.requestReveal`'s doc comment for why this replaced a bubbled event.\n    const requestReveal = (item: HTMLElement): void => {\n      for (const sibling of getAllItems()) {\n        if (sibling !== item) sibling.removeAttribute('revealed');\n      }\n    };\n\n    // Closes any swipe-revealed item when the user interacts anywhere outside of it — matches\n    // the outside-pointerdown-closes pattern used by ore-date-picker/ore-time-picker's popovers.\n    const handleOutsidePointerDown = (event: PointerEvent): void => {\n      const open = getAllItems().find((item) => item.hasAttribute('revealed'));\n\n      if (!open || event.composedPath().includes(open)) return;\n\n      open.removeAttribute('revealed');\n    };\n\n    document.addEventListener('pointerdown', handleOutsidePointerDown, { capture: true });\n    onCleanup(() => document.removeEventListener('pointerdown', handleOutsidePointerDown, { capture: true }));\n\n    provide(LIST_CTX, {\n      requestReveal,\n      select,\n      selectable: computed(() => Boolean(props.selectable.value)),\n      value: selectedValue,\n    });\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        role: () => (props.selectable.value ? 'listbox' : 'list'),\n        value: () => selectedValue.value ?? null,\n      },\n      on: {\n        keydown: (event: KeyboardEvent) => {\n          if (!props.selectable.value || props.disabled.value) return;\n\n          const row = event\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.getAttribute('part') === 'row');\n\n          if (!row) return;\n\n          const focused = getRows().indexOf(row);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(event);\n        },\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [sizeVariantMixin(LIST_SIZE_PRESET), componentStyles],\n});\n"],"mappings":";;;;;;;;;;AAuCA,IAAa,IAAW,EAA2B,aAAa,GA+DnD,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,YAAY,EAAK,KAAK,EAAK;EAC3B,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAoB;CACpC;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAE9B,UAAgC,CACpC,GAAG,EAAG,iBAA8B,wCAAwC,CAC9E,GAEM,UAAmC,CAAC,GAAG,EAAG,iBAA8B,wBAAwB,CAAC,GASjG,KAAU,MACd,EAAK,YAAY,cAA2B,gBAAc,KAAK,MAE3D,UACJ,EAAS,CAAC,CACP,IAAI,CAAM,CAAC,CACX,QAAQ,MAA4B,KAAO,IAAI,GAE9C,IAAc,EAA+B;GACjD;GACA,MAAM;GACN,aAAa,GAAS,MAAU;IAC9B,EAAO,EAAS,CAAC,CAAC,EAAM,CAAC,EAAE,MAAM;GACnC;GACA,QAAQ,EAAgB,CAAS;EACnC,CAAC,GAMK,IAAgB,EAA2B,EAAM,MAAM,KAAK;EAElE,EAAM,EAAM,QAAQ,MAAU;GAC5B,EAAc,QAAQ;EACxB,CAAC;EAED,IAAM,KAAU,MAAoC;GAC9C,EAAc,UAAU,MAE5B,EAAc,QAAQ,GACtB,EAAK,UAAU,EAAE,OAAO,KAAS,KAAK,CAAC;EACzC,GAKM,KAAiB,MAA4B;GACjD,KAAK,IAAM,KAAW,EAAY,GAChC,AAAI,MAAY,KAAM,EAAQ,gBAAgB,UAAU;EAE5D,GAIM,KAA4B,MAA8B;GAC9D,IAAM,IAAO,EAAY,CAAC,CAAC,MAAM,MAAS,EAAK,aAAa,UAAU,CAAC;GAEnE,CAAC,KAAQ,EAAM,aAAa,CAAC,CAAC,SAAS,CAAI,KAE/C,EAAK,gBAAgB,UAAU;EACjC;EAsCA,OApCA,SAAS,iBAAiB,eAAe,GAA0B,EAAE,SAAS,GAAK,CAAC,GACpF,QAAgB,SAAS,oBAAoB,eAAe,GAA0B,EAAE,SAAS,GAAK,CAAC,CAAC,GAExG,EAAQ,GAAU;GAChB;GACA;GACA,YAAY,QAAe,EAAQ,EAAM,WAAW,KAAM;GAC1D,OAAO;EACT,CAAC,GAED,EAAK;GACH,MAAM;IACJ,uBAAwB,EAAM,SAAS,QAAQ,SAAS;IACxD,YAAa,EAAM,WAAW,QAAQ,YAAY;IAClD,aAAa,EAAc,SAAS;GACtC;GACA,IAAI,EACF,UAAU,MAAyB;IACjC,IAAI,CAAC,EAAM,WAAW,SAAS,EAAM,SAAS,OAAO;IAErD,IAAM,IAAM,EACT,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,aAAa,MAAM,MAAM,KAAK;IAEzG,IAAI,CAAC,GAAK;IAEV,IAAM,IAAU,EAAQ,CAAC,CAAC,QAAQ,CAAG;IAEjC,MAAY,OAEhB,EAAY,IAAI,CAAO,GACvB,EAAY,cAAc,CAAK;GACjC,EACF;EACF,CAAC,GAEM,CAAI;;;CAGb;CAEA,QAAQ,CAAC,EAAiB,CAAgB,GAAG,CAAe;AAC9D,CAAC"}
+{"version":3,"file":"list.js","names":[],"sources":["../src/content/list/list.ts"],"sourcesContent":["import { bind, createContext, define, getHost, html, onCleanup, prop, provide, useEmit } from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\nimport { createListControl, lifecycleSignal } from '../../core';\nimport { disablableBundle, LIST_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './list.css?inline';\n\n/** Visual variant for `ore-list`. */\nexport type ListVariant = 'bordered' | 'plain' | 'separated';\n\n/** Context provided by `ore-list` to its `ore-list-item` children. */\nexport type ListContext = {\n  /**\n   * Closes every other item's swipe-revealed action panel. Called directly by an item the moment\n   * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —\n   * replaces listening for a bubbled `reveal` event and re-deriving \"is this actually my direct\n   * child\" with a plain function call, the same shape as `select` below.\n   */\n  requestReveal: (item: HTMLElement) => void;\n  /**\n   * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called\n   * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.\n   * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so\n   * changing it here is the only thing that has to happen.\n   */\n  select: (value: string | undefined) => void;\n  selectable: Readable<boolean>;\n  /**\n   * Single source of truth for the current selection — `ore-list-item` never owns its own\n   * \"selected\" state; it's always derived by comparing its own `value` against this one (the\n   * same shape as `ore-radio-group`'s `RadioGroupContext.value`).\n   */\n  value: Readable<string | undefined>;\n};\n/** Injection key for the list context. */\nexport const LIST_CTX = createContext<ListContext>('ListContext');\n\n/** Events emitted by the list component */\nexport type OreListEvents = {\n  /** Emitted when the selected value changes (only when `selectable` is set). */\n  change: { value: null | string };\n};\n\n/** List component properties */\nexport type OreListProps = {\n  /** Disable the entire list — blocks pointer interaction and removes items from tab order */\n  disabled?: boolean;\n  /**\n   * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item\n   * selects it and deselects any previously-selected sibling. Arrow keys / Home / End move\n   * focus between items. Omit for a plain, non-interactive display list.\n   */\n  selectable?: boolean;\n  /** Size applied to all items (propagated via inherited CSS custom properties) */\n  size?: ComponentSize;\n  /**\n   * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for\n   * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for\n   * two-way control, or read it back from `change`.\n   */\n  value?: string;\n  /** Visual variant: 'plain' (default, no dividers) | 'bordered' (outer border + row dividers) | 'separated' (each item is its own card) */\n  variant?: ListVariant;\n};\n\n/**\n * A vertical list container for `ore-list-item` children — plain display list by default, or a\n * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal\n * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/\n * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).\n *\n * @element ore-list\n * @element ore-list-item - Child element for each row\n *\n * @attr {boolean} disabled - Disable the entire list\n * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation\n * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'\n * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection\n * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'\n *\n * @fires change - Emitted when the selected value changes. detail: { value: string | null }\n *\n * @slot - `ore-list-item` elements\n *\n * @cssprop --list-radius - Border radius for the 'bordered'/'separated' variants\n *\n * @example\n * ```html\n * <ore-list variant=\"bordered\">\n *   <ore-list-item>Inbox</ore-list-item>\n *   <ore-list-item>Drafts</ore-list-item>\n * </ore-list>\n * <ore-list selectable value=\"inbox\">\n *   <ore-list-item value=\"inbox\">Inbox</ore-list-item>\n *   <ore-list-item value=\"drafts\">Drafts</ore-list-item>\n * </ore-list>\n * ```\n */\nexport const LIST_TAG = 'ore-list' as const;\ndefine<OreListProps>(LIST_TAG, {\n  props: {\n    ...disablableBundle,\n    ...sizableBundle,\n    selectable: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<ListVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListEvents>();\n\n    const getItems = (): HTMLElement[] => [\n      ...el.querySelectorAll<HTMLElement>(':scope > ore-list-item:not([disabled])'),\n    ];\n\n    const getAllItems = (): HTMLElement[] => [...el.querySelectorAll<HTMLElement>(':scope > ore-list-item')];\n\n    // Reaches into each item's shadow root for its focusable row — mirrors `ore-accordion`'s\n    // `getSummaryElements()` — rather than relying on `item.focus()` + `shadow: { delegatesFocus:\n    // true }` to land focus correctly, since that cross-boundary reporting is inconsistent enough\n    // between real browsers and jsdom that other multi-item components in this package\n    // (`ore-menu`, `ore-tabs`) defensively check both forms too. Queried via `[part=\"row\"]`, not\n    // the `.row` class — `part` is list-item's declared public seam for exactly this kind of\n    // cross-component reach; the class name is a private styling detail that could change.\n    const getRow = (item: Element): HTMLElement | null =>\n      item.shadowRoot?.querySelector<HTMLElement>('[part=\"row\"]') ?? null;\n\n    const getRows = (): HTMLElement[] =>\n      getItems()\n        .map(getRow)\n        .filter((row): row is HTMLElement => row != null);\n\n    const listControl = createListControl<HTMLElement>({\n      getItems,\n      loop: true,\n      onNavigate: (_action, index) => {\n        getRow(getItems()[index])?.focus();\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // Selection — `selectedValue` is the single source of truth (mirrors `ore-radio-group`'s\n    // `selectedValue`/`RadioGroupContext.value` pattern): reflected onto the `value` attribute,\n    // synced back in when set externally, and read by every item via context to derive its own\n    // `selected` state. No sibling-clearing needed anywhere — changing this one signal is enough.\n    const selectedValue = signal<string | undefined>(props.value.value);\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n    });\n\n    const select = (value: string | undefined): void => {\n      if (selectedValue.value === value) return;\n\n      selectedValue.value = value;\n      emit('change', { value: value ?? null });\n    };\n\n    // Only one item's swipe-revealed action panel is open at a time. The item calls this\n    // directly the moment its own `revealed` attribute transitions to non-null — see\n    // `ListContext.requestReveal`'s doc comment for why this replaced a bubbled event.\n    const requestReveal = (item: HTMLElement): void => {\n      for (const sibling of getAllItems()) {\n        if (sibling !== item) sibling.removeAttribute('revealed');\n      }\n    };\n\n    // Closes any swipe-revealed item when the user interacts anywhere outside of it — matches\n    // the outside-pointerdown-closes pattern used by ore-date-picker/ore-time-picker's popovers.\n    const handleOutsidePointerDown = (event: PointerEvent): void => {\n      const open = getAllItems().find((item) => item.hasAttribute('revealed'));\n\n      if (!open || event.composedPath().includes(open)) return;\n\n      open.removeAttribute('revealed');\n    };\n\n    document.addEventListener('pointerdown', handleOutsidePointerDown, { capture: true });\n    onCleanup(() => document.removeEventListener('pointerdown', handleOutsidePointerDown, { capture: true }));\n\n    provide(LIST_CTX, {\n      requestReveal,\n      select,\n      selectable: computed(() => Boolean(props.selectable.value)),\n      value: selectedValue,\n    });\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        role: () => (props.selectable.value ? 'listbox' : 'list'),\n        value: () => selectedValue.value ?? null,\n      },\n      on: {\n        keydown: (event: KeyboardEvent) => {\n          if (!props.selectable.value || props.disabled.value) return;\n\n          const row = event\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.getAttribute('part') === 'row');\n\n          if (!row) return;\n\n          const focused = getRows().indexOf(row);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(event);\n        },\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [sizeVariantMixin(LIST_SIZE_PRESET), componentStyles],\n});\n"],"mappings":";;;;;;;;;AAoCA,IAAa,IAAW,EAA2B,aAAa,GA+DnD,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,YAAY,EAAK,KAAK,EAAK;EAC3B,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAoB;CACpC;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAE9B,UAAgC,CACpC,GAAG,EAAG,iBAA8B,wCAAwC,CAC9E,GAEM,UAAmC,CAAC,GAAG,EAAG,iBAA8B,wBAAwB,CAAC,GASjG,KAAU,MACd,EAAK,YAAY,cAA2B,gBAAc,KAAK,MAE3D,UACJ,EAAS,CAAC,CACP,IAAI,CAAM,CAAC,CACX,QAAQ,MAA4B,KAAO,IAAI,GAE9C,IAAc,EAA+B;GACjD;GACA,MAAM;GACN,aAAa,GAAS,MAAU;IAC9B,EAAO,EAAS,CAAC,CAAC,EAAM,CAAC,EAAE,MAAM;GACnC;GACA,QAAQ,EAAgB,CAAS;EACnC,CAAC,GAMK,IAAgB,EAA2B,EAAM,MAAM,KAAK;EAElE,EAAM,EAAM,QAAQ,MAAU;GAC5B,EAAc,QAAQ;EACxB,CAAC;EAED,IAAM,KAAU,MAAoC;GAC9C,EAAc,UAAU,MAE5B,EAAc,QAAQ,GACtB,EAAK,UAAU,EAAE,OAAO,KAAS,KAAK,CAAC;EACzC,GAKM,KAAiB,MAA4B;GACjD,KAAK,IAAM,KAAW,EAAY,GAChC,AAAI,MAAY,KAAM,EAAQ,gBAAgB,UAAU;EAE5D,GAIM,KAA4B,MAA8B;GAC9D,IAAM,IAAO,EAAY,CAAC,CAAC,MAAM,MAAS,EAAK,aAAa,UAAU,CAAC;GAEnE,CAAC,KAAQ,EAAM,aAAa,CAAC,CAAC,SAAS,CAAI,KAE/C,EAAK,gBAAgB,UAAU;EACjC;EAsCA,OApCA,SAAS,iBAAiB,eAAe,GAA0B,EAAE,SAAS,GAAK,CAAC,GACpF,QAAgB,SAAS,oBAAoB,eAAe,GAA0B,EAAE,SAAS,GAAK,CAAC,CAAC,GAExG,EAAQ,GAAU;GAChB;GACA;GACA,YAAY,QAAe,EAAQ,EAAM,WAAW,KAAM;GAC1D,OAAO;EACT,CAAC,GAED,EAAK;GACH,MAAM;IACJ,uBAAwB,EAAM,SAAS,QAAQ,SAAS;IACxD,YAAa,EAAM,WAAW,QAAQ,YAAY;IAClD,aAAa,EAAc,SAAS;GACtC;GACA,IAAI,EACF,UAAU,MAAyB;IACjC,IAAI,CAAC,EAAM,WAAW,SAAS,EAAM,SAAS,OAAO;IAErD,IAAM,IAAM,EACT,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,aAAa,MAAM,MAAM,KAAK;IAEzG,IAAI,CAAC,GAAK;IAEV,IAAM,IAAU,EAAQ,CAAC,CAAC,QAAQ,CAAG;IAEjC,MAAY,OAEhB,EAAY,IAAI,CAAO,GACvB,EAAY,cAAc,CAAK;GACjC,EACF;EACF,CAAC,GAEM,CAAI;;;CAGb;CAEA,QAAQ,CAAC,EAAiB,CAAgB,GAAG,CAAe;AAC9D,CAAC"}

package/dist/marquee.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./content/marquee/marquee.css.cjs");let t=require("@vielzeug/ore"),n=require("@vielzeug/ripple/watch");var r=`ore-marquee`;(0,t.define)(r,{props:{color:t.prop.string(),direction:t.prop.string(`left`),duration:t.prop.number(20),"pause-on-hover":t.prop.bool(!1),"show-controls":t.prop.bool(!0)},setup(e){let r=(0,t.getHost)(),i=0,a=[],o=[],s=null,c=0,l=null,u=null,d=t=>{if(!u||o.length===0)return;i=(t+o.length)%o.length;let n=o[i];if(!n||c===0)return;let r=e.duration.value??20,a=-(n.offsetLeft/c*r);u.style.setProperty(`animation-delay`,`${a}s`)};return(0,n.watch)(e.duration,e=>{r.style.setProperty(`--_marquee-duration`,`${e??20}s`)},{immediate:!0}),(0,t.onMounted)(()=>{u=r.shadowRoot?.querySelector(`.track`)??null;let e=r.shadowRoot?.querySelector(`slot`)??null,t=()=>{a.forEach(e=>e.remove()),a=[]},n=()=>{a.push(...o.map(e=>{let t=e.cloneNode(!0);return t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-marquee-clone`,``),t.setAttribute(`inert`,``),r.appendChild(t),t}))},d=()=>{if(!u||o.length===0)return;let e=u;s!==null&&cancelAnimationFrame(s),t(),c=0,e.style.removeProperty(`--_marquee-translate`),n(),s=requestAnimationFrame(()=>{s=null;let t=a[0],i=o[0];if(!t||!i||(c=t.offsetLeft-i.offsetLeft,c<=0))return;let l=Math.max(2,Math.ceil((r.clientWidth+c)/c));for(let e=2;e<l;e+=1)n();e.style.setProperty(`--_marquee-translate`,`-${c}px`)})},f=()=>{let t=(e?.assignedElements()??[]).filter(e=>e instanceof HTMLElement&&!e.hasAttribute(`data-marquee-clone`));(t.length!==o.length||t.some((e,t)=>e!==o[t]))&&(o=t,i=Math.min(i,Math.max(o.length-1,0)),d())};return l=typeof ResizeObserver>`u`?null:new ResizeObserver(d),l?.observe(r),e?.addEventListener(`slotchange`,f),f(),()=>{s!==null&&cancelAnimationFrame(s),l?.disconnect(),e?.removeEventListener(`slotchange`,f),t(),u=null,o=[],c=0}}),t.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./content/marquee/marquee.css.cjs");let t=require("@vielzeug/ore"),n=require("@vielzeug/ripple");var r=`ore-marquee`;(0,t.define)(r,{props:{color:t.prop.string(),direction:t.prop.string(`left`),duration:t.prop.number(20),"pause-on-hover":t.prop.bool(!1),"show-controls":t.prop.bool(!0)},setup(e){let r=(0,t.getHost)(),i=0,a=[],o=[],s=null,c=0,l=null,u=null,d=t=>{if(!u||o.length===0)return;i=(t+o.length)%o.length;let n=o[i];if(!n||c===0)return;let r=e.duration.value??20,a=-(n.offsetLeft/c*r);u.style.setProperty(`animation-delay`,`${a}s`)};return(0,n.watch)(e.duration,e=>{r.style.setProperty(`--_marquee-duration`,`${e??20}s`)},{immediate:!0}),(0,t.onMounted)(()=>{u=r.shadowRoot?.querySelector(`.track`)??null;let e=r.shadowRoot?.querySelector(`slot`)??null,t=()=>{a.forEach(e=>e.remove()),a=[]},n=()=>{a.push(...o.map(e=>{let t=e.cloneNode(!0);return t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-marquee-clone`,``),t.setAttribute(`inert`,``),r.appendChild(t),t}))},d=()=>{if(!u||o.length===0)return;let e=u;s!==null&&cancelAnimationFrame(s),t(),c=0,e.style.removeProperty(`--_marquee-translate`),n(),s=requestAnimationFrame(()=>{s=null;let t=a[0],i=o[0];if(!t||!i||(c=t.offsetLeft-i.offsetLeft,c<=0))return;let l=Math.max(2,Math.ceil((r.clientWidth+c)/c));for(let e=2;e<l;e+=1)n();e.style.setProperty(`--_marquee-translate`,`-${c}px`)})},f=()=>{let t=(e?.assignedElements()??[]).filter(e=>e instanceof HTMLElement&&!e.hasAttribute(`data-marquee-clone`));(t.length!==o.length||t.some((e,t)=>e!==o[t]))&&(o=t,i=Math.min(i,Math.max(o.length-1,0)),d())};return l=typeof ResizeObserver>`u`?null:new ResizeObserver(d),l?.observe(r),e?.addEventListener(`slotchange`,f),f(),()=>{s!==null&&cancelAnimationFrame(s),l?.disconnect(),e?.removeEventListener(`slotchange`,f),t(),u=null,o=[],c=0}}),t.html`
       <div class="track" part="track" aria-live="off">
         <slot></slot>
       </div>

package/dist/marquee.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.cjs","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"marquee.cjs","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/marquee.js

@@ -1,6 +1,6 @@
 import e from "./content/marquee/marquee.css.js";
 import { define as t, getHost as n, html as r, onMounted as i, prop as a } from "@vielzeug/ore";
-import { watch as o } from "@vielzeug/ripple/watch";
+import { watch as o } from "@vielzeug/ripple";
 //#region src/content/marquee/marquee.ts
 var s = "ore-marquee";
 t(s, {

package/dist/marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.js","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"marquee.js","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/menu.cjs

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