@vielzeug/refine 1.5.4 → 1.8.0

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"}