@sparklingopinions/sparkling-ui 0.7.0 → 0.8.0

package/README.md

@@ -67,7 +67,7 @@ The package is published to npm as `@sparklingopinions/sparkling-ui`. Apps insta
    import { Button } from 'sparkling-ui'
    ```
 
-5. `Icon` draws the library's set of 134 icons by name: `<Icon name="users" color="ink-muted" />`. Older names (`people`, `companies`, `dot-vertical`...) resolve as aliases, and `iconNames` lists the set. To add icons or replace some of the set, register a resolver once, before mounting; names it returns a component for win. With SVG files imported as components (e.g. `vite-svg-loader`):
+5. `Icon` draws the library's set of 135 icons by name: `<Icon name="users" color="ink-muted" />`. Older names (`people`, `companies`, `dot-vertical`...) resolve as aliases, and `iconNames` lists the set. To add icons or replace some of the set, register a resolver once, before mounting; names it returns a component for win. With SVG files imported as components (e.g. `vite-svg-loader`):
 
    ```ts
    import { type Component, defineAsyncComponent } from 'vue'
@@ -83,7 +83,7 @@ The package is published to npm as `@sparklingopinions/sparkling-ui`. Apps insta
 
 6. For light and dark, call `initColorMode()` once before mounting (it sets `data-mode` on `<html>` from the saved choice or the system's); then `useColorMode()` gives `mode`, `resolved`, `isDark`, `setMode` and `toggle`, and `useForceLightMode()` keeps a page light while it's mounted.
 
-7. For toasts, mount one `<Toaster />` near the app root, then call `toast.info('Draft saved')`, `toast.success(...)` or `toast.error(...)` anywhere, with `{ detail, life, closable }` as options.
+7. For toasts, mount one `<Toaster />` near the app root, then call `toast.info('Draft saved')`, `toast.success(...)` or `toast.error(...)` anywhere, with `{ detail, life, closable }` as options. `position` and the `--sui-toaster-inset-*` tokens move them clear of your own sidebar or bottom bar.
 
 8. To use `useConfirm`, mount one `<AlertDialog />` near the app root (it takes default `confirm-label` and `cancel-label` for translation). Then anywhere:
 

package/dist/aliases.d.ts

@@ -189,6 +189,9 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         }) => unknown;
         leading?: (props: {
             item: T;
+            selected: boolean;
+            selecting: boolean;
+            toggle: () => void;
         }) => unknown;
         title?: (props: {
             item: T;
@@ -196,17 +199,28 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         meta?: (props: {
             item: T;
         }) => unknown;
+        'group-actions'?: (props: {
+            group: DataListGroup<T>;
+        }) => unknown;
         empty?: () => unknown;
     };
-    emit: ((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void);
+    emit: ((evt: "context-item", action: DropdownMenuAction, item: T) => void) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void));
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & {
         groups: DataListGroup<T>[];
         rowKey?: (keyof T & string) | undefined;
         selectable?: boolean | undefined;
+        checkboxPlacement?: "gutter" | "leading" | undefined;
         loading?: boolean | undefined;
         variant?: "joined" | "cards" | undefined;
         headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+        groupHeaderTone?: "sunken" | "surface" | "canvas" | undefined;
+        groupHeaderHeight?: number | undefined;
+        collapsible?: boolean | undefined;
+        rowHeight?: number | undefined;
+        dividers?: boolean | undefined;
+        contextItems?: ((item: T) => DropdownMenuEntry[]) | undefined;
+        contextLabel?: string | undefined;
         onRowClick?: ((item: T) => void) | undefined;
         onNew?: ((group: DataListGroup<T>) => void) | undefined;
         newLabel?: string | undefined;
@@ -215,6 +229,7 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         selectLabel?: string | undefined;
         selected?: unknown[] | undefined;
         collapsed?: string[] | undefined;
+        "onContext-item"?: ((action: DropdownMenuAction, item: T) => any) | undefined;
         "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
         "onUpdate:collapsed"?: ((value: string[]) => any) | undefined;
     } & (typeof globalThis extends {
@@ -233,6 +248,9 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         }) => unknown;
         leading?: (props: {
             item: T;
+            selected: boolean;
+            selecting: boolean;
+            toggle: () => void;
         }) => unknown;
         title?: (props: {
             item: T;
@@ -240,9 +258,12 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         meta?: (props: {
             item: T;
         }) => unknown;
+        'group-actions'?: (props: {
+            group: DataListGroup<T>;
+        }) => unknown;
         empty?: () => unknown;
     };
-    emit: ((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void);
+    emit: ((evt: "context-item", action: DropdownMenuAction, item: T) => void) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_sfc_main","Button_vue_vue_type_script_setup_true_lang_default","Button_default"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant =\n  'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start'\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger',\n  // For inverse grounds: toasts, dark bands.\n  'ghost-inverse':\n    'border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50',\n  props.variant === 'ghost-inverse' ? 'focus-visible:sui-ring-inverse' : 'focus-visible:sui-ring',\n  variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Button.js","names":["_sfc_main","Button_vue_vue_type_script_setup_true_lang_default","Button_default"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant =\n  'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n  /** A toggle's state, as `aria-pressed`. Drawn on for ghost, ghost-inverse and secondary; leave it unset on a plain\n   *  button. */\n  pressed?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start',\n  pressed: undefined\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger',\n  // For inverse grounds: toasts, dark bands.\n  'ghost-inverse':\n    'border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse'\n}\n\n// On is a step past hover, and hovering it deepens it again. On inverse, 22% is as deep as white text keeps 4.5:1.\nconst pressedVariants: Partial<Record<ButtonVariant, string>> = {\n  secondary:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-accent-bright not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  'ghost-inverse':\n    'border border-transparent bg-sui-on-inverse/[0.18] text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.22] [&_svg]:stroke-sui-on-inverse'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50',\n  props.variant === 'ghost-inverse' ? 'focus-visible:sui-ring-inverse' : 'focus-visible:sui-ring',\n  (props.pressed && pressedVariants[props.variant]) || variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":""}

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

@@ -11,6 +11,9 @@ export interface ButtonProps extends PrimitiveProps {
     /** Where the icon sits next to the label; it's spaced from the text on the other side. */
     iconPosition?: 'start' | 'end';
     disabled?: boolean;
+    /** A toggle's state, as `aria-pressed`. Drawn on for ghost, ghost-inverse and secondary; leave it unset on a plain
+     *  button. */
+    pressed?: boolean;
 }
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
@@ -20,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {},
     variant: ButtonVariant;
     size: ButtonSize;
     iconPosition: "start" | "end";
+    pressed: boolean;
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/Button/Button.vue_vue_type_script_setup_true_lang.js

@@ -10,6 +10,10 @@ var l = /*@__PURE__*/ n({
 		iconOnly: { type: Boolean },
 		iconPosition: { default: "start" },
 		disabled: { type: Boolean },
+		pressed: {
+			type: Boolean,
+			default: void 0
+		},
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -24,42 +28,48 @@ var l = /*@__PURE__*/ n({
 			"danger-outline": "border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger",
 			"ghost-inverse": "border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse"
 		}, d = {
+			secondary: "border border-sui-accent-line bg-sui-accent-wash text-sui-accent shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-accent-bright not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent",
+			ghost: "border border-transparent bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent",
+			"ghost-inverse": "border border-transparent bg-sui-on-inverse/[0.18] text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.22] [&_svg]:stroke-sui-on-inverse"
+		}, f = {
 			xs: "h-6",
 			sm: "h-7",
 			md: "h-(--sui-button-height)",
 			lg: "h-12"
-		}, f = {
+		}, p = {
 			xs: "px-2",
 			sm: "px-2.5",
 			md: "px-(--sui-button-padding-x)",
 			lg: "px-(--sui-button-padding-x)"
-		}, p = {
+		}, m = {
 			xs: "text-xs",
 			sm: "text-sm",
 			md: "text-(length:--sui-button-text) leading-5",
 			lg: "text-(length:--sui-button-text) leading-5"
-		}, m = e(() => [
+		}, h = e(() => [
 			"flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50",
 			l.variant === "ghost-inverse" ? "focus-visible:sui-ring-inverse" : "focus-visible:sui-ring",
-			u[l.variant],
-			d[l.size],
-			p[l.size],
-			l.iconOnly ? "aspect-square px-0" : f[l.size],
+			l.pressed && d[l.variant] || u[l.variant],
+			f[l.size],
+			m[l.size],
+			l.iconOnly ? "aspect-square px-0" : p[l.size],
 			l.pill ? "rounded-full" : l.size === "xs" ? "rounded-md" : "rounded-(--sui-radius-button)",
 			l.iconOnly ? "" : l.iconPosition === "end" ? "[&_svg]:ml-2" : "[&_svg:first-child]:mr-2"
-		]), h = e(() => l.as === "button" && !l.asChild);
+		]), g = e(() => l.as === "button" && !l.asChild);
 		return (e, l) => (i(), t(o(c), {
-			"aria-disabled": n.disabled && !h.value ? "true" : void 0,
+			"aria-disabled": n.disabled && !g.value ? "true" : void 0,
+			"aria-pressed": n.pressed === void 0 ? void 0 : String(n.pressed),
 			as: n.as,
 			"as-child": n.asChild,
-			class: r(m.value),
+			class: r(h.value),
 			"data-disabled": n.disabled ? "" : void 0,
-			disabled: h.value ? n.disabled : void 0
+			disabled: g.value ? n.disabled : void 0
 		}, {
 			default: s(() => [a(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"aria-disabled",
+			"aria-pressed",
 			"as",
 			"as-child",
 			"class",

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

@@ -1 +1 @@
-{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_renderSlot","Button_vue_vue_type_script_setup_true_lang_default","props","__props","variants","heights","paddings","texts","classes","computed","isNativeButton","openBlock","createBlock","unref","Primitive","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant =\n  'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start'\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger',\n  // For inverse grounds: toasts, dark bands.\n  'ghost-inverse':\n    'border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50',\n  props.variant === 'ghost-inverse' ? 'focus-visible:sui-ring-inverse' : 'focus-visible:sui-ring',\n  variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAqBA,IAAMO,IAAQC,GAORC,IAA0C;GAC9C,SACE;GACF,WACE;GACF,QACE;GACF,OACE;GACF,UACE;GAEF,QAAQ;GACR,kBACE;GAEF,iBACE;EACJ,GAEMC,IAAsC;GAC1C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAuC;GAC3C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAoC;GACxC,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAUC,QAAe;GAE7B;GACAP,EAAM,YAAY,kBAAkB,mCAAmC;GACvEE,EAASF,EAAM;GACfG,EAAQH,EAAM;GACdK,EAAML,EAAM;GACZA,EAAM,WAAW,uBAAuBI,EAASJ,EAAM;GAEvDA,EAAM,OAAO,iBAAiBA,EAAM,SAAS,OAAO,eAAe;GACnEA,EAAM,WAAW,KAAKA,EAAM,iBAAiB,QAAQ,iBAAiB;EACxE,CAAC,GAGKQ,IAAiBD,QAAeP,EAAM,OAAO,YAAY,CAACA,EAAM,OAAO;E,kBAI3EP,EAAA,GAAAC,EASYC,EAAAiB,CAAA,GAAA;GART,iBAAeX,EAAA,YAAQ,CAAKO,EAAA,QAAc,SAAY,KAAA;GACtD,IAAIP,EAAA;GACJ,YAAUA,EAAA;GACV,OAAKL,EAAEU,EAAA,KAAO;GACd,iBAAeL,EAAA,WAAQ,KAAQ,KAAA;GAC/B,UAAUO,EAAA,QAAiBP,EAAA,WAAW,KAAA;;GAEvC,SAAAJ,QAAQ,CAARC,EAAQkB,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_renderSlot","Button_vue_vue_type_script_setup_true_lang_default","props","__props","variants","pressedVariants","heights","paddings","texts","classes","computed","isNativeButton","openBlock","createBlock","unref","Primitive","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant =\n  'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n  /** A toggle's state, as `aria-pressed`. Drawn on for ghost, ghost-inverse and secondary; leave it unset on a plain\n   *  button. */\n  pressed?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start',\n  pressed: undefined\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger',\n  // For inverse grounds: toasts, dark bands.\n  'ghost-inverse':\n    'border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse'\n}\n\n// On is a step past hover, and hovering it deepens it again. On inverse, 22% is as deep as white text keeps 4.5:1.\nconst pressedVariants: Partial<Record<ButtonVariant, string>> = {\n  secondary:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-accent-bright not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  'ghost-inverse':\n    'border border-transparent bg-sui-on-inverse/[0.18] text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.22] [&_svg]:stroke-sui-on-inverse'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50',\n  props.variant === 'ghost-inverse' ? 'focus-visible:sui-ring-inverse' : 'focus-visible:sui-ring',\n  (props.pressed && pressedVariants[props.variant]) || variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAwBA,IAAMO,IAAQC,GAQRC,IAA0C;GAC9C,SACE;GACF,WACE;GACF,QACE;GACF,OACE;GACF,UACE;GAEF,QAAQ;GACR,kBACE;GAEF,iBACE;EACJ,GAGMC,IAA0D;GAC9D,WACE;GACF,OACE;GACF,iBACE;EACJ,GAEMC,IAAsC;GAC1C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAuC;GAC3C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAoC;GACxC,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAUC,QAAe;GAE7B;GACAR,EAAM,YAAY,kBAAkB,mCAAmC;GACtEA,EAAM,WAAWG,EAAgBH,EAAM,YAAaE,EAASF,EAAM;GACpEI,EAAQJ,EAAM;GACdM,EAAMN,EAAM;GACZA,EAAM,WAAW,uBAAuBK,EAASL,EAAM;GAEvDA,EAAM,OAAO,iBAAiBA,EAAM,SAAS,OAAO,eAAe;GACnEA,EAAM,WAAW,KAAKA,EAAM,iBAAiB,QAAQ,iBAAiB;EACxE,CAAC,GAGKS,IAAiBD,QAAeR,EAAM,OAAO,YAAY,CAACA,EAAM,OAAO;E,kBAI3EP,EAAA,GAAAC,EAUYC,EAAAkB,CAAA,GAAA;GATT,iBAAeZ,EAAA,YAAQ,CAAKQ,EAAA,QAAc,SAAY,KAAA;GACtD,gBAAcR,EAAA,YAAY,KAAA,IAAY,KAAA,IAAY,OAAOA,EAAA,OAAO;GAChE,IAAIA,EAAA;GACJ,YAAUA,EAAA;GACV,OAAKL,EAAEW,EAAA,KAAO;GACd,iBAAeN,EAAA,WAAQ,KAAQ,KAAA;GAC/B,UAAUQ,EAAA,QAAiBR,EAAA,WAAW,KAAA;;GAEvC,SAAAJ,QAAQ,CAARC,EAAQmB,EAAA,QAAA,SAAA,C"}

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["_sfc_main","ContextMenu_vue_vue_type_script_setup_true_lang_default","ContextMenu_default"],"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":""}
+{"version":3,"file":"ContextMenu.js","names":["_sfc_main","ContextMenu_vue_vue_type_script_setup_true_lang_default","ContextMenu_default"],"sources":["../../../src/components/ContextMenu/ContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\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 uid = useId()\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\n            v-else\n            as-child\n            :class=\"menuItemClass\"\n            :text-value=\"item.disabled ? '' : undefined\"\n            @select=\"select(item, $event)\"\n          >\n            <MenuItemContent :item=\"item\" :reason-id=\"`${uid}-${index}`\" />\n          </ContextMenuItem>\n        </template>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 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";
+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, useId as _, withCtx as v } from "vue";
+import { ContextMenuContent as y, ContextMenuItem as b, ContextMenuPortal as x, ContextMenuRoot as S, ContextMenuSeparator as C, ContextMenuTrigger as w } from "reka-ui";
 //#region src/components/ContextMenu/ContextMenu.vue?vue&type=script&setup=true&lang.ts
-var w = /*@__PURE__*/ u({
+var T = /*@__PURE__*/ u({
 	__name: "ContextMenu",
 	props: /*@__PURE__*/ d({
 		items: {},
@@ -27,11 +27,11 @@ var w = /*@__PURE__*/ u({
 		"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");
+		let d = t, T = u, E = _(), D = a(d, (e) => T("click-item", e));
+		function O(e) {
+			T("update:open", e), T(e ? "show" : "hide");
 		}
-		function D(e) {
+		function k(e) {
 			if (d.disabled || !(e.key === "F10" && e.shiftKey || e.key === "ContextMenu")) return;
 			e.preventDefault();
 			let t = e.currentTarget, n = e.target.getBoundingClientRect();
@@ -42,34 +42,43 @@ var w = /*@__PURE__*/ u({
 				clientY: n.top + Math.min(n.height, 32)
 			}));
 		}
-		return (a, u) => (p(), s(g(x), {
+		return (a, u) => (p(), s(g(S), {
 			modal: !1,
-			"onUpdate:open": E
+			"onUpdate:open": O
 		}, {
-			default: _(() => [l(g(C), {
+			default: v(() => [l(g(w), {
 				"as-child": "",
 				disabled: t.disabled,
-				onKeydown: D
+				onKeydown: k
 			}, {
-				default: _(() => [h(a.$slots, "default")]),
+				default: v(() => [h(a.$slots, "default")]),
 				_: 3
-			}, 8, ["disabled"]), l(g(b), null, {
-				default: _(() => [l(g(v), {
+			}, 8, ["disabled"]), l(g(x), null, {
+				default: v(() => [l(g(y), {
 					"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), {
+					default: v(() => [(p(!0), c(o, null, m(t.items, (t, n) => (p(), c(o, { key: n }, [t.type === "separator" ? (p(), s(g(C), {
 						key: 0,
 						class: f(g(i))
-					}, null, 8, ["class"])) : (p(), s(g(y), {
+					}, null, 8, ["class"])) : (p(), s(g(b), {
 						key: 1,
+						"as-child": "",
 						class: f(g(r)),
-						onSelect: (e) => g(T)(t)
+						"text-value": t.disabled ? "" : void 0,
+						onSelect: (e) => g(D)(t, e)
 					}, {
-						default: _(() => [l(e, { item: t }, null, 8, ["item"])]),
+						default: v(() => [l(e, {
+							item: t,
+							"reason-id": `${g(E)}-${n}`
+						}, null, 8, ["item", "reason-id"])]),
 						_: 2
-					}, 1032, ["class", "onSelect"]))], 64))), 128))]),
+					}, 1032, [
+						"class",
+						"text-value",
+						"onSelect"
+					]))], 64))), 128))]),
 					_: 1
 				}, 8, ["aria-label", "class"])]),
 				_: 1
@@ -79,6 +88,6 @@ var w = /*@__PURE__*/ u({
 	}
 });
 //#endregion
-export { w as default };
+export { T 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

@@ -1 +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"}
+{"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","uid","useId","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","$event"],"sources":["../../../src/components/ContextMenu/ContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\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 uid = useId()\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\n            v-else\n            as-child\n            :class=\"menuItemClass\"\n            :text-value=\"item.disabled ? '' : undefined\"\n            @select=\"select(item, $event)\"\n          >\n            <MenuItemContent :item=\"item\" :reason-id=\"`${uid}-${index}`\" />\n          </ContextMenuItem>\n        </template>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAMe,IAAQC,GAMRC,IAAOH,GAOPI,IAAMC,EAAM,GACZC,IAASC,EAAcN,IAAQ,MAASE,EAAK,cAAcK,CAAI,CAAC;EAEtE,SAASC,EAAa,GAAe;GAEnC,AADAN,EAAK,eAAeO,CAAI,GACdP,EAANO,IAAW,SACL,MAAM;EAClB;EAIA,SAASC,EAAU,GAAsB;GACvC,IAAIV,EAAM,YAAY,EAAGW,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,kBAKE5B,EAAA,GAAAC,EAoBkBC,EAAA8B,CAAA,GAAA;GApBA,OAAO;GAAQ,iBAAaT;;GAC5C,SAAApB,QAEqB,CAFrBC,EAEqBF,EAAAiC,CAAA,GAAA;IAFD,YAAA;IAAU,UAAUnB,EAAA;IAAoB;;IAC1D,SAAAb,QAAQ,CAARE,EAAQgC,EAAA,QAAA,SAAA,C;;G,qBAEVjC,EAeoBF,EAAAoC,CAAA,GAAA,MAAA;IAdlB,SAAAnC,QAaqB,CAbrBC,EAaqBF,EAAAqC,CAAA,GAAA;KAbA,cAAYvB,EAAA;KAAQ,OAAKV,EAAA,CAAGJ,EAAAuC,CAAA,GAAgB,UAAA,CAAA;KAAgB,qBAAmB;;KACxF,SAAAtC,QAA8B,EAAxCH,EAAA,EAAA,GAAAO,EAWWC,GAAA,MAAAC,EAXuBO,EAAA,QAAhB,GAAM,OAAuBhB,EAAA,GAAAO,EAAAC,GAAA,EAAA,KAAAqC,EAAK,GAAA,CACtBvB,EAAK,SAAI,eAArCtB,EAAA,GAAAC,EAAqFC,EAAA4C,CAAA,GAAA;;MAA7B,OAAKxC,EAAEJ,EAAA6C,CAAA,CAAkB;K,2BACjF/C,EAAA,GAAAC,EAQkBC,EAAA8C,CAAA,GAAA;;MANhB,YAAA;MACC,OAAK1C,EAAEJ,EAAA+C,CAAA,CAAa;MACpB,cAAY3B,EAAK,WAAQ,KAAQ,KAAA;MACjC,WAAM,MAAEpB,EAAAkB,CAAA,CAAM,CAACE,GAAM4B,CAAM;;MAE5B,SAAA/C,QAA+D,CAA/DC,EAA+DM,GAAA;OAAvC;OAAO,aAAS,GAAKR,EAAAgB,CAAA,EAAG,GAAI2B"}

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  /** 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":""}
+{"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 ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DropdownMenuAction, DropdownMenuEntry } from '../internal/menu'\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 bound to `v-model:selected`: it shows on hover and focus, and on every row once anything is selected.\n   *  Shift-click (or Shift+Space) selects a range, Cmd or Ctrl-click toggles one row, Shift+↑ ↓ extends. */\n  selectable?: boolean\n  /** gutter: the checkbox in its own column. leading: it takes the place of the `leading` slot's first mark. */\n  checkboxPlacement?: 'gutter' | 'leading'\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  /** The group headers' ground; by default sunken when joined, surface as cards. */\n  groupHeaderTone?: 'sunken' | 'surface' | 'canvas'\n  /** The group headers' height in px (36 by default); sets `--sui-list-header`. */\n  groupHeaderHeight?: number\n  /** Groups fold away under a chevron; a group's own `collapsible` wins. */\n  collapsible?: boolean\n  /** The rows' height in px, such as 44 (40 by default); sets `--sui-list-row`. */\n  rowHeight?: number\n  /** A hairline between rows. */\n  dividers?: boolean\n  /** Wraps each row in a ContextMenu of these items (`@context-item`); return [] for none. */\n  contextItems?: (item: T) => DropdownMenuEntry[]\n  /** The context menu's accessible name. */\n  contextLabel?: string\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  checkboxPlacement: 'gutter',\n  headingLevel: 3,\n  groupHeaderTone: undefined,\n  groupHeaderHeight: undefined,\n  collapsible: true,\n  rowHeight: undefined,\n  dividers: false,\n  contextItems: undefined,\n  contextLabel: undefined,\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 emit = defineEmits<{ 'context-item': [action: DropdownMenuAction, item: T] }>()\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. With `checkboxPlacement=\"leading\"`, the\n   *  first mark gives way to the checkbox. */\n  leading?: (props: { item: T; selected: boolean; selecting: boolean; toggle: () => void }) => 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  /** Controls at the end of a group's header, e.g. Show and Hide. */\n  'group-actions'?: (props: { group: DataListGroup<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\nconst collapsibleGroup = (group: DataListGroup<T>) => group.collapsible ?? props.collapsible\nconst isCollapsed = (group: DataListGroup<T>) => collapsibleGroup(group) && collapsed.value.includes(group.id)\nconst visibleItems = computed(() => props.groups.filter((group) => !isCollapsed(group)).flatMap((group) => group.items))\n\n// Where a range starts: the row last toggled.\nlet anchorKey: unknown = undefined\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  anchorKey = key\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\nfunction selectRange(item: T) {\n  const keys = visibleItems.value.map(idOf)\n  const to = keys.indexOf(idOf(item))\n  const from = keys.indexOf(anchorKey)\n  const span = from < 0 ? [keys[to]] : keys.slice(Math.min(from, to), Math.max(from, to) + 1)\n  if (from < 0) anchorKey = idOf(item)\n  selected.value = [...selected.value, ...span.filter((key) => !selected.value.includes(key))]\n}\n\nfunction select(...items: T[]) {\n  const keys = items.map(idOf).filter((key) => !selected.value.includes(key))\n  if (keys.length) selected.value = [...selected.value, ...new Set(keys)]\n}\n\nfunction clickRow(event: MouseEvent, item: T) {\n  if (props.selectable && event.shiftKey) selectRange(item)\n  else if (props.selectable && (event.metaKey || event.ctrlKey)) toggle(item)\n  // Leading checkboxes stand in for the row's mark, so while selecting a click selects, as in a mail list.\n  else if (props.selectable && leading.value && selected.value.length) toggle(item)\n  else props.onRowClick?.(item)\n}\n\n// A shift-click selects rather than highlighting the text between.\nfunction onRowMousedown(event: MouseEvent) {\n  if (props.selectable && event.shiftKey) event.preventDefault()\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open; with Shift, ↑ ↓ extend the selection and Space\n// selects a range.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  // A collapsed group's rows are still in the DOM, hidden.\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])].filter(\n    (row) => row.closest('ul')?.style.display !== 'none'\n  )\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  const down = event.key === 'ArrowDown' || event.key === 'j'\n  const up = event.key === 'ArrowUp' || event.key === 'k'\n  if ((down || up) && event.shiftKey && props.selectable) {\n    const j = down ? Math.min(rows.length - 1, i + 1) : Math.max(0, i - 1)\n    const next = visibleItems.value[j]\n    select(item, ...(next ? [next] : []))\n    rows[j]?.focus()\n  } else if (down) rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (up) rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === ' ' && event.shiftKey && props.selectable) selectRange(item)\n  else if (event.key.toLowerCase() === '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 leading = computed(() => props.selectable && props.checkboxPlacement === 'leading')\nconst gutter = computed(() => props.selectable && props.checkboxPlacement === 'gutter')\nconst tones = { sunken: 'bg-sui-sunken', surface: 'bg-sui-surface', canvas: 'bg-sui-canvas' }\nconst headerTone = computed(() => tones[props.groupHeaderTone ?? (cards.value ? 'surface' : 'sunken')])\nconst sizes = computed(() => {\n  const style: Record<string, string> = {}\n  if (props.rowHeight !== undefined) style['--sui-list-row'] = `${props.rowHeight}px`\n  if (props.groupHeaderHeight !== undefined) style['--sui-list-header'] = `${props.groupHeaderHeight}px`\n  return Object.keys(style).length ? style : undefined\n})\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\" :style=\"sizes\">\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-[var(--sui-list-row,2.5rem)] 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-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2\"\n          :class=\"[headerTone, !cards && 'sticky top-0 z-10', collapsibleGroup(group) ? 'pl-1.5' : 'pl-4']\"\n        >\n          <button\n            v-if=\"collapsibleGroup(group)\"\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=\"isCollapsed(group) && '-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          <span class=\"ml-auto flex items-center gap-1\">\n            <slot :group=\"group\" name=\"group-actions\" />\n          </span>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\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=\"!isCollapsed(group)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <ContextMenu\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            :disabled=\"!contextItems\"\n            :items=\"contextItems?.(item)\"\n            :label=\"contextLabel\"\n            @click-item=\"emit('context-item', $event, item)\"\n          >\n            <li\n              class=\"group/row relative flex h-[var(--sui-list-row,2.5rem)] items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n              :class=\"[\n                dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle',\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              <!-- Outside the row, which is a button, over the leading slot's first mark: 16px in, or more for a child. -->\n              <span\n                v-if=\"leading\"\n                class=\"absolute top-1/2 z-[1] flex size-4 -translate-y-1/2 items-center justify-center\"\n                :class=\"!selected.length && 'hidden group-hover/row:flex group-has-focus-visible/row:flex'\"\n                data-list-check\n                :style=\"{ left: `${16 + (item.depth ?? 0) * 22}px` }\"\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              <span\n                v-if=\"gutter\"\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=\"[gutter ? 'pl-2.5' : 'pl-4', (onRowClick || selectable) && 'cursor-pointer']\"\n                data-list-row\n                :role=\"onRowClick ? 'button' : undefined\"\n                :tabindex=\"interactive ? 0 : undefined\"\n                @click=\"clickRow($event, item)\"\n                @keydown=\"onKeydown($event, item)\"\n                @mousedown=\"onRowMousedown\"\n              >\n                <span\n                  v-if=\"$slots.leading\"\n                  class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\"\n                  :class=\"\n                    leading &&\n                    (selected.length\n                      ? '[&>*:first-child]:invisible'\n                      : 'group-hover/row:[&>*:first-child]:invisible group-has-focus-visible/row:[&>*:first-child]:invisible')\n                  \"\n                >\n                  <slot\n                    :item=\"item\"\n                    name=\"leading\"\n                    :selected=\"selected.includes(idOf(item))\"\n                    :selecting=\"selected.length > 0\"\n                    :toggle=\"() => toggle(item)\"\n                  />\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\n                  v-if=\"$slots.meta\"\n                  class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\"\n                >\n                  <slot :item=\"item\" name=\"meta\" />\n                </span>\n              </div>\n            </li>\n          </ContextMenu>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,15 +1,33 @@
+import type { DropdownMenuAction, DropdownMenuEntry } from '../internal/menu';
 import type { DataListGroup } from './types';
 export interface DataListProps<T> {
     groups: DataListGroup<T>[];
     /** The item field that identifies it. An item's `depth` indents it as a child. */
     rowKey?: keyof T & string;
-    /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */
+    /** A checkbox bound to `v-model:selected`: it shows on hover and focus, and on every row once anything is selected.
+     *  Shift-click (or Shift+Space) selects a range, Cmd or Ctrl-click toggles one row, Shift+↑ ↓ extends. */
     selectable?: boolean;
+    /** gutter: the checkbox in its own column. leading: it takes the place of the `leading` slot's first mark. */
+    checkboxPlacement?: 'gutter' | 'leading';
     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;
+    /** The group headers' ground; by default sunken when joined, surface as cards. */
+    groupHeaderTone?: 'sunken' | 'surface' | 'canvas';
+    /** The group headers' height in px (36 by default); sets `--sui-list-header`. */
+    groupHeaderHeight?: number;
+    /** Groups fold away under a chevron; a group's own `collapsible` wins. */
+    collapsible?: boolean;
+    /** The rows' height in px, such as 44 (40 by default); sets `--sui-list-row`. */
+    rowHeight?: number;
+    /** A hairline between rows. */
+    dividers?: boolean;
+    /** Wraps each row in a ContextMenu of these items (`@context-item`); return [] for none. */
+    contextItems?: (item: T) => DropdownMenuEntry[];
+    /** The context menu's accessible name. */
+    contextLabel?: string;
     /** Makes rows open on click and Enter (`@row-click`). */
     onRowClick?: (item: T) => void;
     /** Adds a + to each group's header (`@new`). */
@@ -25,6 +43,7 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         selected?: unknown[];
         collapsed?: string[];
     }) & {
+        "onContext-item"?: ((action: DropdownMenuAction, item: T) => any) | undefined;
         "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
         "onUpdate:collapsed"?: ((value: string[]) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -43,9 +62,13 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
             count: number;
             collapsed: boolean;
         }) => unknown;
-        /** Small marks before an item's title: a status icon, an id, an avatar. */
+        /** Small marks before an item's title: a status icon, an id, an avatar. With `checkboxPlacement="leading"`, the
+         *  first mark gives way to the checkbox. */
         leading?: (props: {
             item: T;
+            selected: boolean;
+            selecting: boolean;
+            toggle: () => void;
         }) => unknown;
         /** The item's title; `item.name` by default. */
         title?: (props: {
@@ -55,10 +78,14 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         meta?: (props: {
             item: T;
         }) => unknown;
+        /** Controls at the end of a group's header, e.g. Show and Hide. */
+        'group-actions'?: (props: {
+            group: DataListGroup<T>;
+        }) => unknown;
         /** Shown when every group is empty, e.g. an EmptyState. */
         empty?: () => unknown;
     };
-    emit: ((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void);
+    emit: ((evt: "context-item", action: DropdownMenuAction, item: T) => void) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:collapsed", value: string[]) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };