@vielzeug/refine 2.3.0 → 2.4.0

package/dist/list-item.cjs

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

package/dist/list-item.cjs.map

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

package/dist/list-item.js

@@ -10,17 +10,18 @@ var _ = (e) => e === "left" ? "actions-left" : "actions-right", v = "ore-list-it
 o(v, {
 	props: {
 		...t,
+		actionable: f.bool(!1),
 		revealed: f.oneOf(["left", "right"], void 0),
 		value: f.string()
 	},
 	setup(e) {
-		let t = s(), i = p(), o = m(), f = l(n), v = g(() => !!f?.selectable.value), y = g(() => e.value.value != null && f != null && f.value.value === e.value.value), b = (e) => o.has(_(e)).value;
+		let t = s(), i = p(), o = m(), f = o.has("description"), v = o.has("leading"), y = o.has("trailing"), b = l(n), x = g(() => !!b?.selectable.value), S = g(() => e.value.value != null && b != null && b.value.value === e.value.value), C = (e) => o.has(_(e)).value;
 		d(() => {
 			let n = t.shadowRoot?.querySelector(".row");
 			if (!n) return;
 			let a = r(t, n, {
 				disabled: g(() => e.disabled.value || !!e.revealed.value),
-				hasActions: b,
+				hasActions: C,
 				onConfirm: (e) => {
 					let n = o.elements(_(e)).value[0];
 					i("confirm", {
@@ -31,53 +32,58 @@ o(v, {
 			});
 			u(() => a.dispose());
 		}), h(() => {
-			t.toggleAttribute("selected", y.value);
+			t.toggleAttribute("selected", S.value);
 		});
-		let x = y.value;
+		let w = S.value;
 		h(() => {
-			let n = y.value;
-			n !== x && (x = n, i(n ? "select" : "deselect", {
+			let n = S.value;
+			n !== w && (w = n, i(n ? "select" : "deselect", {
 				item: t,
 				value: e.value.value ?? null
 			}));
 		});
-		let S = e.revealed.value ?? null;
+		let T = e.revealed.value ?? null;
 		h(() => {
 			let n = e.revealed.value ?? null;
-			n !== S && (S = n, n ? (f?.requestReveal(t), i("reveal", {
+			n !== T && (T = n, n ? (b?.requestReveal(t), i("reveal", {
 				item: t,
 				side: n
 			})) : i("conceal", { item: t }));
 		});
-		let C = (n) => {
+		let E = (n) => {
 			if (e.disabled.value) return;
 			if (e.revealed.value) {
 				n.preventDefault(), n.stopPropagation(), t.removeAttribute("revealed");
 				return;
 			}
-			if (!v.value) return;
+			if (e.actionable.value && i("activate", {
+				item: t,
+				value: e.value.value ?? null
+			}), !x.value) return;
 			let r = e.value.value;
-			r != null && f?.select(y.value ? void 0 : r);
+			r != null && b?.select(S.value ? void 0 : r);
 		};
 		return a({ attr: {
 			"aria-disabled": () => e.disabled.value ? "true" : null,
-			"aria-selected": () => v.value ? String(y.value) : null,
-			role: () => v.value ? "option" : "listitem"
+			"aria-selected": () => x.value ? String(S.value) : null,
+			"data-two-line": () => f.value ? !0 : void 0,
+			role: () => x.value ? "option" : "listitem"
 		} }), c`
       <div
         class="row"
         part="row"
+        role="${() => e.actionable.value ? "button" : null}"
         tabindex="${() => e.disabled.value ? "-1" : "0"}"
-        @click="${C}"
+        @click="${E}"
         @keydown="${(t) => {
-			(t.key === "Enter" || t.key === " ") && (e.disabled.value || !e.revealed.value && !v.value || (t.preventDefault(), C(t)));
+			(t.key === "Enter" || t.key === " ") && !e.disabled.value && (e.revealed.value || x.value || e.actionable.value) && (t.preventDefault(), E(t));
 		}}">
-        <span class="leading" part="leading"><slot name="leading"></slot></span>
+        <span class="leading" part="leading" ?hidden="${() => !v.value}"><slot name="leading"></slot></span>
         <span class="content" part="content">
           <span class="title" part="title"><slot></slot></span>
           <span class="description" part="description"><slot name="description"></slot></span>
         </span>
-        <span class="trailing" part="trailing"><slot name="trailing"></slot></span>
+        <span class="trailing" part="trailing" ?hidden="${() => !y.value}"><slot name="trailing"></slot></span>
       </div>
       <span class="actions actions-left" part="actions-start"><slot name="actions-left"></slot></span>
       <span class="actions actions-right" part="actions-end"><slot name="actions-right"></slot></span>

package/dist/list-item.js.map

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

package/dist/list.cjs

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

package/dist/list.cjs.map

@@ -1 +1 @@
-{"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: ({ item }) => {\n        getRow(item)?.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,CAAE,UAAW,CACxB,EAAO,CAAI,CAAC,EAAE,MAAM,CACtB,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: ({ item }) => {\n        getRow(item)?.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,CAAE,UAAW,CACxB,EAAO,CAAI,CAAC,EAAE,MAAM,CACtB,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,EAElE,GAAQ,GAAM,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

@@ -34,7 +34,7 @@ l(b, {
 			for (let t of o()) t !== e && t.removeAttribute("revealed");
 		}, C = (e) => {
 			let t = o().find((e) => e.hasAttribute("revealed"));
-			!t || e.composedPath().includes(t) || t.removeAttribute("revealed");
+			t && !e.composedPath().includes(t) && t.removeAttribute("revealed");
 		};
 		return document.addEventListener("pointerdown", C, { capture: !0 }), f(() => document.removeEventListener("pointerdown", C, { capture: !0 })), m(y, {
 			requestReveal: S,

package/dist/list.js.map

@@ -1 +1 @@
-{"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: ({ item }) => {\n        getRow(item)?.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,EAAE,cAAW;IACxB,EAAO,CAAI,CAAC,EAAE,MAAM;GACtB;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: ({ item }) => {\n        getRow(item)?.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,EAAE,cAAW;IACxB,EAAO,CAAI,CAAC,EAAE,MAAM;GACtB;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,AAAC,KAAQ,GAAM,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/menu.cjs

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

package/dist/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import { restoreFocus } from '@vielzeug/focus';\nimport type { Placement } from '@vielzeug/orbit';\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  checked?: boolean;\n  value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: ({ item }) => {\n        getItemFocusable(item)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\n    );\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      resolveTrigger();\n\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}
+{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import { restoreFocus } from '@vielzeug/focus';\nimport type { Placement } from '@vielzeug/orbit';\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  checked?: boolean;\n  value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: ({ item }) => {\n        getItemFocusable(item)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\n    );\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      resolveTrigger();\n\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}

package/dist/menu.js

@@ -177,7 +177,7 @@ g(N, {
 			let t = e.composedPath();
 			if (!N.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") || V(n);
+			n && !n.hasAttribute("disabled") && V(n);
 		} } }), l(() => {
 			let e = N.value;
 			g && g.toggleAttribute("data-open", e);