@sparklingopinions/sparkling-ui 0.5.0 → 0.7.0

package/dist/components/ContextMenu/ContextMenu.vue.d.ts

@@ -0,0 +1,44 @@
+import { type DropdownMenuAction, type DropdownMenuEntry, type MenuConfirmLabels } from '../internal/menu';
+export interface ContextMenuProps extends MenuConfirmLabels {
+    items?: DropdownMenuEntry[];
+    /** The menu's accessible name, e.g. "Post actions". */
+    label?: string;
+    /** Lets the browser's own menu through. */
+    disabled?: boolean;
+}
+declare var __VLS_17: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContextMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-item": (item: DropdownMenuAction & {
+        id?: string;
+    }) => any;
+    "update:open": (open: boolean) => any;
+    show: () => any;
+    hide: () => any;
+}, string, import("vue").PublicProps, Readonly<ContextMenuProps> & Readonly<{
+    "onClick-item"?: ((item: DropdownMenuAction & {
+        id?: string;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    label: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    id: string;
+    confirmTitle: string;
+    confirmMessage: string;
+    deleteLabel: string;
+    items: DropdownMenuEntry[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ContextMenu/ContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import e from "../internal/MenuItemContent.js";
+import { menuConfirmDefaults as t, menuContentClass as n, menuItemClass as r, menuSeparatorClass as i, useMenuSelect as a } from "../internal/menu.js";
+import { Fragment as o, createBlock as s, createElementBlock as c, createVNode as l, defineComponent as u, mergeDefaults as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, unref as g, withCtx as _ } from "vue";
+import { ContextMenuContent as v, ContextMenuItem as y, ContextMenuPortal as b, ContextMenuRoot as x, ContextMenuSeparator as S, ContextMenuTrigger as C } from "reka-ui";
+//#region src/components/ContextMenu/ContextMenu.vue?vue&type=script&setup=true&lang.ts
+var w = /*@__PURE__*/ u({
+	__name: "ContextMenu",
+	props: /*@__PURE__*/ d({
+		items: {},
+		label: {},
+		disabled: { type: Boolean },
+		id: {},
+		confirmTitle: {},
+		confirmMessage: {},
+		confirmLabel: {},
+		deleteLabel: {},
+		cancelLabel: {}
+	}, {
+		...t,
+		items: () => [],
+		label: void 0
+	}),
+	emits: [
+		"click-item",
+		"update:open",
+		"show",
+		"hide"
+	],
+	setup(t, { emit: u }) {
+		let d = t, w = u, T = a(d, (e) => w("click-item", e));
+		function E(e) {
+			w("update:open", e), w(e ? "show" : "hide");
+		}
+		function D(e) {
+			if (d.disabled || !(e.key === "F10" && e.shiftKey || e.key === "ContextMenu")) return;
+			e.preventDefault();
+			let t = e.currentTarget, n = e.target.getBoundingClientRect();
+			t.dispatchEvent(new MouseEvent("contextmenu", {
+				bubbles: !0,
+				cancelable: !0,
+				clientX: n.left + 8,
+				clientY: n.top + Math.min(n.height, 32)
+			}));
+		}
+		return (a, u) => (p(), s(g(x), {
+			modal: !1,
+			"onUpdate:open": E
+		}, {
+			default: _(() => [l(g(C), {
+				"as-child": "",
+				disabled: t.disabled,
+				onKeydown: D
+			}, {
+				default: _(() => [h(a.$slots, "default")]),
+				_: 3
+			}, 8, ["disabled"]), l(g(b), null, {
+				default: _(() => [l(g(v), {
+					"aria-label": t.label,
+					class: f([g(n), "min-w-48"]),
+					"collision-padding": 8
+				}, {
+					default: _(() => [(p(!0), c(o, null, m(t.items, (t, n) => (p(), c(o, { key: n }, [t.type === "separator" ? (p(), s(g(S), {
+						key: 0,
+						class: f(g(i))
+					}, null, 8, ["class"])) : (p(), s(g(y), {
+						key: 1,
+						class: f(g(r)),
+						onSelect: (e) => g(T)(t)
+					}, {
+						default: _(() => [l(e, { item: t }, null, 8, ["item"])]),
+						_: 2
+					}, 1032, ["class", "onSelect"]))], 64))), 128))]),
+					_: 1
+				}, 8, ["aria-label", "class"])]),
+				_: 1
+			})]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=ContextMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ContextMenu/ContextMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_normalizeClass","_createElementBlock","_Fragment","_renderList","MenuItemContent","MenuItemContent_default","ContextMenu_vue_vue_type_script_setup_true_lang_default","menuConfirmDefaults","__emit","props","__props","emit","select","useMenuSelect","item","onOpenChange","open","onKeydown","event","target","rect","openBlock","createBlock","unref","ContextMenuRoot","withCtx","createVNode","ContextMenuTrigger","renderSlot","_ctx","ContextMenuPortal","ContextMenuContent","normalizeClass","menuContentClass","createElementBlock","Fragment","renderList","index","ContextMenuSeparator","menuSeparatorClass","ContextMenuItem","menuItemClass"],"sources":["../../../src/components/ContextMenu/ContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuPortal,\n  ContextMenuRoot,\n  ContextMenuSeparator,\n  ContextMenuTrigger\n} from 'reka-ui'\n\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport interface ContextMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  /** The menu's accessible name, e.g. \"Post actions\". */\n  label?: string\n  /** Lets the browser's own menu through. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  label: undefined\n})\n\nconst emit = defineEmits<{\n  'click-item': [item: DropdownMenuAction & { id?: string }]\n  'update:open': [open: boolean]\n  show: []\n  hide: []\n}>()\n\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(open: boolean) {\n  emit('update:open', open)\n  if (open) emit('show')\n  else emit('hide')\n}\n\n// Shift+F10 and the Menu key open it at the focused element. Browsers fire `contextmenu` for these only on some\n// platforms, so the keys open it themselves, the way a right-click would, near the element's top left.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || !((event.key === 'F10' && event.shiftKey) || event.key === 'ContextMenu')) return\n  event.preventDefault()\n  const target = event.currentTarget as HTMLElement\n  const rect = (event.target as HTMLElement).getBoundingClientRect()\n  target.dispatchEvent(\n    new MouseEvent('contextmenu', {\n      bubbles: true,\n      cancelable: true,\n      clientX: rect.left + 8,\n      clientY: rect.top + Math.min(rect.height, 32)\n    })\n  )\n}\n</script>\n\n<!-- DropdownMenu's items at the pointer: right-click the default slot, or Shift+F10 or the Menu key while it has focus. -->\n<template>\n  <ContextMenuRoot :modal=\"false\" @update:open=\"onOpenChange\">\n    <ContextMenuTrigger as-child :disabled=\"disabled\" @keydown=\"onKeydown\">\n      <slot />\n    </ContextMenuTrigger>\n    <ContextMenuPortal>\n      <ContextMenuContent :aria-label=\"label\" :class=\"[menuContentClass, 'min-w-48']\" :collision-padding=\"8\">\n        <template v-for=\"(item, index) in items\" :key=\"index\">\n          <ContextMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n          <ContextMenuItem v-else :class=\"menuItemClass\" @select=\"select(item)\">\n            <MenuItemContent :item=\"item\" />\n          </ContextMenuItem>\n        </template>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,IAAMe,IAAQC,GAMRC,IAAOH,GAOPI,IAASC,EAAcJ,IAAQ,MAASE,EAAK,cAAcG,CAAI,CAAC;EAEtE,SAASC,EAAa,GAAe;GAEnC,AADAJ,EAAK,eAAeK,CAAI,GACdL,EAANK,IAAW,SACL,MAAM;EAClB;EAIA,SAASC,EAAU,GAAsB;GACvC,IAAIR,EAAM,YAAY,EAAGS,EAAM,QAAQ,SAASA,EAAM,YAAaA,EAAM,QAAQ,gBAAgB;GACjG,EAAM,eAAe;GACrB,IAAMC,IAASD,EAAM,eACfE,IAAQF,EAAM,OAAuB,sBAAsB;GACjE,EAAO,cACL,IAAI,WAAW,eAAe;IAC5B,SAAS;IACT,YAAY;IACZ,SAASE,EAAK,OAAO;IACrB,SAASA,EAAK,MAAM,KAAK,IAAIA,EAAK,QAAQ,EAAE;GAC9C,CAAC,CACH;EACF;E,kBAKE1B,EAAA,GAAAC,EAckBC,EAAA4B,CAAA,GAAA;GAdA,OAAO;GAAQ,iBAAaT;;GAC5C,SAAAlB,QAEqB,CAFrBC,EAEqBF,EAAA+B,CAAA,GAAA;IAFD,YAAA;IAAU,UAAUjB,EAAA;IAAoB;;IAC1D,SAAAb,QAAQ,CAARE,EAAQ8B,EAAA,QAAA,SAAA,C;;G,qBAEV/B,EASoBF,EAAAkC,CAAA,GAAA,MAAA;IARlB,SAAAjC,QAOqB,CAPrBC,EAOqBF,EAAAmC,CAAA,GAAA;KAPA,cAAYrB,EAAA;KAAQ,OAAKV,EAAA,CAAGJ,EAAAqC,CAAA,GAAgB,UAAA,CAAA;KAAgB,qBAAmB;;KACxF,SAAApC,QAA8B,EAAxCH,EAAA,EAAA,GAAAO,EAKWC,GAAA,MAAAC,EALuBO,EAAA,QAAhB,GAAM,OAAuBhB,EAAA,GAAAO,EAAAC,GAAA,EAAA,KAAAmC,EAAK,GAAA,CACtBvB,EAAK,SAAI,eAArCpB,EAAA,GAAAC,EAAqFC,EAAA0C,CAAA,GAAA;;MAA7B,OAAKtC,EAAEJ,EAAA2C,CAAA,CAAkB;K,2BACjF7C,EAAA,GAAAC,EAEkBC,EAAA4C,CAAA,GAAA;;MAFO,OAAKxC,EAAEJ,EAAA6C,CAAA,CAAa;MAAG,WAAM,MAAE7C,EAAAgB,CAAA,CAAM,CAACE,CAAI;;MACjE,SAAAjB,QAAgC,CAAhCC,EAAgCM,GAAA,EAAR,QAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C"}

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu.vue';
+export type { ContextMenuProps } from './ContextMenu.vue';

package/dist/components/DataList/DataList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.js","names":["_sfc_main","DataList_vue_vue_type_script_setup_true_lang_default","DataList_default"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */\n  selectable?: boolean\n  loading?: boolean\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  headingLevel: 3,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\ndefineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. */\n  leading?: (props: { item: T }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])]\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  if (event.key === 'ArrowDown' || event.key === 'j') rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (event.key === 'ArrowUp' || event.key === 'k') rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%']\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex flex-col overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface text-13 text-sui-ink\"\n  >\n    <slot v-if=\"isEmpty && $slots.empty\" name=\"empty\" />\n    <section v-else-if=\"loading\" :aria-busy=\"true\">\n      <div\n        v-for=\"(width, i) in skeletonWidths\"\n        :key=\"i\"\n        aria-hidden=\"true\"\n        class=\"flex h-10 items-center gap-2.5 pr-4 pl-1\"\n      >\n        <span class=\"w-6 shrink-0\" />\n        <Skeleton height=\"0.75rem\" :width=\"width\" />\n        <span class=\"flex-1\" />\n        <Skeleton height=\"0.75rem\" width=\"64px\" />\n      </div>\n    </section>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-labelledby=\"group.name ? `${id}-${group.id}-name` : undefined\"\n        class=\"border-t border-sui-line-subtle first:border-t-0\"\n      >\n        <header\n          v-if=\"group.name\"\n          class=\"sticky top-0 z-10 flex h-9 items-center gap-2 border-b border-sui-line-subtle bg-sui-sunken pr-2 pl-1.5\"\n        >\n          <button\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"collapsed.includes(group.id) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <slot :group=\"group\" name=\"group-leading\" />\n          <component\n            :is=\"`h${headingLevel}`\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 text-13 font-medium text-sui-ink\"\n          >\n            {{ group.name }}\n          </component>\n          <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', group.name)\"\n            class=\"ml-auto\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!collapsed.includes(group.id)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <li\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            class=\"group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n            :class=\"\n              selected.includes(idOf(item))\n                ? 'bg-sui-accent-wash'\n                : 'hover:bg-sui-sunken has-focus-visible:bg-sui-sunken'\n            \"\n            :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n          >\n            <span\n              v-if=\"selectable\"\n              class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n              :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n            >\n              <Checkbox\n                :aria-label=\"selectLabel\"\n                :model-value=\"selected.includes(idOf(item))\"\n                tabindex=\"-1\"\n                @update:model-value=\"toggle(item)\"\n              />\n            </span>\n            <div\n              class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n              :class=\"[selectable ? 'pl-2.5' : 'pl-4', onRowClick && 'cursor-pointer']\"\n              data-list-row\n              :role=\"onRowClick ? 'button' : undefined\"\n              :tabindex=\"interactive ? 0 : undefined\"\n              @click=\"onRowClick?.(item)\"\n              @keydown=\"onKeydown($event, item)\"\n            >\n              <span v-if=\"$slots.leading\" class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"leading\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n              </span>\n              <span v-if=\"$slots.meta\" class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"meta\" />\n              </span>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DataList.js","names":["_sfc_main","DataList_vue_vue_type_script_setup_true_lang_default","DataList_default"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */\n  selectable?: boolean\n  loading?: boolean\n  /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */\n  variant?: 'joined' | 'cards'\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  variant: 'joined',\n  headingLevel: 3,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\nconst slots = defineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */\n  'group-header'?: (props: { group: DataListGroup<T>; count: number; collapsed: boolean }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. */\n  leading?: (props: { item: T }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])]\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  if (event.key === 'ArrowDown' || event.key === 'j') rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (event.key === 'ArrowUp' || event.key === 'k') rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst cards = computed(() => props.variant === 'cards')\nconst card = 'overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface'\nconst custom = (group: DataListGroup<T>) => !!slots['group-header'] || group.header !== undefined\nconst groupName = (group: DataListGroup<T>) => group.label ?? group.name ?? ''\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%']\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div ref=\"root\" class=\"flex flex-col text-13 text-sui-ink\" :class=\"cards ? 'gap-3' : card\">\n    <div v-if=\"isEmpty && $slots.empty\" :class=\"cards && card\">\n      <slot name=\"empty\" />\n    </div>\n    <section v-else-if=\"loading\" :aria-busy=\"true\" :class=\"cards && card\">\n      <div\n        v-for=\"(width, i) in skeletonWidths\"\n        :key=\"i\"\n        aria-hidden=\"true\"\n        class=\"flex h-10 items-center gap-2.5 pr-4 pl-1\"\n      >\n        <span class=\"w-6 shrink-0\" />\n        <Skeleton height=\"0.75rem\" :width=\"width\" />\n        <span class=\"flex-1\" />\n        <Skeleton height=\"0.75rem\" width=\"64px\" />\n      </div>\n    </section>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-label=\"group.label\"\n        :aria-labelledby=\"!group.label && (group.name || custom(group)) ? `${id}-${group.id}-name` : undefined\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <header\n          v-if=\"group.name || custom(group)\"\n          class=\"flex h-9 items-center gap-2 border-b border-sui-line-subtle pr-2 pl-1.5\"\n          :class=\"cards ? 'bg-sui-surface' : 'sticky top-0 z-10 bg-sui-sunken'\"\n        >\n          <button\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"collapsed.includes(group.id) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <component\n            :is=\"`h${headingLevel}`\"\n            v-if=\"custom(group)\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink\"\n          >\n            <slot\n              :collapsed=\"collapsed.includes(group.id)\"\n              :count=\"group.count ?? group.items.length\"\n              :group=\"group\"\n              name=\"group-header\"\n              >{{ group.header }}</slot\n            >\n          </component>\n          <template v-else>\n            <slot :group=\"group\" name=\"group-leading\" />\n            <component\n              :is=\"`h${headingLevel}`\"\n              :id=\"`${id}-${group.id}-name`\"\n              class=\"m-0 text-13 font-medium text-sui-ink\"\n            >\n              {{ group.name }}\n            </component>\n            <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          </template>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\n            class=\"ml-auto\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!collapsed.includes(group.id)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <li\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            class=\"group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n            :class=\"\n              selected.includes(idOf(item))\n                ? 'bg-sui-accent-wash'\n                : 'hover:bg-sui-sunken has-focus-visible:bg-sui-sunken'\n            \"\n            :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n          >\n            <span\n              v-if=\"selectable\"\n              class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n              :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n            >\n              <Checkbox\n                :aria-label=\"selectLabel\"\n                :model-value=\"selected.includes(idOf(item))\"\n                tabindex=\"-1\"\n                @update:model-value=\"toggle(item)\"\n              />\n            </span>\n            <div\n              class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n              :class=\"[selectable ? 'pl-2.5' : 'pl-4', onRowClick && 'cursor-pointer']\"\n              data-list-row\n              :role=\"onRowClick ? 'button' : undefined\"\n              :tabindex=\"interactive ? 0 : undefined\"\n              @click=\"onRowClick?.(item)\"\n              @keydown=\"onKeydown($event, item)\"\n            >\n              <span v-if=\"$slots.leading\" class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"leading\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n              </span>\n              <span v-if=\"$slots.meta\" class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"meta\" />\n              </span>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/DataList/DataList.vue.d.ts

@@ -6,6 +6,8 @@ export interface DataListProps<T> {
     /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */
     selectable?: boolean;
     loading?: boolean;
+    /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */
+    variant?: 'joined' | 'cards';
     /** The group headings' level, to fit the page's outline. */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     /** Makes rows open on click and Enter (`@row-click`). */
@@ -35,6 +37,12 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         'group-leading'?: (props: {
             group: DataListGroup<T>;
         }) => unknown;
+        /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */
+        'group-header'?: (props: {
+            group: DataListGroup<T>;
+            count: number;
+            collapsed: boolean;
+        }) => unknown;
         /** Small marks before an item's title: a status icon, an id, an avatar. */
         leading?: (props: {
             item: T;

package/dist/components/DataList/DataList.vue_vue_type_script_setup_true_lang.js

@@ -1,36 +1,31 @@
 import e from "../Skeleton/Skeleton.js";
 import t from "../Checkbox/Checkbox.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, useModel as x, useTemplateRef as S, vShow as C, withCtx as w, withDirectives as T } from "vue";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, useModel as x, useSlots as S, useTemplateRef as C, vShow as w, withCtx as T, withDirectives as E } from "vue";
 //#region src/components/DataList/DataList.vue?vue&type=script&setup=true&lang.ts
-var E = {
-	key: 1,
-	"aria-busy": !0
-}, D = ["aria-labelledby"], O = {
-	key: 0,
-	class: "sticky top-0 z-10 flex h-9 items-center gap-2 border-b border-sui-line-subtle bg-sui-sunken pr-2 pl-1.5"
-}, k = [
+var D = ["aria-label", "aria-labelledby"], O = [
 	"aria-controls",
 	"aria-expanded",
 	"aria-label",
 	"onClick"
-], A = { class: "text-13 text-sui-ink-muted tabular-nums" }, j = ["aria-label", "onClick"], M = ["id"], N = [
+], k = { class: "text-13 text-sui-ink-muted tabular-nums" }, A = ["aria-label", "onClick"], j = ["id"], M = [
 	"role",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], P = {
+], N = {
 	key: 0,
 	class: "flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums"
-}, F = { class: "min-w-0 flex-1 truncate font-medium text-sui-ink" }, I = {
+}, P = { class: "min-w-0 flex-1 truncate font-medium text-sui-ink" }, F = {
 	key: 1,
 	class: "flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums"
-}, L = "flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset", R = /*@__PURE__*/ u({
+}, I = "overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface", L = "flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset", R = /*@__PURE__*/ u({
 	__name: "DataList",
 	props: /*@__PURE__*/ d({
 		groups: {},
 		rowKey: { default: "id" },
 		selectable: { type: Boolean },
 		loading: { type: Boolean },
+		variant: { default: "joined" },
 		headingLevel: { default: 3 },
 		onRowClick: {
 			type: Function,
@@ -52,25 +47,25 @@ var E = {
 	}),
 	emits: ["update:selected", "update:collapsed"],
 	setup(u) {
-		let d = u, R = x(u, "selected"), z = x(u, "collapsed"), B = b(), V = S("root"), H = (e) => e[d.rowKey ?? "id"], U = r(() => !!d.onRowClick || d.selectable), W = r(() => !d.loading && d.groups.every((e) => e.items.length === 0));
-		function G(e) {
+		let d = u, R = x(u, "selected"), z = x(u, "collapsed"), B = S(), V = b(), H = C("root"), U = (e) => e[d.rowKey ?? "id"], W = r(() => !!d.onRowClick || d.selectable), G = r(() => !d.loading && d.groups.every((e) => e.items.length === 0));
+		function K(e) {
 			z.value = z.value.includes(e) ? z.value.filter((t) => t !== e) : [...z.value, e];
 		}
-		function K(e) {
-			let t = H(e);
+		function q(e) {
+			let t = U(e);
 			R.value = R.value.includes(t) ? R.value.filter((e) => e !== t) : [...R.value, t];
 		}
-		function q(e, t) {
+		function J(e, t) {
 			if (e.target !== e.currentTarget || e.metaKey || e.ctrlKey || e.altKey) return;
-			let n = [...V.value?.querySelectorAll("[data-list-row]") ?? []], r = n.indexOf(e.currentTarget);
+			let n = [...H.value?.querySelectorAll("[data-list-row]") ?? []], r = n.indexOf(e.currentTarget);
 			if (e.key === "ArrowDown" || e.key === "j") n[Math.min(n.length - 1, r + 1)]?.focus();
 			else if (e.key === "ArrowUp" || e.key === "k") n[Math.max(0, r - 1)]?.focus();
-			else if (e.key === "x" && d.selectable) K(t);
+			else if (e.key === "x" && d.selectable) q(t);
 			else if ((e.key === "Enter" || e.key === " ") && d.onRowClick) d.onRowClick(t);
 			else return;
 			e.preventDefault();
 		}
-		let J = [
+		let Y = r(() => d.variant === "cards"), X = (e) => !!B["group-header"] || e.header !== void 0, Z = (e) => e.label ?? e.name ?? "", Q = [
 			"42%",
 			"58%",
 			"35%",
@@ -79,9 +74,16 @@ var E = {
 		];
 		return (r, d) => (m(), o("div", {
 			ref_key: "root",
-			ref: V,
-			class: "flex flex-col overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface text-13 text-sui-ink"
-		}, [W.value && r.$slots.empty ? g(r.$slots, "empty", {}, void 0, void 0, 0) : u.loading ? (m(), o("section", E, [(m(), o(n, null, h(J, (t, n) => s("div", {
+			ref: H,
+			class: f(["flex flex-col text-13 text-sui-ink", Y.value ? "gap-3" : I])
+		}, [G.value && r.$slots.empty ? (m(), o("div", {
+			key: 0,
+			class: f(Y.value && I)
+		}, [g(r.$slots, "empty")], 2)) : u.loading ? (m(), o("section", {
+			key: 1,
+			"aria-busy": !0,
+			class: f(Y.value && I)
+		}, [(m(), o(n, null, h(Q, (t, n) => s("div", {
 			key: n,
 			"aria-hidden": "true",
 			class: "flex h-10 items-center gap-2.5 pr-4 pl-1"
@@ -96,18 +98,22 @@ var E = {
 				height: "0.75rem",
 				width: "64px"
 			})
-		])), 64))])) : (m(!0), o(n, { key: 2 }, h(u.groups, (e) => (m(), o("section", {
+		])), 64))], 2)) : (m(!0), o(n, { key: 2 }, h(u.groups, (e) => (m(), o("section", {
 			key: e.id,
-			"aria-labelledby": e.name ? `${y(B)}-${e.id}-name` : void 0,
-			class: "border-t border-sui-line-subtle first:border-t-0"
-		}, [e.name ? (m(), o("header", O, [
+			"aria-label": e.label,
+			"aria-labelledby": !e.label && (e.name || X(e)) ? `${y(V)}-${e.id}-name` : void 0,
+			class: f(Y.value ? I : "border-t border-sui-line-subtle first:border-t-0")
+		}, [e.name || X(e) ? (m(), o("header", {
+			key: 0,
+			class: f(["flex h-9 items-center gap-2 border-b border-sui-line-subtle pr-2 pl-1.5", Y.value ? "bg-sui-surface" : "sticky top-0 z-10 bg-sui-sunken"])
+		}, [
 			s("button", {
-				"aria-controls": `${y(B)}-${e.id}`,
+				"aria-controls": `${y(V)}-${e.id}`,
 				"aria-expanded": !z.value.includes(e.id),
 				"aria-label": z.value.includes(e.id) ? u.expandLabel : u.collapseLabel,
 				class: f(L),
 				type: "button",
-				onClick: (t) => G(e.id)
+				onClick: (t) => K(e.id)
 			}, [(m(), o("svg", {
 				"aria-hidden": "true",
 				class: f(["size-3 fill-none stroke-current transition-transform duration-150", z.value.includes(e.id) && "-rotate-90"]),
@@ -115,19 +121,32 @@ var E = {
 				"stroke-linejoin": "round",
 				"stroke-width": "1.5",
 				viewBox: "0 0 12 12"
-			}, [...d[2] ||= [s("path", { d: "M3 4.5 6 7.5l3-3" }, null, -1)]], 2))], 8, k),
-			g(r.$slots, "group-leading", { group: e }),
-			(m(), i(_(`h${u.headingLevel}`), {
-				id: `${y(B)}-${e.id}-name`,
-				class: "m-0 text-13 font-medium text-sui-ink"
+			}, [...d[2] ||= [s("path", { d: "M3 4.5 6 7.5l3-3" }, null, -1)]], 2))], 8, O),
+			X(e) ? (m(), i(_(`h${u.headingLevel}`), {
+				key: 0,
+				id: `${y(V)}-${e.id}-name`,
+				class: "m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink"
 			}, {
-				default: w(() => [c(v(e.name), 1)]),
+				default: T(() => [g(r.$slots, "group-header", {
+					collapsed: z.value.includes(e.id),
+					count: e.count ?? e.items.length,
+					group: e
+				}, () => [c(v(e.header), 1)])]),
 				_: 2
-			}, 1032, ["id"])),
-			s("span", A, v(e.count ?? e.items.length), 1),
+			}, 1032, ["id"])) : (m(), o(n, { key: 1 }, [
+				g(r.$slots, "group-leading", { group: e }),
+				(m(), i(_(`h${u.headingLevel}`), {
+					id: `${y(V)}-${e.id}-name`,
+					class: "m-0 text-13 font-medium text-sui-ink"
+				}, {
+					default: T(() => [c(v(e.name), 1)]),
+					_: 2
+				}, 1032, ["id"])),
+				s("span", k, v(e.count ?? e.items.length), 1)
+			], 64)),
 			u.onNew ? (m(), o("button", {
-				key: 0,
-				"aria-label": u.newLabel.replace("{group}", e.name),
+				key: 2,
+				"aria-label": u.newLabel.replace("{group}", Z(e)),
 				class: f(["ml-auto", L]),
 				type: "button",
 				onClick: (t) => u.onNew(e)
@@ -137,22 +156,22 @@ var E = {
 				"stroke-linecap": "round",
 				"stroke-width": "1.5",
 				viewBox: "0 0 14 14"
-			}, [s("path", { d: "M7 2.5v9M2.5 7h9" })], -1)]], 8, j)) : a("", !0)
-		])) : a("", !0), T(s("ul", {
-			id: `${y(B)}-${e.id}`,
+			}, [s("path", { d: "M7 2.5v9M2.5 7h9" })], -1)]], 8, A)) : a("", !0)
+		], 2)) : a("", !0), E(s("ul", {
+			id: `${y(V)}-${e.id}`,
 			class: "m-0 list-none p-0"
 		}, [(m(!0), o(n, null, h(e.items, (e) => (m(), o("li", {
-			key: H(e),
-			class: f(["group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset", R.value.includes(H(e)) ? "bg-sui-accent-wash" : "hover:bg-sui-sunken has-focus-visible:bg-sui-sunken"]),
+			key: U(e),
+			class: f(["group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset", R.value.includes(U(e)) ? "bg-sui-accent-wash" : "hover:bg-sui-sunken has-focus-visible:bg-sui-sunken"]),
 			style: p(e.depth ? { paddingLeft: `${e.depth * 22}px` } : void 0)
 		}, [u.selectable ? (m(), o("span", {
 			key: 0,
 			class: f(["flex w-7 shrink-0 justify-end transition-opacity duration-100", R.value.length ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"])
 		}, [l(t, {
 			"aria-label": u.selectLabel,
-			"model-value": R.value.includes(H(e)),
+			"model-value": R.value.includes(U(e)),
 			tabindex: "-1",
-			"onUpdate:modelValue": (t) => K(e)
+			"onUpdate:modelValue": (t) => q(e)
 		}, null, 8, [
 			"aria-label",
 			"model-value",
@@ -161,14 +180,14 @@ var E = {
 			class: f(["flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden", [u.selectable ? "pl-2.5" : "pl-4", u.onRowClick && "cursor-pointer"]]),
 			"data-list-row": "",
 			role: u.onRowClick ? "button" : void 0,
-			tabindex: U.value ? 0 : void 0,
+			tabindex: W.value ? 0 : void 0,
 			onClick: (t) => u.onRowClick?.(e),
-			onKeydown: (t) => q(t, e)
+			onKeydown: (t) => J(t, e)
 		}, [
-			r.$slots.leading ? (m(), o("span", P, [g(r.$slots, "leading", { item: e })])) : a("", !0),
-			s("span", F, [g(r.$slots, "title", { item: e }, () => [c(v(e.name), 1)])]),
-			r.$slots.meta ? (m(), o("span", I, [g(r.$slots, "meta", { item: e })])) : a("", !0)
-		], 42, N)], 6))), 128))], 8, M), [[C, !z.value.includes(e.id)]])], 8, D))), 128))], 512));
+			r.$slots.leading ? (m(), o("span", N, [g(r.$slots, "leading", { item: e })])) : a("", !0),
+			s("span", P, [g(r.$slots, "title", { item: e }, () => [c(v(e.name), 1)])]),
+			r.$slots.meta ? (m(), o("span", F, [g(r.$slots, "meta", { item: e })])) : a("", !0)
+		], 42, M)], 6))), 128))], 8, j), [[w, !z.value.includes(e.id)]])], 10, D))), 128))], 2));
 	}
 });
 //#endregion

package/dist/components/DataList/DataList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createElementBlock","_renderSlot","_Fragment","_renderList","_createElementVNode","_createVNode","Skeleton","_unref","_normalizeClass","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_withDirectives","_normalizeStyle","Checkbox","_vShow","Skeleton_default","Checkbox_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","iconButton","DataList_vue_vue_type_script_setup_true_lang_default","\"selected\"","\"selectedModifiers\"","\"collapsed\"","\"collapsedModifiers\"","props","__props","selected","useModel","collapsed","id","useId","root","useTemplateRef","idOf","item","interactive","computed","isEmpty","group","toggleGroup","groupId","x","toggle","key","onKeydown","event","rows","i","skeletonWidths","openBlock","createElementBlock","_ctx","renderSlot","Fragment","renderList","createElementVNode","_cache","createVNode","unref","normalizeClass","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","createCommentVNode","withDirectives","normalizeStyle","$event","vShow"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */\n  selectable?: boolean\n  loading?: boolean\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  headingLevel: 3,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\ndefineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. */\n  leading?: (props: { item: T }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])]\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  if (event.key === 'ArrowDown' || event.key === 'j') rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (event.key === 'ArrowUp' || event.key === 'k') rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%']\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex flex-col overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface text-13 text-sui-ink\"\n  >\n    <slot v-if=\"isEmpty && $slots.empty\" name=\"empty\" />\n    <section v-else-if=\"loading\" :aria-busy=\"true\">\n      <div\n        v-for=\"(width, i) in skeletonWidths\"\n        :key=\"i\"\n        aria-hidden=\"true\"\n        class=\"flex h-10 items-center gap-2.5 pr-4 pl-1\"\n      >\n        <span class=\"w-6 shrink-0\" />\n        <Skeleton height=\"0.75rem\" :width=\"width\" />\n        <span class=\"flex-1\" />\n        <Skeleton height=\"0.75rem\" width=\"64px\" />\n      </div>\n    </section>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-labelledby=\"group.name ? `${id}-${group.id}-name` : undefined\"\n        class=\"border-t border-sui-line-subtle first:border-t-0\"\n      >\n        <header\n          v-if=\"group.name\"\n          class=\"sticky top-0 z-10 flex h-9 items-center gap-2 border-b border-sui-line-subtle bg-sui-sunken pr-2 pl-1.5\"\n        >\n          <button\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"collapsed.includes(group.id) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <slot :group=\"group\" name=\"group-leading\" />\n          <component\n            :is=\"`h${headingLevel}`\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 text-13 font-medium text-sui-ink\"\n          >\n            {{ group.name }}\n          </component>\n          <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', group.name)\"\n            class=\"ml-auto\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!collapsed.includes(group.id)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <li\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            class=\"group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n            :class=\"\n              selected.includes(idOf(item))\n                ? 'bg-sui-accent-wash'\n                : 'hover:bg-sui-sunken has-focus-visible:bg-sui-sunken'\n            \"\n            :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n          >\n            <span\n              v-if=\"selectable\"\n              class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n              :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n            >\n              <Checkbox\n                :aria-label=\"selectLabel\"\n                :model-value=\"selected.includes(idOf(item))\"\n                tabindex=\"-1\"\n                @update:model-value=\"toggle(item)\"\n              />\n            </span>\n            <div\n              class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n              :class=\"[selectable ? 'pl-2.5' : 'pl-4', onRowClick && 'cursor-pointer']\"\n              data-list-row\n              :role=\"onRowClick ? 'button' : undefined\"\n              :tabindex=\"interactive ? 0 : undefined\"\n              @click=\"onRowClick?.(item)\"\n              @keydown=\"onKeydown($event, item)\"\n            >\n              <span v-if=\"$slots.leading\" class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"leading\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n              </span>\n              <span v-if=\"$slots.meta\" class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"meta\" />\n              </span>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DataList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_Fragment","_renderList","_createElementVNode","_createVNode","Skeleton","_unref","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_withDirectives","_normalizeStyle","Checkbox","_vShow","Skeleton_default","Checkbox_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","card","iconButton","DataList_vue_vue_type_script_setup_true_lang_default","\"selected\"","\"selectedModifiers\"","\"collapsed\"","\"collapsedModifiers\"","props","__props","selected","useModel","collapsed","slots","useSlots","id","useId","root","useTemplateRef","idOf","item","interactive","computed","isEmpty","group","toggleGroup","groupId","x","toggle","key","onKeydown","event","rows","i","cards","custom","groupName","skeletonWidths","openBlock","createElementBlock","normalizeClass","_ctx","renderSlot","Fragment","renderList","createElementVNode","_cache","createVNode","unref","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","createCommentVNode","withDirectives","normalizeStyle","$event","vShow"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */\n  selectable?: boolean\n  loading?: boolean\n  /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */\n  variant?: 'joined' | 'cards'\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  variant: 'joined',\n  headingLevel: 3,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\nconst slots = defineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */\n  'group-header'?: (props: { group: DataListGroup<T>; count: number; collapsed: boolean }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. */\n  leading?: (props: { item: T }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])]\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  if (event.key === 'ArrowDown' || event.key === 'j') rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (event.key === 'ArrowUp' || event.key === 'k') rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst cards = computed(() => props.variant === 'cards')\nconst card = 'overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface'\nconst custom = (group: DataListGroup<T>) => !!slots['group-header'] || group.header !== undefined\nconst groupName = (group: DataListGroup<T>) => group.label ?? group.name ?? ''\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%']\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div ref=\"root\" class=\"flex flex-col text-13 text-sui-ink\" :class=\"cards ? 'gap-3' : card\">\n    <div v-if=\"isEmpty && $slots.empty\" :class=\"cards && card\">\n      <slot name=\"empty\" />\n    </div>\n    <section v-else-if=\"loading\" :aria-busy=\"true\" :class=\"cards && card\">\n      <div\n        v-for=\"(width, i) in skeletonWidths\"\n        :key=\"i\"\n        aria-hidden=\"true\"\n        class=\"flex h-10 items-center gap-2.5 pr-4 pl-1\"\n      >\n        <span class=\"w-6 shrink-0\" />\n        <Skeleton height=\"0.75rem\" :width=\"width\" />\n        <span class=\"flex-1\" />\n        <Skeleton height=\"0.75rem\" width=\"64px\" />\n      </div>\n    </section>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-label=\"group.label\"\n        :aria-labelledby=\"!group.label && (group.name || custom(group)) ? `${id}-${group.id}-name` : undefined\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <header\n          v-if=\"group.name || custom(group)\"\n          class=\"flex h-9 items-center gap-2 border-b border-sui-line-subtle pr-2 pl-1.5\"\n          :class=\"cards ? 'bg-sui-surface' : 'sticky top-0 z-10 bg-sui-sunken'\"\n        >\n          <button\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"collapsed.includes(group.id) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <component\n            :is=\"`h${headingLevel}`\"\n            v-if=\"custom(group)\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink\"\n          >\n            <slot\n              :collapsed=\"collapsed.includes(group.id)\"\n              :count=\"group.count ?? group.items.length\"\n              :group=\"group\"\n              name=\"group-header\"\n              >{{ group.header }}</slot\n            >\n          </component>\n          <template v-else>\n            <slot :group=\"group\" name=\"group-leading\" />\n            <component\n              :is=\"`h${headingLevel}`\"\n              :id=\"`${id}-${group.id}-name`\"\n              class=\"m-0 text-13 font-medium text-sui-ink\"\n            >\n              {{ group.name }}\n            </component>\n            <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          </template>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\n            class=\"ml-auto\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!collapsed.includes(group.id)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <li\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            class=\"group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n            :class=\"\n              selected.includes(idOf(item))\n                ? 'bg-sui-accent-wash'\n                : 'hover:bg-sui-sunken has-focus-visible:bg-sui-sunken'\n            \"\n            :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n          >\n            <span\n              v-if=\"selectable\"\n              class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n              :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n            >\n              <Checkbox\n                :aria-label=\"selectLabel\"\n                :model-value=\"selected.includes(idOf(item))\"\n                tabindex=\"-1\"\n                @update:model-value=\"toggle(item)\"\n              />\n            </span>\n            <div\n              class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n              :class=\"[selectable ? 'pl-2.5' : 'pl-4', onRowClick && 'cursor-pointer']\"\n              data-list-row\n              :role=\"onRowClick ? 'button' : undefined\"\n              :tabindex=\"interactive ? 0 : undefined\"\n              @click=\"onRowClick?.(item)\"\n              @keydown=\"onKeydown($event, item)\"\n            >\n              <span v-if=\"$slots.leading\" class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"leading\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n              </span>\n              <span v-if=\"$slots.meta\" class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"meta\" />\n              </span>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/DataList/types.d.ts

