@vielzeug/refine 1.5.3 → 1.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"_list-item-reveal.js","names":[],"sources":["../../../src/content/list/_list-item-reveal.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport type { ListItemRevealSide } from './list-item';\n\nimport { createSwipeControl, type SwipeControl, type SwipeControlDetail } from '../../headless';\n\n/** Drag distance (px) past which the action panel snaps fully open on release. */\nconst REVEAL_THRESHOLD = 64;\n/** Drag distance (px) past which the swipe auto-confirms the action — \"swiped all the way\". */\nconst CONFIRM_THRESHOLD = REVEAL_THRESHOLD * 3;\n/** Fraction of CONFIRM_THRESHOLD past which `data-confirming` warns the drag is about to fire. */\nconst CONFIRM_WARNING_RATIO = 0.85;\n\nexport type RevealStateOptions = {\n  disabled: Readable<boolean>;\n  hasActions: (side: ListItemRevealSide) => boolean;\n  /** The full-swipe-through gesture fired — emit `confirm` and click the slot's own action. */\n  onConfirm: (side: ListItemRevealSide) => void;\n};\n\n/**\n * The swipe-reveal-confirm gesture behind `ore-list-item`'s `actions-left`/`actions-right` slots\n * — isolated here since it's the one genuinely tricky part of the component (three distance\n * thresholds, inline style/attribute choreography during an active drag). Deliberately *not* a\n * `headless/` primitive: `createSwipeControl` itself already is one (shared with `ore-toast`),\n * but this two-stage reveal/confirm layer on top of it has exactly one consumer today —\n * generalizing it further would be speculative, not reusable.\n *\n * Only sets/clears the `revealed`/`data-dragging`/`data-confirming` attributes and `--_swipe-x`\n * style — it does not itself emit `reveal`/`conceal`. `ore-list-item` already watches `revealed`\n * for transitions (to cover *both* this gesture and a directly-set attribute uniformly), so this\n * module setting the attribute is enough to drive both that watcher and `list.css`'s\n * `[revealed]` styling.\n */\nexport function createRevealState(el: HTMLElement, options: RevealStateOptions): SwipeControl {\n  const resolveSide = (detail: SwipeControlDetail): ListItemRevealSide => (detail.distance < 0 ? 'right' : 'left');\n\n  // Inline `--_swipe-x` override during an active drag lets the row (and both action panels,\n  // which read the same variable) follow the pointer 1:1 with no transition lag. Clearing it\n  // hands control back to the `[revealed]`/`:focus-within` CSS rules in list-item.css, which\n  // then animate normally via the CSS `transition`.\n  const resetInline = (): void => {\n    el.removeAttribute('data-dragging');\n    el.removeAttribute('data-confirming');\n    el.style.removeProperty('--_swipe-x');\n  };\n\n  return createSwipeControl({\n    axis: () => 'x',\n    // Do not capture the pointer — capture would steal clicks from action buttons revealed\n    // mid-gesture (same reasoning as ore-toast's swipe-to-dismiss).\n    captureTarget: () => null,\n    disabled: options.disabled,\n    onCancel: resetInline,\n    // `threshold`/`distance`/`progress` are all wired to CONFIRM_THRESHOLD (the outer, rarer\n    // gesture) — onCommit only fires once the swipe has gone all the way through.\n    onCommit: (detail) => {\n      const side = resolveSide(detail);\n\n      resetInline();\n\n      if (!options.hasActions(side)) return;\n\n      el.removeAttribute('revealed');\n      options.onConfirm(side);\n    },\n    onMove: (detail) => {\n      const side = resolveSide(detail);\n\n      if (!options.hasActions(side)) return;\n\n      // Reveal follows the pointer up to REVEAL_THRESHOLD, then holds fully open while the\n      // drag continues on toward CONFIRM_THRESHOLD (still tracked by `detail`/onCommit above).\n      const revealProgress = Math.min(Math.abs(detail.distance) / REVEAL_THRESHOLD, 1);\n\n      el.setAttribute('data-dragging', '');\n      el.toggleAttribute('data-confirming', detail.progress >= CONFIRM_WARNING_RATIO);\n      el.style.setProperty('--_swipe-x', String((side === 'left' ? 1 : -1) * revealProgress));\n    },\n    onRelease: (detail) => {\n      const side = resolveSide(detail);\n\n      resetInline();\n\n      if (options.hasActions(side) && Math.abs(detail.distance) >= REVEAL_THRESHOLD) el.setAttribute('revealed', side);\n    },\n    threshold: () => CONFIRM_THRESHOLD,\n  });\n}\n"],"mappings":";;AAOA,IAAM,IAAmB,IAEnB,IAAoB,IAAmB,GAEvC,IAAwB;AAuB9B,SAAgB,EAAkB,GAAiB,GAA2C;CAC5F,IAAM,KAAe,MAAoD,EAAO,WAAW,IAAI,UAAU,QAMnG,UAA0B;EAG9B,AAFA,EAAG,gBAAgB,eAAe,GAClC,EAAG,gBAAgB,iBAAiB,GACpC,EAAG,MAAM,eAAe,YAAY;CACtC;CAEA,OAAO,EAAmB;EACxB,YAAY;EAGZ,qBAAqB;EACrB,UAAU,EAAQ;EAClB,UAAU;EAGV,WAAW,MAAW;GACpB,IAAM,IAAO,EAAY,CAAM;GAE/B,EAAY,GAEP,EAAQ,WAAW,CAAI,MAE5B,EAAG,gBAAgB,UAAU,GAC7B,EAAQ,UAAU,CAAI;EACxB;EACA,SAAS,MAAW;GAClB,IAAM,IAAO,EAAY,CAAM;GAE/B,IAAI,CAAC,EAAQ,WAAW,CAAI,GAAG;GAI/B,IAAM,IAAiB,KAAK,IAAI,KAAK,IAAI,EAAO,QAAQ,IAAI,GAAkB,CAAC;GAI/E,AAFA,EAAG,aAAa,iBAAiB,EAAE,GACnC,EAAG,gBAAgB,mBAAmB,EAAO,YAAY,CAAqB,GAC9E,EAAG,MAAM,YAAY,cAAc,QAAQ,MAAS,SAAS,IAAI,MAAM,CAAc,CAAC;EACxF;EACA,YAAY,MAAW;GACrB,IAAM,IAAO,EAAY,CAAM;GAI/B,AAFA,EAAY,GAER,EAAQ,WAAW,CAAI,KAAK,KAAK,IAAI,EAAO,QAAQ,KAAK,KAAkB,EAAG,aAAa,YAAY,CAAI;EACjH;EACA,iBAAiB;CACnB,CAAC;AACH"}

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{color:var(--color-contrast-700);--_actions-width:var(--list-item-actions-width,var(--size-24));display:block;position:relative;overflow:hidden}.row{z-index:1;box-sizing:border-box;gap:var(--_gap,var(--size-4));width:100%;min-height:var(--_min-height,var(--size-4));padding:var(--_padding,var(--size-2-5) var(--size-4));font-size:var(--_font-size,var(--text-sm));text-align:start;touch-action:pan-y;cursor:default;background:var(--list-item-bg,var(--color-canvas));transform:translateX(calc(var(--_swipe-x,0) * var(--_actions-width)));transition:var(--_motion-transition,transform var(--transition-fast), background var(--transition-fast));border:none;outline:none;align-items:center;display:flex;position:relative}.row:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:var(--_padding-inline-end,var(--size-6))}.row:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:var(--_padding-inline-end,var(--size-6))}.leading,.trailing{flex-shrink:0;align-items:center;display:flex}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-400);white-space:nowrap;display:block;overflow:hidden}.description:empty{display:none}.row:hover{background:var(--list-item-hover-bg,var(--color-contrast-100))}.row:focus-visible{outline:var(--focus-ring);outline-offset:-2px}:host([selected]) .row{color:var(--color-primary);background:var(--list-item-selected-bg,color-mix(in oklch, var(--color-primary) 10%, transparent))}:host([disabled]){pointer-events:none;opacity:.6}.actions{width:var(--_actions-width);transition:var(--_motion-transition,transform var(--transition-fast));align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.actions ::slotted(*){flex:1;height:100%}.actions-left{transform:translateX(calc((var(--_swipe-x,0) - 1) * 100%));left:0}.actions-right{transform:translateX(calc((var(--_swipe-x,0) + 1) * 100%));right:0}:host([revealed=left]){--_swipe-x:1}:host([revealed=right]){--_swipe-x:-1}:host:has(.actions-left:focus-within){--_swipe-x:1}:host:has(.actions-right:focus-within){--_swipe-x:-1}:host([data-dragging]) .row,:host([data-dragging]) .actions-left,:host([data-dragging]) .actions-right{transition:none}:host([data-confirming]) .actions-left,:host([data-confirming]) .actions-right{filter:saturate(1.4)brightness(.94)}}`;exports.default=e;
+//# sourceMappingURL=list-item.css.cjs.map

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

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

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

@@ -0,0 +1,6 @@
+//#region src/content/list/list-item.css?inline
+var e = "@layer refine.base{:host{color:var(--color-contrast-700);--_actions-width:var(--list-item-actions-width,var(--size-24));display:block;position:relative;overflow:hidden}.row{z-index:1;box-sizing:border-box;gap:var(--_gap,var(--size-4));width:100%;min-height:var(--_min-height,var(--size-4));padding:var(--_padding,var(--size-2-5) var(--size-4));font-size:var(--_font-size,var(--text-sm));text-align:start;touch-action:pan-y;cursor:default;background:var(--list-item-bg,var(--color-canvas));transform:translateX(calc(var(--_swipe-x,0) * var(--_actions-width)));transition:var(--_motion-transition,transform var(--transition-fast), background var(--transition-fast));border:none;outline:none;align-items:center;display:flex;position:relative}.row:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:var(--_padding-inline-end,var(--size-6))}.row:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:var(--_padding-inline-end,var(--size-6))}.leading,.trailing{flex-shrink:0;align-items:center;display:flex}.content{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.title{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.description{text-overflow:ellipsis;font-size:var(--text-xs);color:var(--color-contrast-400);white-space:nowrap;display:block;overflow:hidden}.description:empty{display:none}.row:hover{background:var(--list-item-hover-bg,var(--color-contrast-100))}.row:focus-visible{outline:var(--focus-ring);outline-offset:-2px}:host([selected]) .row{color:var(--color-primary);background:var(--list-item-selected-bg,color-mix(in oklch, var(--color-primary) 10%, transparent))}:host([disabled]){pointer-events:none;opacity:.6}.actions{width:var(--_actions-width);transition:var(--_motion-transition,transform var(--transition-fast));align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.actions ::slotted(*){flex:1;height:100%}.actions-left{transform:translateX(calc((var(--_swipe-x,0) - 1) * 100%));left:0}.actions-right{transform:translateX(calc((var(--_swipe-x,0) + 1) * 100%));right:0}:host([revealed=left]){--_swipe-x:1}:host([revealed=right]){--_swipe-x:-1}:host:has(.actions-left:focus-within){--_swipe-x:1}:host:has(.actions-right:focus-within){--_swipe-x:-1}:host([data-dragging]) .row,:host([data-dragging]) .actions-left,:host([data-dragging]) .actions-right{transition:none}:host([data-confirming]) .actions-left,:host([data-confirming]) .actions-right{filter:saturate(1.4)brightness(.94)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=list-item.css.js.map

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

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

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

@@ -0,0 +1,111 @@
+/** Which side's action panel is currently revealed on a list item. */
+export type ListItemRevealSide = 'left' | 'right';
+/** Events emitted by the list-item component */
+export type OreListItemEvents = {
+    /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */
+    conceal: {
+        item: HTMLElement;
+    };
+    /**
+     * Emitted when a swipe crosses the full-swipe-through distance — the "swiped all the way"
+     * confirm gesture. Fired just before the slotted action's own click (if any).
+     */
+    confirm: {
+        item: HTMLElement;
+        side: ListItemRevealSide;
+    };
+    /** Emitted when the item becomes deselected. */
+    deselect: {
+        item: HTMLElement;
+        value: null | string;
+    };
+    /** Emitted when a swipe/focus reveals an action panel. */
+    reveal: {
+        item: HTMLElement;
+        side: ListItemRevealSide;
+    };
+    /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */
+    select: {
+        item: HTMLElement;
+        value: null | string;
+    };
+};
+/** List-item component properties */
+export type OreListItemProps = {
+    /** Disable this item — blocks pointer interaction, swipe actions, and selection */
+    disabled?: boolean;
+    /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */
+    revealed?: ListItemRevealSide;
+    /**
+     * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive
+     * `selected` — required for selection to work. There's no separate `selected` prop: the parent
+     * list's `value` is the single source of truth, so this item's selected state can't drift from
+     * it. Also reported in `select`/`deselect`/the parent's `change` event.
+     */
+    value?: string;
+};
+/**
+ * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`
+ * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal
+ * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An
+ * action panel only opens if it actually has slotted content; swiping the other direction is a
+ * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button
+ * reveals its panel via `:focus-within`, independent of any gesture).
+ *
+ * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —
+ * past the full-swipe-through distance — auto-confirms that side's action immediately (fires
+ * `confirm` and clicks the slot's first element), the same "swipe all the way" shortcut as iOS
+ * Mail's delete gesture.
+ *
+ * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside
+ * the item, or open a different item's panel. Reverse-swiping an already-open item is not
+ * supported — see `ore-list`'s docs for the reasoning.
+ *
+ * @element ore-list-item
+ *
+ * @attr {boolean} disabled - Disable this item
+ * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.
+ * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events
+ * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'
+ *
+ * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }
+ * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }
+ * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }
+ * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }
+ * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }
+ *
+ * @slot leading - Content before the title (e.g. icon, avatar)
+ * @slot - Item title
+ * @slot description - Secondary line below the title
+ * @slot trailing - Content after the title (e.g. meta text, chevron)
+ * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)
+ * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)
+ *
+ * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)
+ * @cssprop --list-item-bg - Row background color
+ * @cssprop --list-item-hover-bg - Row background on hover
+ * @cssprop --list-item-selected-bg - Row background when selected
+ * @part row - The row wrapper (focusable, swipeable)
+ * @part leading - The leading slot container
+ * @part content - The title + description container
+ * @part title - The title slot container
+ * @part description - The description slot container
+ * @part trailing - The trailing slot container
+ * @part actions-start - The left action panel container
+ * @part actions-end - The right action panel container
+ * @example
+ * ```html
+ * <ore-list-item>
+ *   <ore-icon slot="leading" name="mail"></ore-icon>
+ *   Inbox
+ *   <span slot="trailing">12</span>
+ * </ore-list-item>
+ * <ore-list-item>
+ *   Newsletter
+ *   <span slot="description">From Acme Inc.</span>
+ *   <ore-button slot="actions-right" color="error">Delete</ore-button>
+ * </ore-list-item>
+ * ```
+ */
+export declare const LIST_ITEM_TAG: "ore-list-item";
+//# sourceMappingURL=list-item.d.ts.map

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

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

