@sparklingopinions/sparkling-ui 0.14.0 → 0.16.0

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","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_Fragment","_renderList","_createElementVNode","_createCommentVNode","_createBlock","Skeleton","_createVNode","_unref","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_withDirectives","ContextMenu","Checkbox","_vShow","Skeleton_default","Checkbox_default","ContextMenu_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","card","iconButton","DataList_vue_vue_type_script_setup_true_lang_default","\"selected\"","\"selectedModifiers\"","\"collapsed\"","\"collapsedModifiers\"","__emit","props","__props","emit","selected","useModel","collapsed","slots","useSlots","id","useId","root","useTemplateRef","idOf","item","interactive","computed","isEmpty","group","toggleGroup","groupId","x","collapsibleGroup","isCollapsed","visibleItems","anchorKey","toggle","key","selectRange","keys","to","from","span","select","items","clickRow","event","leading","onRowMousedown","onKeydown","rows","row","i","down","up","j","next","cards","gutter","tones","headerTone","sizes","style","custom","groupName","skeletonWidths","skeletonGroupWidths","headerBar","openBlock","createElementBlock","normalizeClass","normalizeStyle","_ctx","renderSlot","Fragment","renderList","g","createElementVNode","createCommentVNode","r","createBlock","createVNode","_cache","unref","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","withDirectives","$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 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  /** While loading, the placeholder groups drawn, as each one's number of rows. */\n  loadingGroups?: number[]\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  loadingGroups: () => [4, 2],\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%', '38%']\nconst skeletonGroupWidths = ['5.5rem', '4rem', '4.75rem']\n// A Skeleton is sunken, so on a sunken header band its bars go a step darker.\nconst headerBar = computed(() => [\n  'animate-pulse',\n  headerTone.value === tones.sunken ? 'bg-sui-line-subtle' : 'bg-sui-sunken'\n])\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    <!-- Placeholder groups in the list's own shape: its header, rows, leading marks and meta. -->\n    <template v-else-if=\"loading\">\n      <section\n        v-for=\"(rows, g) in loadingGroups\"\n        :key=\"g\"\n        aria-busy=\"true\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <div\n          aria-hidden=\"true\"\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, collapsible ? 'pl-1.5' : 'pl-4']\"\n        >\n          <span v-if=\"collapsible\" class=\"size-6 shrink-0\" />\n          <span\n            v-if=\"$slots['group-leading'] || $slots['group-header']\"\n            class=\"size-3.5 rounded-full\"\n            :class=\"headerBar\"\n          />\n          <span class=\"h-2.5 rounded-md\" :class=\"headerBar\" :style=\"{ width: skeletonGroupWidths[g % 3] }\" />\n          <span class=\"h-2.5 w-3.5 rounded-md\" :class=\"headerBar\" />\n        </div>\n        <div\n          v-for=\"r in rows\"\n          :key=\"r\"\n          aria-hidden=\"true\"\n          class=\"flex h-[var(--sui-list-row,2.5rem)] items-center gap-2.5 pr-4\"\n          :class=\"[gutter ? 'pl-9.5' : 'pl-4', dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle']\"\n        >\n          <Skeleton v-if=\"$slots.leading || leading\" shape=\"circle\" size=\"1.25rem\" />\n          <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(g * 3 + r) % skeletonWidths.length]\" />\n          <span class=\"flex-1\" />\n          <template v-if=\"$slots.meta\">\n            <Skeleton height=\"0.625rem\" width=\"6rem\" />\n            <Skeleton height=\"0.625rem\" width=\"3.5rem\" />\n          </template>\n        </div>\n      </section>\n    </template>\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":"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"}
+{"version":3,"file":"DataList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_Fragment","_renderList","_createElementVNode","_createCommentVNode","_createBlock","Skeleton","_createVNode","_unref","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_withDirectives","ContextMenu","Checkbox","_vShow","Skeleton_default","Checkbox_default","ContextMenu_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","card","headerBar","iconButton","DataList_vue_vue_type_script_setup_true_lang_default","\"selected\"","\"selectedModifiers\"","\"collapsed\"","\"collapsedModifiers\"","__emit","props","__props","emit","selected","useModel","collapsed","slots","useSlots","id","useId","root","useTemplateRef","idOf","item","interactive","computed","isEmpty","group","toggleGroup","groupId","x","collapsibleGroup","isCollapsed","visibleItems","anchorKey","toggle","key","selectRange","keys","to","from","span","select","items","clickRow","event","leading","onRowMousedown","onKeydown","rows","row","i","down","up","j","next","cards","gutter","tones","headerTone","sizes","style","custom","groupName","skeletonWidths","skeletonGroupWidths","openBlock","createElementBlock","normalizeClass","normalizeStyle","_ctx","renderSlot","Fragment","renderList","g","createElementVNode","createCommentVNode","r","createBlock","createVNode","_cache","unref","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","withDirectives","$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 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  /** While loading, the placeholder groups drawn, as each one's number of rows. */\n  loadingGroups?: number[]\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  loadingGroups: () => [4, 2],\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: 'sui-band', 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%', '38%']\nconst skeletonGroupWidths = ['5.5rem', '4rem', '4.75rem']\nconst headerBar = 'animate-pulse bg-sui-fill-hover'\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-fill-hover 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    <!-- Placeholder groups in the list's own shape: its header, rows, leading marks and meta. -->\n    <template v-else-if=\"loading\">\n      <section\n        v-for=\"(rows, g) in loadingGroups\"\n        :key=\"g\"\n        aria-busy=\"true\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <div\n          aria-hidden=\"true\"\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, collapsible ? 'pl-1.5' : 'pl-4']\"\n        >\n          <span v-if=\"collapsible\" class=\"size-6 shrink-0\" />\n          <span\n            v-if=\"$slots['group-leading'] || $slots['group-header']\"\n            class=\"size-3.5 rounded-full\"\n            :class=\"headerBar\"\n          />\n          <span class=\"h-2.5 rounded-md\" :class=\"headerBar\" :style=\"{ width: skeletonGroupWidths[g % 3] }\" />\n          <span class=\"h-2.5 w-3.5 rounded-md\" :class=\"headerBar\" />\n        </div>\n        <div\n          v-for=\"r in rows\"\n          :key=\"r\"\n          aria-hidden=\"true\"\n          class=\"flex h-[var(--sui-list-row,2.5rem)] items-center gap-2.5 pr-4\"\n          :class=\"[gutter ? 'pl-9.5' : 'pl-4', dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle']\"\n        >\n          <Skeleton v-if=\"$slots.leading || leading\" shape=\"circle\" size=\"1.25rem\" />\n          <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(g * 3 + r) % skeletonWidths.length]\" />\n          <span class=\"flex-1\" />\n          <template v-if=\"$slots.meta\">\n            <Skeleton height=\"0.625rem\" width=\"6rem\" />\n            <Skeleton height=\"0.625rem\" width=\"3.5rem\" />\n          </template>\n        </div>\n      </section>\n    </template>\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-fill-hover has-focus-visible:bg-sui-fill-hover'\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":"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"}

package/dist/components/Dialog/ContextSeparator.js

@@ -0,0 +1,19 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
+//#region src/components/Dialog/ContextSeparator.vue
+var i = {}, a = {
+	"aria-hidden": "true",
+	class: "size-3 shrink-0 fill-none stroke-sui-ink-muted",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"stroke-width": "2",
+	viewBox: "0 0 24 24"
+};
+function o(e, i) {
+	return r(), t("svg", a, [...i[0] ||= [n("path", { d: "M9 6l6 6-6 6" }, null, -1)]]);
+}
+var s = /*#__PURE__*/ e(i, [["render", o]]);
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=ContextSeparator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextSeparator.js","names":["_openBlock","_createElementBlock","_createElementVNode","_plugin_vue_export_helper_default","_sfc_main","_hoisted_1","_sfc_render","openBlock","createElementBlock","_cache","createElementVNode","ContextSeparator_default"],"sources":["../../../src/components/Dialog/ContextSeparator.vue"],"sourcesContent":["<!-- The chevron between a dialog's context and its title. -->\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"size-3 shrink-0 fill-none stroke-sui-ink-muted\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"2\"\n    viewBox=\"0 0 24 24\"\n  >\n    <path d=\"M9 6l6 6-6 6\" />\n  </svg>\n</template>\n"],"mappings":";;;;CAGI,eAAY;CACZ,OAAM;CACN,kBAAe;CACf,mBAAgB;CAChB,gBAAa;CACb,SAAQ;;;CANV,OAAAA,EAAA,GAAAC,EASM,OATNI,GASM,CAAA,GAAA,AAAAI,EAAA,OAAA,CADJP,EAAyB,QAAA,EAAnB,GAAE,eAAc,GAAA,MAAA,EAAA,C"}