@@ -1,7 +1,11 @@
 export interface DataListGroup<T> {
     id: string;
-    /** Without a name the group has no header. */
+    /** Without a name (or a `header`) the group has no header. */
     name?: string;
+    /** Text in place of the name and count; for richer content, the `group-header` slot. Give such a group a `label`. */
+    header?: string;
+    /** The group's accessible name, when its header isn't just its name. */
+    label?: string;
     /** Shown instead of the number of items, e.g. a total beyond the loaded page. */
     count?: number;
     items: T[];

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["_sfc_main","Dialog_vue_vue_type_script_setup_true_lang_default","Dialog_default"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n      >\n        <DialogContent\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n              <slot name=\"title\">{{ title }}</slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Dialog.js","names":["_sfc_main","Dialog_vue_vue_type_script_setup_true_lang_default","Dialog_default"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, useSlots, useTemplateRef, watch } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\nimport { useSheetDrag } from './useSheetDrag'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n  /** sheet: a bottom sheet with a grab handle, drag to dismiss and a full-width confirm. auto: a sheet on a viewport\n   *  narrower than `sheetBelow`, a dialog otherwise. A sheet draws no Cancel and no band: dragging it down, the\n   *  scrim and Escape cancel. */\n  presentation?: 'dialog' | 'sheet' | 'auto'\n  /** The width in px below which `auto` is a sheet. */\n  sheetBelow?: number\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined,\n  presentation: 'dialog',\n  sheetBelow: 640\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst narrow = ref(false)\nlet query: MediaQueryList | undefined\nconst onQuery = () => (narrow.value = !!query?.matches)\nwatch(\n  () => [props.presentation, props.sheetBelow] as const,\n  ([presentation, below]) => {\n    query?.removeEventListener('change', onQuery)\n    query =\n      presentation === 'auto' && typeof window !== 'undefined'\n        ? window.matchMedia(`(max-width: ${below - 0.02}px)`)\n        : undefined\n    query?.addEventListener('change', onQuery)\n    onQuery()\n  },\n  { immediate: true }\n)\nonBeforeUnmount(() => query?.removeEventListener('change', onQuery))\n\nconst sheet = computed(() => props.presentation === 'sheet' || (props.presentation === 'auto' && narrow.value))\nconst panel = useTemplateRef<InstanceType<typeof DialogContent>>('panel')\nconst drag = useSheetDrag(\n  computed(() => panel.value?.$el as HTMLElement | undefined),\n  () => cancel()\n)\nwatch(open, (isOpen) => isOpen && drag.reset())\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\n// A sheet closes on a tap on the scrim; a dialog only from its buttons and Escape.\nfunction onOutside(event: Event) {\n  if (sheet.value) emit('cancel')\n  else event.preventDefault()\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band; or\n     a bottom sheet. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n        :class=\"sheet ? 'items-end' : 'items-center'\"\n      >\n        <DialogContent\n          v-if=\"sheet\"\n          ref=\"panel\"\n          :aria-describedby=\"undefined\"\n          class=\"relative flex max-h-[calc(100dvh-1.5rem)] w-full flex-col rounded-t-(--sui-radius-sheet) bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-sheet-out data-[state=open]:animate-sui-sheet-in motion-reduce:animate-none motion-reduce:transition-none\"\n          :class=\"!drag.dragging.value && 'transition-transform duration-[250ms] ease-[cubic-bezier(0.32,0.72,0,1)]'\"\n          :style=\"drag.style.value\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside=\"onOutside\"\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <!-- Without a close button, keyboard and screen-reader users still get one: it shows when focused. -->\n          <button\n            v-if=\"!closable\"\n            class=\"pointer-events-none absolute top-2 right-3 h-7 rounded-md bg-sui-sunken px-2.5 text-13 font-medium text-sui-ink opacity-0 outline-hidden focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"cancel\"\n          >\n            {{ closeLabel }}\n          </button>\n          <div class=\"shrink-0 cursor-grab touch-none pt-2\" data-modal-header v-bind=\"drag.handlers\">\n            <span aria-hidden=\"true\" class=\"mx-auto block h-1 w-9 rounded-full bg-sui-mark-faint\" />\n            <div v-if=\"!headerless\" class=\"flex min-h-11 items-center justify-between gap-3 pt-2 pr-4 pb-1 pl-5\">\n              <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n                <slot name=\"title\">{{ title }}</slot>\n              </DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n          </div>\n\n          <div\n            class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-5 text-sm leading-5 text-sui-ink-emphasis\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 flex-col gap-2.5 border-t border-sui-line-subtle bg-sui-surface px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <div v-if=\"$slots['footer-start'] || hint\" class=\"flex min-w-0 items-center justify-center gap-2\">\n                <slot name=\"footer-start\" />\n                <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              </div>\n              <Button\n                class=\"w-full\"\n                :disabled=\"confirmDisabled\"\n                size=\"lg\"\n                type=\"button\"\n                :variant=\"confirmVariant\"\n                @click=\"emit('confirm')\"\n              >\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n        <DialogContent\n          v-else\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n              <slot name=\"title\">{{ title }}</slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}