package/dist/content/list/list.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host,::slotted(ore-list-item){display:block}:host([variant=bordered]){border:var(--border) solid var(--color-contrast-200);border-radius:var(--list-radius,var(--rounded-lg));overflow:hidden}:host([variant=bordered]) ::slotted(ore-list-item:not(:last-of-type)){border-bottom:var(--border) solid var(--color-contrast-200)}:host([variant=separated]){gap:var(--_gap,var(--size-2-5));flex-direction:column;display:flex}:host([variant=separated]) ::slotted(ore-list-item){border:var(--border) solid var(--color-contrast-200);border-radius:var(--list-radius,var(--rounded-lg));overflow:hidden}:host([disabled]){pointer-events:none;opacity:.6}}`;exports.default=e;
+//# sourceMappingURL=list.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.css.cjs","names":[],"sources":["../../../src/content/list/list.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  ::slotted(ore-list-item) {\n    display: block;\n  }\n\n  /* ========================================\n       Bordered Variant\n       ======================================== */\n\n  :host([variant='bordered']) {\n    overflow: hidden;\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--list-radius, var(--rounded-lg));\n  }\n\n  :host([variant='bordered']) ::slotted(ore-list-item:not(:last-of-type)) {\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  /* ========================================\n       Separated Variant\n       ======================================== */\n\n  :host([variant='separated']) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap, var(--size-2-5));\n  }\n\n  :host([variant='separated']) ::slotted(ore-list-item) {\n    overflow: hidden;\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--list-radius, var(--rounded-lg));\n  }\n\n  /* ========================================\n       Disabled State\n       ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

package/dist/content/list/list.css.js

@@ -0,0 +1,6 @@
+//#region src/content/list/list.css?inline
+var e = "@layer refine.base{:host,::slotted(ore-list-item){display:block}:host([variant=bordered]){border:var(--border) solid var(--color-contrast-200);border-radius:var(--list-radius,var(--rounded-lg));overflow:hidden}:host([variant=bordered]) ::slotted(ore-list-item:not(:last-of-type)){border-bottom:var(--border) solid var(--color-contrast-200)}:host([variant=separated]){gap:var(--_gap,var(--size-2-5));flex-direction:column;display:flex}:host([variant=separated]) ::slotted(ore-list-item){border:var(--border) solid var(--color-contrast-200);border-radius:var(--list-radius,var(--rounded-lg));overflow:hidden}:host([disabled]){pointer-events:none;opacity:.6}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=list.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.css.js","names":[],"sources":["../../../src/content/list/list.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  ::slotted(ore-list-item) {\n    display: block;\n  }\n\n  /* ========================================\n       Bordered Variant\n       ======================================== */\n\n  :host([variant='bordered']) {\n    overflow: hidden;\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--list-radius, var(--rounded-lg));\n  }\n\n  :host([variant='bordered']) ::slotted(ore-list-item:not(:last-of-type)) {\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  /* ========================================\n       Separated Variant\n       ======================================== */\n\n  :host([variant='separated']) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap, var(--size-2-5));\n  }\n\n  :host([variant='separated']) ::slotted(ore-list-item) {\n    overflow: hidden;\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--list-radius, var(--rounded-lg));\n  }\n\n  /* ========================================\n       Disabled State\n       ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,93 @@
+import { type Readable } from '@vielzeug/ripple';
+import type { ComponentSize } from '../../types';
+/** Visual variant for `ore-list`. */
+export type ListVariant = 'bordered' | 'plain' | 'separated';
+/** Context provided by `ore-list` to its `ore-list-item` children. */
+export type ListContext = {
+    /**
+     * Closes every other item's swipe-revealed action panel. Called directly by an item the moment
+     * its own `revealed` attribute transitions to non-null (gesture or direct attribute set) —
+     * replaces listening for a bubbled `reveal` event and re-deriving "is this actually my direct
+     * child" with a plain function call, the same shape as `select` below.
+     */
+    requestReveal: (item: HTMLElement) => void;
+    /**
+     * Selects `value` (or clears the selection when `undefined`) and fires `change`. Called
+     * directly by an activated item — mirrors `ore-radio-group`'s `RadioGroupContext.select()`.
+     * No sibling bookkeeping needed here: every item's `selected` is *derived* from `value`, so
+     * changing it here is the only thing that has to happen.
+     */
+    select: (value: string | undefined) => void;
+    selectable: Readable<boolean>;
+    /**
+     * Single source of truth for the current selection — `ore-list-item` never owns its own
+     * "selected" state; it's always derived by comparing its own `value` against this one (the
+     * same shape as `ore-radio-group`'s `RadioGroupContext.value`).
+     */
+    value: Readable<string | undefined>;
+};
+/** Injection key for the list context. */
+export declare const LIST_CTX: import("@vielzeug/ore").InjectionKey<ListContext>;
+/** Events emitted by the list component */
+export type OreListEvents = {
+    /** Emitted when the selected value changes (only when `selectable` is set). */
+    change: {
+        value: null | string;
+    };
+};
+/** List component properties */
+export type OreListProps = {
+    /** Disable the entire list — blocks pointer interaction and removes items from tab order */
+    disabled?: boolean;
+    /**
+     * Enables single-selection listbox behavior: clicking (or pressing Enter/Space on) an item
+     * selects it and deselects any previously-selected sibling. Arrow keys / Home / End move
+     * focus between items. Omit for a plain, non-interactive display list.
+     */
+    selectable?: boolean;
+    /** Size applied to all items (propagated via inherited CSS custom properties) */
+    size?: ComponentSize;
+    /**
+     * Selected item's `value` (only meaningful when `selectable`) — the single source of truth for
+     * selection. `ore-list-item` never owns its own selected state; set this directly, bind it for
+     * two-way control, or read it back from `change`.
+     */
+    value?: string;
+    /** Visual variant: 'plain' (default, no dividers) | 'bordered' (outer border + row dividers) | 'separated' (each item is its own card) */
+    variant?: ListVariant;
+};
+/**
+ * A vertical list container for `ore-list-item` children — plain display list by default, or a
+ * keyboard-navigable single-select listbox via `selectable`. Each item can independently reveal
+ * a left/right action panel via touch/pointer swipe (see `ore-list-item`'s `actions-left`/
+ * `actions-right` slots) — useful for mobile-style row actions (archive, delete, …).
+ *
+ * @element ore-list
+ * @element ore-list-item - Child element for each row
+ *
+ * @attr {boolean} disabled - Disable the entire list
+ * @attr {boolean} selectable - Enable single-selection listbox behavior with arrow-key navigation
+ * @attr {string} size - Size applied to all items: 'sm' | 'md' | 'lg'
+ * @attr {string} value - Selected item's value (only meaningful when `selectable`) — the single source of truth for selection
+ * @attr {string} variant - Visual variant: 'plain' | 'bordered' | 'separated'
+ *
+ * @fires change - Emitted when the selected value changes. detail: { value: string | null }
+ *
+ * @slot - `ore-list-item` elements
+ *
+ * @cssprop --list-radius - Border radius for the 'bordered'/'separated' variants
+ *
+ * @example
+ * ```html
+ * <ore-list variant="bordered">
+ *   <ore-list-item>Inbox</ore-list-item>
+ *   <ore-list-item>Drafts</ore-list-item>
+ * </ore-list>
+ * <ore-list selectable value="inbox">
+ *   <ore-list-item value="inbox">Inbox</ore-list-item>
+ *   <ore-list-item value="drafts">Drafts</ore-list-item>
+ * </ore-list>
+ * ```
+ */
+export declare const LIST_TAG: "ore-list";
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/content/list/list.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAOjD,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B;;;;OAIG;IACH,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG;IAC1B,+EAA+E;IAC/E,MAAM,EAAE;QAAE,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0IAA0I;IAC1I,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}