package/dist/components/Dialog/ContextSeparator.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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, 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":""}
+{"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 Kbd from '../Kbd/Kbd.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport ContextSeparator from './ContextSeparator.vue'\nimport { focusFirst, modifierKey } 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  /** @deprecated A dialog has no Cancel button: Escape and the close button cancel. Kept so existing calls compile. */\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. The ⌘ or Ctrl Enter shortcut is drawn by the dialog next to its confirm. */\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 hasContext = computed(() => !!slots.context)\nconst modKey = modifierKey()\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: one raised piece with a title (after an optional `context`, such as where the thing lands), a body\n     and a footer; or, with a `band` or `hero`, a record form under a tinted band; or 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 data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n        :class=\"\n          sheet\n            ? 'items-end bg-sui-scrim/40 backdrop-blur-[4px]'\n            : 'items-start bg-[rgb(var(--sui-scrim)/var(--sui-scrim-alpha))] px-4 pt-(--sui-dialog-offset) pb-4'\n        \"\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) border border-b-0 border-sui-edge bg-sui-raised shadow-(--sui-shadow-floating) 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-fill 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              <div class=\"flex min-w-0 items-center gap-1\">\n                <template v-if=\"hasContext\">\n                  <slot name=\"context\" />\n                  <ContextSeparator />\n                </template>\n                <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n                  <slot name=\"title\">{{ title }}</slot>\n                </DialogTitle>\n              </div>\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-fill-line bg-sui-raised 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-[calc(100dvh-var(--sui-dialog-offset)-1rem)] w-full flex-col border border-sui-edge bg-sui-raised shadow-(--sui-shadow-floating) 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 pt-3 pr-3 pl-4 text-sui-ink\"\n            data-modal-header\n          >\n            <div class=\"flex min-h-7 min-w-0 items-center gap-1\">\n              <template v-if=\"hasContext\">\n                <slot name=\"context\" />\n                <ContextSeparator />\n              </template>\n              <DialogTitle\n                class=\"min-w-0 truncate text-sm font-semibold text-sui-ink\"\n                :class=\"hasContext ? '' : 'pl-1'\"\n              >\n                <slot name=\"title\">{{ title }}</slot>\n              </DialogTitle>\n            </div>\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          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto text-sm text-sui-ink-emphasis\"\n            :class=\"[\n              banded ? 'px-5 pt-0.5 pb-4' : headerless ? 'p-5' : 'px-5 pt-3.5 pb-5',\n              !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')\n            ]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center gap-2.5 text-sui-ink\"\n            :class=\"banded ? 'rounded-b-2xl py-3 pr-4 pl-5' : 'rounded-b-xl px-4 pt-1 pb-4 pl-5'\"\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              <span v-if=\"confirmLabel\" aria-hidden=\"true\" class=\"flex shrink-0 items-center gap-1\">\n                <Kbd>{{ modKey }}</Kbd\n                ><Kbd>↵</Kbd>\n              </span>\n              <Button\n                v-if=\"confirmLabel\"\n                :aria-keyshortcuts=\"modKey === '⌘' ? 'Meta+Enter' : 'Control+Enter'\"\n                :disabled=\"confirmDisabled\"\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      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}

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

@@ -3,6 +3,7 @@ export interface DialogProps {
     /** The close button in the header. */
     closable?: boolean;
     closeLabel?: string;
+    /** @deprecated A dialog has no Cancel button: Escape and the close button cancel. Kept so existing calls compile. */
     cancelLabel?: string;
     /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */
     confirmLabel?: string;
@@ -14,7 +15,7 @@ export interface DialogProps {
     /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent
      *  wash. The `hero` slot sits centred in it. */
     band?: string | boolean;
-    /** Muted text at the footer's start, e.g. `saveHint()`. */
+    /** Muted text at the footer's start. The ⌘ or Ctrl Enter shortcut is drawn by the dialog next to its confirm. */
     hint?: string;
     /** The body draws its own header, edge to edge. */
     headerless?: boolean;
@@ -30,25 +31,29 @@ type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_36: {}, __VLS_63: {}, __VLS_65: {}, __VLS_67: {}, __VLS_118: {}, __VLS_126: {}, __VLS_153: {}, __VLS_155: {}, __VLS_157: {};
+declare var __VLS_30: {}, __VLS_43: {}, __VLS_70: {}, __VLS_72: {}, __VLS_74: {}, __VLS_125: {}, __VLS_127: {}, __VLS_140: {}, __VLS_167: {}, __VLS_169: {}, __VLS_171: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_36) => any;
+    context?: (props: typeof __VLS_30) => any;
 } & {
-    default?: (props: typeof __VLS_63) => any;
+    title?: (props: typeof __VLS_43) => any;
 } & {
-    footer?: (props: typeof __VLS_65) => any;
+    default?: (props: typeof __VLS_70) => any;
 } & {
-    'footer-start'?: (props: typeof __VLS_67) => any;
+    footer?: (props: typeof __VLS_72) => any;
 } & {
-    hero?: (props: typeof __VLS_118) => any;
+    'footer-start'?: (props: typeof __VLS_74) => any;
 } & {
-    title?: (props: typeof __VLS_126) => any;
+    hero?: (props: typeof __VLS_125) => any;
 } & {
-    default?: (props: typeof __VLS_153) => any;
+    context?: (props: typeof __VLS_127) => any;
 } & {
-    footer?: (props: typeof __VLS_155) => any;
+    title?: (props: typeof __VLS_140) => any;
 } & {
-    'footer-start'?: (props: typeof __VLS_157) => any;
+    default?: (props: typeof __VLS_167) => any;
+} & {
+    footer?: (props: typeof __VLS_169) => any;
+} & {
+    'footer-start'?: (props: typeof __VLS_171) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;