@sparklingopinions/sparkling-ui 0.16.0 → 0.17.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","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":";;;;;;;;;;;;;;;;;;;;;A,GAuLMqC,IAAO,yEAMPC,IAAY,mCACZC,IACJ,wM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA7IF,IAAMO,IAAQC,GAqBRC,IAAOH,GAEPI,IAAWhD,EAAsB8C,GAAC,UAAiC,GACnEI,IAAYlD,EAAqB8C,GAAC,WAAkC,GAEpEK,KAAQlD,EAAA,GAkBRoD,IAAKC,EAAM,GACXC,IAAOC,GAA4B,MAAM,GAEzCC,KAAQ,MAAqBC,EAAKb,EAAM,UAAU,OAClDc,IAAcC,QAAe,CAAC,CAACf,EAAM,cAAcA,EAAM,UAAU,GACnEgB,IAAUD,QAAe,CAACf,EAAM,WAAWA,EAAM,OAAO,OAAO,MAAUiB,EAAM,MAAM,WAAW,CAAC,CAAC;EAExG,SAASC,EAAY,GAAiB;GACpC,EAAU,QAAQb,EAAU,MAAM,SAASc,CAAO,IAC9Cd,EAAU,MAAM,QAAQ,MAAMe,MAAMD,CAAO,IAC3C,CAAC,GAAGd,EAAU,OAAOc,CAAO;EAClC;EAEA,IAAME,KAAoB,MAA4BJ,EAAM,eAAejB,EAAM,aAC3EsB,KAAe,MAA4BD,EAAiBJ,CAAK,KAAKZ,EAAU,MAAM,SAASY,EAAM,EAAE,GACvGM,IAAeR,QAAef,EAAM,OAAO,QAAQ,MAAU,CAACsB,EAAYL,CAAK,CAAC,CAAC,CAAC,SAAS,MAAUA,EAAM,KAAK,CAAC,GAGnHO;EAEJ,SAASC,EAAO,GAAS;GACvB,IAAMC,IAAMd,EAAKC,CAAI;GAErB,AADA,IAAYa,GACZ,EAAS,QAAQvB,EAAS,MAAM,SAASuB,CAAG,IAAIvB,EAAS,MAAM,QAAQ,MAAMiB,MAAMM,CAAG,IAAI,CAAC,GAAGvB,EAAS,OAAOuB,CAAG;EACnH;EAEA,SAASC,EAAY,GAAS;GAC5B,IAAMC,IAAOL,EAAa,MAAM,IAAIX,CAAI,GAClCiB,IAAKD,EAAK,QAAQhB,EAAKC,CAAI,CAAC,GAC5BiB,IAAOF,EAAK,QAAQJ,CAAS,GAC7BO,IAAOD,IAAO,IAAI,CAACF,EAAKC,EAAG,IAAID,EAAK,MAAM,KAAK,IAAIE,GAAMD,CAAE,GAAG,KAAK,IAAIC,GAAMD,CAAE,IAAI,CAAC;GAE1F,AADIC,IAAO,MAAG,IAAYlB,EAAKC,CAAI,IACnC,EAAS,QAAQ,CAAC,GAAGV,EAAS,OAAO,GAAG4B,EAAK,QAAQ,MAAQ,CAAC5B,EAAS,MAAM,SAASuB,CAAG,CAAC,CAAC;EAC7F;EAEA,SAASM,GAAO,GAAGC,GAAY;GAC7B,IAAML,IAAOK,EAAM,IAAIrB,CAAI,CAAC,CAAC,QAAQ,MAAQ,CAACT,EAAS,MAAM,SAASuB,CAAG,CAAC;GAC1E,AAAIE,EAAK,WAAQ,EAAS,QAAQ,CAAC,GAAGzB,EAAS,OAAO,GAAG,IAAI,IAAIyB,CAAI,CAAC;EACxE;EAEA,SAASM,GAAS,GAAmB,GAAS;GAC5C,AAAIlC,EAAM,cAAcmC,EAAM,WAAUR,EAAYd,CAAI,IAC/Cb,EAAM,eAAemC,EAAM,WAAWA,EAAM,YAE5CnC,EAAM,cAAcoC,EAAQ,SAASjC,EAAS,MAAM,SAFEsB,EAAOZ,CAAI,IAGrEb,EAAM,aAAaa,CAAI;EAC9B;EAGA,SAASwB,GAAe,GAAmB;GACzC,AAAIrC,EAAM,cAAcmC,EAAM,YAAUA,EAAM,eAAe;EAC/D;EAIA,SAASG,GAAU,GAAsB,GAAS;GAChD,IAAIH,EAAM,WAAWA,EAAM,iBAAiBA,EAAM,WAAWA,EAAM,WAAWA,EAAM,QAAQ;GAE5F,IAAMI,IAAO,CAAC,GAAI7B,EAAK,OAAO,iBAA8B,iBAAiB,KAAK,CAAC,CAAE,CAAC,CAAC,QACpF,MAAQ8B,EAAI,QAAQ,IAAI,CAAC,EAAE,MAAM,YAAY,MAChD,GACMC,IAAIF,EAAK,QAAQJ,EAAM,aAA4B,GACnDO,IAAOP,EAAM,QAAQ,eAAeA,EAAM,QAAQ,KAClDQ,IAAKR,EAAM,QAAQ,aAAaA,EAAM,QAAQ;GACpD,KAAKO,KAAQC,MAAOR,EAAM,YAAYnC,EAAM,YAAY;IACtD,IAAM4C,IAAIF,IAAO,KAAK,IAAIH,EAAK,SAAS,GAAGE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAGA,IAAI,CAAC,GAC/DI,IAAOtB,EAAa,MAAMqB;IAEhC,AADAZ,GAAOnB,GAAM,GAAIgC,IAAO,CAACA,CAAI,IAAI,CAAC,CAAE,GACpCN,EAAKK,EAAE,EAAE,MAAM;GACjB,OAAO,IAAIF,GAAM,EAAK,KAAK,IAAIH,EAAK,SAAS,GAAGE,IAAI,CAAC,EAAE,EAAE,MAAM;QAC1D,IAAIE,GAAI,EAAK,KAAK,IAAI,GAAGF,IAAI,CAAC,EAAE,EAAE,MAAM;QACxC,IAAIN,EAAM,QAAQ,OAAOA,EAAM,YAAYnC,EAAM,YAAY,EAAYa,CAAI;QAC7E,IAAIsB,EAAM,IAAI,YAAY,MAAM,OAAOnC,EAAM,YAAY,EAAOa,CAAI;QACpE,KAAKsB,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQnC,EAAM,YAAY,EAAM,WAAWa,CAAI;QAC3F;GACL,EAAM,eAAe;EACvB;EAEA,IAAMiC,IAAQ/B,QAAef,EAAM,YAAY,OAAO,GAChDoC,IAAUrB,QAAef,EAAM,cAAcA,EAAM,sBAAsB,SAAS,GAClF+C,IAAShC,QAAef,EAAM,cAAcA,EAAM,sBAAsB,QAAQ,GAChFgD,KAAQ;GAAE,QAAQ;GAAY,SAAS;GAAkB,QAAQ;EAAgB,GACjFC,IAAalC,QAAeiC,GAAMhD,EAAM,oBAAoB8C,EAAM,QAAQ,YAAY,UAAU,GAChGI,KAAQnC,QAAe;GAC3B,IAAMoC,IAAgC,CAAC;GAGvC,OAFInD,EAAM,cAAc,KAAA,MAAW,EAAM,oBAAoB,GAAGA,EAAM,UAAU,MAC5EA,EAAM,sBAAsB,KAAA,MAAW,EAAM,uBAAuB,GAAGA,EAAM,kBAAkB,MAC5F,OAAO,KAAKmD,CAAK,CAAC,CAAC,SAASA,IAAQ,KAAA;EAC7C,CAAC,GAEKC,KAAU,MAA4B,CAAC,CAAC9C,GAAM,mBAAmBW,EAAM,WAAW,KAAA,GAClFoC,MAAa,MAA4BpC,EAAM,SAASA,EAAM,QAAQ,IAEtEqC,IAAiB;GAAC;GAAO;GAAO;GAAO;GAAO;GAAO;EAAK,GAC1DC,KAAsB;GAAC;GAAU;GAAQ;EAAS;E,kBAQtDlG,EAAA,GAAAC,EAoNM,OAAA;GApNG,SAAA;GAAJ,KAAIoD;GAAO,OAAKnD,EAAA,CAAC,sCAA6CuF,EAAA,QAAK,UAAavD,CAAI,CAAA;GAAG,OAAK/B,EAAE0F,GAAA,KAAK;E,IAC3FlC,EAAA,SAAW9D,EAAAA,OAAO,SAA7BG,EAAA,GAAAC,EAEM,OAAA;;GAF+B,OAAKC,EAAEuF,EAAA,SAASvD,CAAI;E,IACvD9B,EAAqBmG,EAAA,QAAA,OAAA,C,SAGF3D,EAAA,WACnB5C,EAAA,EAAA,GAAAC,EAmCUI,GAAA,EAAA,KAAA,EAAA,GAAAC,EAlCYsC,EAAA,gBAAZ,GAAM,OADhB5C,EAAA,GAAAC,EAmCU,WAAA;GAjCP,KAAK0G;GACN,aAAU;GACT,OAAKzG,EAAEuF,EAAA,QAAQvD,IAAI,kDAAA;E,IAEpB3B,EAaM,OAAA;GAZJ,eAAY;GACZ,OAAKL,EAAA,CAAC,mGAAiG,CAC9F0F,EAAA,OAAYhD,EAAA,cAAW,WAAA,MAAA,CAAA,CAAA;;GAEpBA,EAAA,eAAZ5C,EAAA,GAAAC,EAAmD,QAAnDuB,CAAmD,K;GAE3C3B,EAAAA,OAAM,oBAAqBA,EAAAA,OAAM,mBADzCG,EAAA,GAAAC,EAIE,QAAA;;IAFA,OAAKC,EAAA,CAAC,yBACEiC,CAAS,CAAA;;GAEnB5B,EAAmG,QAAA;IAA7F,OAAKL,EAAA,CAAC,oBAA2BiC,CAAS,CAAA;IAAG,OAAKhC,EAAA,EAAA,OAAW+F,GAAoBS,IAAC,GAAA,CAAA;;GACxFpG,EAA0D,QAAA,EAApD,OAAKL,EAAA,CAAC,0BAAiCiC,CAAS,CAAA,E;E,QAExDnC,EAAA,EAAA,GAAAC,EAcMI,GAAA,MAAAC,EAbQ4E,IAAL,OADTlF,EAAA,GAAAC,EAcM,OAAA;GAZH,KAAK6G;GACN,eAAY;GACZ,OAAK5G,EAAA,CAAC,iEAA+D,CAC5DwF,EAAA,QAAM,WAAA,QAAsB9C,EAAA,YAAQ,6CAAA,CAAA,CAAA;;GAE7B/C,EAAAA,OAAO,WAAWkF,EAAA,SAAlC/E,EAAA,GAAAS,EAA2EC,GAAA;;IAAhC,OAAM;IAAS,MAAK;;GAC/DC,EAA0FD,GAAA;IAAhF,QAAO;IAAW,OAAOuF,GAAgBU,IAAC,IAAOG,KAAKb,EAAe;;GAC/E,AAAAgB,EAAA,OAAA1G,EAAuB,QAAA,EAAjB,OAAM,SAAQ,GAAA,MAAA,EAAA;GACJV,EAAAA,OAAO,QAAvBG,EAAA,GAAAC,EAGWI,GAAA,EAAA,KAAA,EAAA,GAAA,CAFTM,EAA2CD,GAAA;IAAjC,QAAO;IAAW,OAAM;G,IAClCC,EAA6CD,GAAA;IAAnC,QAAO;IAAW,OAAM;;E,gCAMxCV,EAAA,EAAA,GAAAC,EAsKUI,GAAA,EAAA,KAAA,EAAA,GAAAC,EArKQsC,EAAA,SAAT,OADT5C,EAAA,GAAAC,EAsKU,WAAA;GApKP,KAAK2D,EAAM;GACX,cAAYA,EAAM;GAClB,mBAAe,CAAGA,EAAM,UAAUA,EAAM,QAAQmC,EAAOnC,CAAK,KAAA,GAAQhD,EAAAuC,CAAA,EAAE,GAAIS,EAAM,GAAE,SAAU,KAAA;GAC5F,OAAK1D,EAAEuF,EAAA,QAAQvD,IAAI,kDAAA;E,IAGZ0B,EAAM,QAAQmC,EAAOnC,CAAK,KADlC5D,EAAA,GAAAC,EAuES,UAAA;;GArEP,OAAKC,EAAA,CAAC,mGAAiG;IAC9F0F,EAAA;IAAU,CAAGH,EAAA,SAAK;IAAyBzB,EAAiBJ,CAAK,IAAA,WAAA;GAAA,CAAA,CAAA;;GAGlEI,EAAiBJ,CAAK,KAD9B5D,EAAA,GAAAC,EAoBS,UAAA;;IAlBN,iBAAa,GAAKW,EAAAuC,CAAA,EAAE,GAAIS,EAAM;IAC9B,iBAAa,CAAGZ,EAAA,MAAU,SAASY,EAAM,EAAE;IAC3C,cAAYZ,EAAA,MAAU,SAASY,EAAM,EAAE,IAAIhB,EAAA,cAAcA,EAAA;IACzD,OAAK1C,EAAEkC,CAAU;IAClB,MAAK;IACJ,UAAK,MAAEyB,EAAYD,EAAM,EAAE;G,KAE5B5D,EAAA,GAAAC,EAUM,OAAA;IATJ,eAAY;IACZ,OAAKC,EAAA,CAAC,qEACE+D,EAAYL,CAAK,KAAA,YAAA,CAAA;IACzB,kBAAe;IACf,mBAAgB;IAChB,gBAAa;IACb,SAAQ;G,iBAERrD,EAA6B,QAAA,EAAvB,GAAE,mBAAkB,GAAA,MAAA,EAAA,C;GAKtBwF,EAAOnC,CAAK,KAFpB5D,EAAA,GAAAS,EAaYI,EAAA,IAZD+B,EAAA,cAAY,GAAA;;IAEpB,IAAE,GAAKhC,EAAAuC,CAAA,EAAE,GAAIS,EAAM,GAAE;IACtB,OAAM;;IAEN,SAAA9C,QAMC,CANDV,EAMCmG,EAAA,QAAA,gBAAA;KALE,WAAWvD,EAAA,MAAU,SAASY,EAAM,EAAE;KACtC,OAAOA,EAAM,SAASA,EAAM,MAAM;KAC3B;IAHV,SAMC,CADK7C,EAAAC,EAAA4C,EAAM,MAAM,GAAA,CAAA,C;;G,qBAGpB5D,EAAA,GAAAC,EAUWI,GAAA,EAAA,KAAA,EAAA,GAAA;IATTD,EAA4CmG,EAAA,QAAA,iBAAA,EAA9B,SAAK,CAAA;KACnBvG,EAAA,GAAAS,EAMYI,EAAA,IALD+B,EAAA,cAAY,GAAA;KACpB,IAAE,GAAKhC,EAAAuC,CAAA,EAAE,GAAIS,EAAM,GAAE;KACtB,OAAM;;KAEN,SAAA9C,QAAgB,CAAbC,EAAAC,EAAA4C,EAAM,IAAI,GAAA,CAAA,C;;;IAEfrD,EAAoG,QAApGoB,IAAoGX,EAA3C4C,EAAM,SAASA,EAAM,MAAM,MAAM,GAAA,CAAA;;GAE5FrD,EAEO,QAFPqB,IAEO,CADLxB,EAA4CmG,EAAA,QAAA,iBAAA,EAA9B,SAAK,CAAA,C;GAGb3D,EAAA,SADR5C,EAAA,GAAAC,EAgBS,UAAA;;IAdN,cAAY2C,EAAA,SAAS,QAAO,WAAYoD,GAAUpC,CAAK,CAAA;IACvD,OAAK1D,EAAEkC,CAAU;IAClB,MAAK;IACJ,UAAK,MAAEQ,EAAA,MAAMgB,CAAK;G,iBAEnBrD,EAQM,OAAA;IAPJ,eAAY;IACZ,OAAM;IACN,kBAAe;IACf,gBAAa;IACb,SAAQ;G,IAERA,EAA6B,QAAA,EAAvB,GAAE,mBAAkB,CAAA,C;E,oBAIhCU,EAAAV,EAsFK,MAAA;GAtF6B,IAAE,GAAKK,EAAAuC,CAAA,EAAE,GAAIS,EAAM;GAAM,OAAM;E,KAC/D5D,EAAA,EAAA,GAAAC,EAoFcI,GAAA,MAAAC,EAnFGsD,EAAM,QAAd,OADT5D,EAAA,GAAAS,EAoFcS,GAAA;GAlFX,KAAKqC,EAAKC,CAAI;GACd,UAAQ,CAAGZ,EAAA;GACX,OAAOA,EAAA,eAAeY,CAAI;GAC1B,OAAOZ,EAAA;GACP,cAAU,MAAEC,EAAI,gBAAiB2E,GAAQhE,CAAI;;GAE9C,SAAA1C,QA2EK,CA3ELP,EA2EK,MAAA;IA1EH,OAAKL,EAAA,CAAC,uIAAqI,CACjH0C,EAAA,YAAQ,+CAAmEE,EAAA,MAAS,SAASS,EAAKC,CAAI,CAAA,I;IAM/H,OAAKrD,EAAEqD,EAAK,QAAK,EAAA,aAAA,GAAqBA,EAAK,QAAK,GAAA,IAAA,IAAc,KAAA,CAAS;;IAIhEuB,EAAA,SADR/E,EAAA,GAAAC,EAaO,QAAA;;KAXL,OAAKC,EAAA,CAAC,mFAAiF,CAC9E4C,EAAA,MAAS,UAAM,8DAAA,CAAA;KACxB,mBAAA;KACC,OAAK3C,EAAA,EAAA,MAAA,GAAA,MAAmBqD,EAAK,SAAK,KAAA,GAAA,IAAA,CAAA;I,IAEnC7C,EAKEQ,GAAA;KAJC,cAAYyB,EAAA;KACZ,eAAaE,EAAA,MAAS,SAASS,EAAKC,CAAI,CAAA;KACzC,UAAS;KACR,wBAAkB,MAAEY,EAAOZ,CAAI;;;;;;IAI5BkC,EAAA,SADR1F,EAAA,GAAAC,EAWO,QAAA;;KATL,OAAKC,EAAA,CAAC,iEACE4C,EAAA,MAAS,SAAM,gBAAA,uCAAA,CAAA;I,IAEvBnC,EAKEQ,GAAA;KAJC,cAAYyB,EAAA;KACZ,eAAaE,EAAA,MAAS,SAASS,EAAKC,CAAI,CAAA;KACzC,UAAS;KACR,wBAAkB,MAAEY,EAAOZ,CAAI;;;;;;IAGpCjD,EAqCM,OAAA;KApCJ,OAAKL,EAAA,CAAC,uEAAqE,CAClEwF,EAAA,QAAM,WAAA,SAAuB9C,EAAA,cAAcA,EAAA,eAAU,gBAAA,CAAA,CAAA;KAC9D,iBAAA;KACC,MAAMA,EAAA,aAAU,WAAc,KAAA;KAC9B,UAAUa,EAAA,QAAW,IAAO,KAAA;KAC5B,UAAK,MAAEoB,GAAS2C,GAAQhE,CAAI;KAC5B,YAAO,MAAEyB,GAAUuC,GAAQhE,CAAI;KAC/B,aAAWwB;;KAGJnF,EAAAA,OAAO,WADfG,EAAA,GAAAC,EAiBO,QAAA;;MAfL,OAAKC,EAAA,CAAC,oEACuB6E,EAAA,UAAgCjC,EAAA,MAAS,S;K,IAOtE1C,EAMEmG,EAAA,QAAA,WAAA;MALO;MAEN,UAAUzD,EAAA,MAAS,SAASS,EAAKC,CAAI,CAAA;MACrC,WAAWV,EAAA,MAAS,SAAM;MAC1B,cAAcsB,EAAOZ,CAAI;;KAG9BjD,EAEO,QAFPyB,IAEO,CADL5B,EAAsDmG,EAAA,QAAA,SAAA,EAAzC,QAAI,SAAqC,CAAnBxF,EAAAC,EAAAwC,EAAK,IAAI,GAAA,CAAA,C;KAGtC3D,EAAAA,OAAO,QADfG,EAAA,GAAAC,EAKO,QALPgC,GAKO,CADL7B,EAAiCmG,EAAA,QAAA,QAAA,EAApB,QAAI,CAAA,C;;;;;;;;;E,uBAjFd,CAAAnF,IAAA,CAAA6C,EAAYL,CAAK,CAAA,C"}
+{"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","_withModifiers","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","_hoisted_11","_hoisted_12","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","useDragMove","g","group","index","shownGroups","dragged","isTarget","target","dropsAtEnd","isEmpty","toggleGroup","groupId","x","collapsibleGroup","isCollapsed","visibleItems","anchorKey","toggle","key","selectRange","keys","to","from","span","select","items","clickRow","endedDrag","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","createElementVNode","createCommentVNode","r","createBlock","createVNode","_cache","unref","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","withDirectives","$event","withModifiers","onPointerDown","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 { useDragMove } from '../internal/useDragMove'\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  /** Rows drag between groups (`@move`), e.g. to change a record's status: a copy follows the pointer and a line marks\n   *  where it lands. With a mouse after a few pixels, with a finger after a short press; Escape cancels. */\n  draggable?: boolean\n  /** Groups with no items are left out, except while a row is dragged, so one can still be dropped into them. */\n  hideEmpty?: 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  draggable: false,\n  hideEmpty: 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<{\n  'context-item': [action: DropdownMenuAction, item: T]\n  /** A row dropped into another group, at its index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, group: string, index: number]\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. 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)\n\nconst { dragged, target, onPointerDown, endedDrag } = useDragMove({\n  root,\n  countOf: (group) => props.groups.find((g) => g.id === group)?.items.length ?? 0,\n  onMove: (id, group, index) => emit('move', id, group, index),\n  ghostMaxWidth: 360,\n  tilt: false,\n  // A row has no ground of its own: the copy takes the list's surface and a hairline.\n  ghostStyle: {\n    background: 'rgb(var(--sui-raised))',\n    border: '1px solid rgb(var(--sui-edge))',\n    borderRadius: '10px'\n  }\n})\nconst shownGroups = computed(() =>\n  props.hideEmpty && !dragged.value ? props.groups.filter((group) => group.items.length > 0) : props.groups\n)\nconst isTarget = (group: string, index: number, item: T) =>\n  target.value?.zone === group &&\n  target.value.index === index &&\n  dragged.value?.id !== idOf(item) &&\n  dragged.value?.zone !== group\n// Dropped past a group's last row, into an empty group, or onto a collapsed one: it lands at the end.\nconst dropsAtEnd = (group: DataListGroup<T>) =>\n  target.value?.zone === group.id && dragged.value?.zone !== group.id && target.value.index >= group.items.length\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 (endedDrag()) return\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 shownGroups\"\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=\"[\n          cards ? card : 'border-t border-sui-line-subtle first:border-t-0',\n          dragged && target?.zone === group.id && dragged.zone !== group.id && 'ring-2 ring-sui-accent-line ring-inset'\n        ]\"\n        :data-drag-zone=\"draggable ? group.id : undefined\"\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, index) 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-[background-color,opacity] duration-100 has-focus-visible:sui-ring-inset\"\n              :class=\"[\n                dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle',\n                draggable && 'select-none',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(group.id, index, item) && 'shadow-[inset_0_2px_0_rgb(var(--sui-accent-solid))]',\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              :data-drag-index=\"draggable ? index : undefined\"\n              :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n              @dragstart.prevent\n              @pointerdown=\"draggable && onPointerDown($event, idOf(item), group.id, index)\"\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                data-no-drag\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                data-no-drag\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          <li v-if=\"dragged && dropsAtEnd(group)\" aria-hidden=\"true\" class=\"h-0.5 bg-sui-accent-solid\" />\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/Dialog/Dialog.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import e from "../Button/Button.js";
 import t from "../Icon/Icon.js";
 import n from "../Tooltip/Tooltip.js";
-import r from "../internal/CloseIcon.js";
-import i from "../Kbd/Kbd.js";
+import r from "../Kbd/Kbd.js";
+import i from "../internal/CloseIcon.js";
 import a from "./ContextSeparator.js";
 import { focusFirst as o, modifierKey as s } from "./focus.js";
 import { useSheetDrag as c } from "./useSheetDrag.js";
@@ -149,7 +149,7 @@ var se = {
 									variant: "ghost",
 									onClick: Q
 								}, {
-									default: D(() => [g(r, { class: "fill-sui-ink-subtle stroke-sui-ink-subtle" })]),
+									default: D(() => [g(i, { class: "fill-sui-ink-subtle stroke-sui-ink-subtle" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
@@ -206,7 +206,7 @@ var se = {
 									variant: "ghost",
 									onClick: Q
 								}, {
-									default: D(() => [g(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
+									default: D(() => [g(i, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
@@ -231,7 +231,7 @@ var se = {
 									variant: "ghost",
 									onClick: Q
 								}, {
-									default: D(() => [g(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
+									default: D(() => [g(i, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
@@ -248,10 +248,10 @@ var se = {
 								C(s.$slots, "footer-start"),
 								_.hint ? (S(), p("span", F, w(_.hint), 1)) : f("", !0),
 								c[8] ||= m("span", { class: "flex-1" }, null, -1),
-								_.confirmLabel ? (S(), p("span", I, [g(i, null, {
+								_.confirmLabel ? (S(), p("span", I, [g(r, null, {
 									default: D(() => [h(w(T(H)), 1)]),
 									_: 1
-								}), g(i, null, {
+								}), g(r, null, {
 									default: D(() => [...c[7] ||= [h("↵", -1)]]),
 									_: 1
 								})])) : f("", !0),

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeClass","_normalizeStyle","_withKeys","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode","_mergeProps","_Fragment","_renderSlot","ContextSeparator","_createTextVNode","Tooltip","Button","CloseIcon","Icon","_withModifiers","Kbd","Button_default","Icon_default","Tooltip_default","CloseIcon_default","Kbd_default","ContextSeparator_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasContext","computed","modKey","modifierKey","hasFooter","banded","sizes","width","bandColour","narrow","ref","query","onQuery","watch","presentation","below","onBeforeUnmount","sheet","panel","useTemplateRef","drag","useSheetDrag","cancel","isOpen","iconColours","onOutside","event","confirmFromKeyboard","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","normalizeClass","DialogContent","normalizeStyle","withKeys","focusFirst","createCommentVNode","createElementBlock","toDisplayString","createElementVNode","mergeProps","DialogTitle","createTextVNode","Fragment","renderSlot","_ctx","withModifiers"],"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":"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"}
+{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeClass","_normalizeStyle","_withKeys","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode","_mergeProps","_Fragment","_renderSlot","ContextSeparator","_createTextVNode","Tooltip","Button","CloseIcon","Icon","_withModifiers","Kbd","Button_default","Icon_default","Tooltip_default","Kbd_default","CloseIcon_default","ContextSeparator_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasContext","computed","modKey","modifierKey","hasFooter","banded","sizes","width","bandColour","narrow","ref","query","onQuery","watch","presentation","below","onBeforeUnmount","sheet","panel","useTemplateRef","drag","useSheetDrag","cancel","isOpen","iconColours","onOutside","event","confirmFromKeyboard","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","normalizeClass","DialogContent","normalizeStyle","withKeys","focusFirst","createCommentVNode","createElementBlock","toDisplayString","createElementVNode","mergeProps","DialogTitle","createTextVNode","Fragment","renderSlot","_ctx","withModifiers"],"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":"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"}

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

@@ -30,12 +30,12 @@ declare const __VLS_base: import("vue").DefineComponent<DropdownMenuProps, {}, {
     onHide?: (() => any) | undefined;
 }>, {
     align: "start" | "end";
-    confirmLabel: string;
-    cancelLabel: string;
     id: string;
     confirmTitle: string;
     confirmMessage: string;
+    confirmLabel: string;
     deleteLabel: string;
+    cancelLabel: string;
     items: DropdownMenuEntry[];
     buttonIcon: string;
     buttonLabel: string;

package/dist/components/Filters/FilterChip.vue.d.ts

@@ -42,23 +42,23 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FilterValue) => any;
     "update:open": (value: boolean) => any;
+    "update:modelValue": (value: FilterValue) => any;
     "update:op": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FilterValue) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FilterValue) => any) | undefined;
     "onUpdate:op"?: ((value: string | undefined) => any) | undefined;
 }>, {
     type: FilterFieldType;
     summary: FilterSummary;
     icon: string;
+    options: FilterOption[];
     closeLabel: string;
     status: string;
     searchPlaceholder: string;
     addLabel: string;
     field: string;
-    options: FilterOption[];
     doneLabel: string;
     removeLabel: string;
     onRemove: () => void;

package/dist/components/Filters/FilterMenu.vue.d.ts

@@ -36,17 +36,17 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    pick: (name: string) => any;
     "update:open": (value: boolean) => any;
+    pick: (name: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onPick?: ((name: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onPick?: ((name: string) => any) | undefined;
 }>, {
     variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     label: string;
-    closeLabel: string;
     buttonLabel: string;
+    closeLabel: string;
     status: string;
     inUse: string[];
     searchPlaceholder: string;

package/dist/components/Filters/SortMenu.vue.d.ts

@@ -36,18 +36,18 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: ViewSort | null) => any;
     "update:open": (value: boolean) => any;
+    "update:modelValue": (value: ViewSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: ViewSort | null) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ViewSort | null) => any) | undefined;
 }>, {
     variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     title: string;
+    buttonLabel: string;
     clearLabel: string;
     closeLabel: string;
-    buttonLabel: string;
     status: string;
     directionLabels: Partial<Record<FilterFieldType, [string, string]>>;
     directionLabel: string;

package/dist/components/PropertyList/Editable.vue.d.ts

@@ -21,8 +21,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectValue | null) => any) | undefined;
 }>, {
     variant: "text" | "select" | "title" | "multiline";
-    placeholder: string;
     options: SelectOption<SelectValue>[];
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/Toast/ToastMessage.vue.d.ts

@@ -22,9 +22,9 @@ declare const __VLS_export: import("vue").DefineComponent<ToastMessageProps, {},
     onExpire?: (() => any) | undefined;
 }>, {
     actions: ToastAction[];
-    detail: string;
     closable: boolean;
     closeLabel: string;
+    detail: string;
     life: number;
     severity: ToastSeverity;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/Toast/Toaster.vue.d.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<ToasterProps, {}, {},
     onClose?: ((id: string | number, reason: ToastDismissReason) => any) | undefined;
 }>, {
     label: string;
-    closeLabel: string;
     position: ToasterPosition;
+    closeLabel: string;
     preview: ToastPreview[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/internal/useDragMove.d.ts

@@ -0,0 +1,50 @@
+import { type Ref } from 'vue';
+/**
+ * Dragging an item between zones (a Board's columns, a DataList's groups) on pointer events, so it works with a mouse,
+ * a pen and a finger. A mouse drags once it moves a few pixels, so a click still clicks; a finger after a short press,
+ * so a swipe still scrolls. A copy of the item follows the pointer; Escape puts it back.
+ *
+ * Zones carry `data-drag-zone="<id>"` and items `data-drag-index="<i>"` inside them.
+ */
+export interface DragMoveOptions {
+    root: Ref<HTMLElement | null | undefined>;
+    /** How many items a zone holds, for a drop past its last one. */
+    countOf: (zone: string) => number;
+    /** Items also reorder within their zone. */
+    sortable?: () => boolean;
+    onMove: (id: unknown, zone: string, index: number) => void;
+    /** Extra inline style for the copy that follows the pointer, e.g. a ground for a row that has none of its own. */
+    ghostStyle?: Partial<CSSStyleDeclaration>;
+    /** The copy's widest, so a full-width row follows the pointer as a compact line. */
+    ghostMaxWidth?: number;
+    /** The copy leans a little, as a card picked up does; off for rows. */
+    tilt?: boolean;
+}
+export declare function useDragMove(options: DragMoveOptions): {
+    dragged: Ref<{
+        id: unknown;
+        zone: string;
+        index: number;
+    } | null, {
+        id: unknown;
+        zone: string;
+        index: number;
+    } | {
+        id: unknown;
+        zone: string;
+        index: number;
+    } | null>;
+    target: Ref<{
+        zone: string;
+        index: number;
+    } | null, {
+        zone: string;
+        index: number;
+    } | {
+        zone: string;
+        index: number;
+    } | null>;
+    onPointerDown: (event: PointerEvent, id: unknown, zone: string, index: number) => void;
+    /** The click that ended a drag, to ignore. */
+    endedDrag: () => boolean;
+};