@sparklingopinions/sparkling-ui 0.7.0 → 0.9.1

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

@@ -1 +1 @@
-{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_createElementVNode","_mergeProps","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","Tag","_normalizeClass","_normalizeStyle","Spinner","_createTextVNode","CheckIcon","CheckIcon_default","Spinner_default","Tag_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","optionClass","Select_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","emit","attrs","useAttrs","label","computed","triggerAttrs","key","model","useModel","open","ref","query","keyboard","values","picked","shallowRef","selected","list","option","value","search","removable","matches","text","listed","showCreate","virtual","createHues","newHue","CREATE","fieldAttrs","isInvalid","useFieldControl","setQuery","show","viaKeyboard","close","toggle","event","choose","known","creating","create","draft","error","onSelect","row","remove","chosen","onKeydown","onTriggerKeydown","onOpenAutoFocus","nextTick","anchor","onPointerDownOutside","target","returnFocus","listbox","onHighlight","payload","triggerSizes","openBlock","createBlock","unref","PopoverRoot","_cache","withCtx","createVNode","PopoverAnchor","renderSlot","_ctx","createElementVNode","mergeProps","createElementBlock","toDisplayString","createCommentVNode","Fragment","renderList","PopoverPortal","PopoverContent","normalizeClass","normalizeStyle","ListboxRoot","ListboxFilter","ListboxContent","ListboxVirtualizer","ListboxItem","$event","createTextVNode"],"sources":["../../../src/components/Select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends SelectValue\">\nimport { computed, nextTick, ref, shallowRef, useAttrs } from 'vue'\n\nimport {\n  ListboxContent,\n  ListboxFilter,\n  ListboxItem,\n  ListboxRoot,\n  ListboxVirtualizer,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot\n} from 'reka-ui'\n\nimport type { Hue } from '../../utils/hues'\nimport { useFieldControl } from '../FormField/context'\nimport Spinner from '../Spinner/Spinner.vue'\nimport Tag from '../Tag/Tag.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport type { SelectOption, SelectValue } from './types'\n\nexport interface SelectProps<T extends SelectValue> {\n  options: SelectOption<T>[]\n  /** The options for chosen values that aren't in `options`, such as a saved choice while `options` holds search\n   *  results. Options picked from the list are remembered without it. */\n  selectedOptions?: SelectOption<T>[]\n  multiple?: boolean\n  /** Lets a single choice be removed, as a tag in the filter row or with Backspace there. */\n  clearable?: boolean\n  /** A filter row at the top of the list; on by default for `multiple`, `canCreate` or more than 8 options. */\n  searchable?: boolean\n  /** Narrows `options` to what's typed: by label, or by your function. `false` when `options` are already the results\n   *  for the query, such as from a server search through `query-change`. */\n  filter?: boolean | ((option: SelectOption<T>, query: string) => boolean)\n  /** Offers to create what was typed, through `createOption`. */\n  canCreate?: boolean\n  /** Makes the created option; by default its value is its label. */\n  createOption?: (draft: { label: string; color?: Hue }) => SelectOption<T> | Promise<SelectOption<T>>\n  /** Creates with a hue, shown as a tag. */\n  createColored?: boolean\n  loading?: boolean\n  /** 36px for forms, 28px for table feet and toolbars. */\n  size?: 'md' | 'sm'\n  disabled?: boolean\n  invalid?: boolean\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyLabel?: string\n  createLabel?: string\n  removeLabel?: string\n  /** Where the list opens; it flips when there's no room. */\n  side?: 'bottom' | 'top'\n  align?: 'start' | 'end'\n  /** The list's width, when it should differ from the trigger's, e.g. `20rem`. */\n  panelWidth?: string\n}\n\n// Attributes (aria-label, class for its width) go to the trigger, the one element in the page's flow.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SelectProps<T>>(), {\n  selectedOptions: () => [],\n  searchable: undefined,\n  filter: true,\n  createOption: undefined,\n  createColored: true,\n  size: 'md',\n  placeholder: 'Select an option',\n  searchPlaceholder: 'Type to filter',\n  emptyLabel: 'No results found',\n  createLabel: 'Create',\n  removeLabel: 'Remove',\n  side: 'bottom',\n  align: 'start',\n  panelWidth: undefined\n})\n\nconst emit = defineEmits<{ 'query-change': [query: string]; 'create-error': [error: unknown] }>()\n\n// An aria-label would hide the trigger's visible value from its name; it's said before the value instead.\nconst attrs = useAttrs()\nconst label = computed(() => attrs['aria-label'] as string | undefined)\nconst triggerAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'aria-label')))\n\nconst model = defineModel<T | T[] | null>({ default: null })\n\nconst open = ref(false)\nconst query = ref('')\nconst keyboard = ref(false)\n\nconst values = computed<T[]>(() =>\n  Array.isArray(model.value) ? model.value : model.value === null || model.value === undefined ? [] : [model.value]\n)\n// Options picked from earlier results, which `options` may no longer hold.\nconst picked = shallowRef<SelectOption<T>[]>([])\nconst selected = computed(() =>\n  values.value\n    .map((value) =>\n      [props.options, props.selectedOptions, picked.value]\n        .map((list) => list.find((option) => option.value === value))\n        .find((option) => !!option)\n    )\n    .filter((option) => !!option)\n)\nconst search = computed(\n  () =>\n    props.searchable ??\n    (props.multiple || props.canCreate || props.clearable || props.filter === false || props.options.length > 8)\n)\nconst removable = computed(() => props.multiple || props.clearable)\nconst matches = (option: SelectOption<T>, text: string) =>\n  typeof props.filter === 'function'\n    ? props.filter(option, text)\n    : option.label.toLowerCase().includes(text.toLowerCase())\nconst listed = computed(() => {\n  const text = query.value.trim()\n  return props.options\n    .filter((option) => !(props.multiple && search.value && values.value.includes(option.value)))\n    .filter((option) => !text || props.filter === false || matches(option, text))\n})\nconst showCreate = computed(() => {\n  const text = query.value.trim().toLowerCase()\n  return props.canCreate && !!text && !props.options.some((option) => option.label.toLowerCase() === text)\n})\n// More than this and the list renders only the rows in view.\nconst virtual = computed(() => listed.value.length > 20)\n\nconst createHues: Hue[] = ['gray', 'purple', 'red', 'green', 'orange', 'pink', 'blue', 'slate']\nconst newHue = computed(() => createHues[query.value.length % createHues.length])\nconst CREATE = { create: true } as const\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n  () => undefined,\n  () => props.invalid\n)\n\nfunction setQuery(text: string) {\n  query.value = text\n  emit('query-change', text)\n}\n\nfunction show(viaKeyboard: boolean) {\n  if (props.disabled) return\n  keyboard.value = viaKeyboard\n  open.value = true\n}\n\nfunction close() {\n  open.value = false\n  if (query.value) setQuery('')\n}\n\nfunction toggle(event?: Event) {\n  if (open.value) close()\n  // A click from the keyboard (Enter, Space) has no pointer position.\n  else show(!!event && (event as MouseEvent).detail === 0)\n}\n\nfunction choose(option: SelectOption<T>) {\n  picked.value = [option, ...picked.value.filter((known) => known.value !== option.value)]\n  if (props.multiple) {\n    model.value = values.value.includes(option.value)\n      ? values.value.filter((value) => value !== option.value)\n      : [...values.value, option.value]\n    setQuery('')\n  } else {\n    model.value = option.value\n    close()\n  }\n}\n\nconst creating = ref(false)\n\n// A failed createOption keeps what was typed, so it can be tried again.\nasync function create() {\n  if (creating.value) return\n  const label = query.value.trim()\n  const draft = props.createColored ? { label, color: newHue.value } : { label }\n  creating.value = true\n  try {\n    const option = props.createOption\n      ? await props.createOption(draft)\n      : ({ value: label as T, label, color: draft.color } as SelectOption<T>)\n    choose(option)\n  } catch (error) {\n    emit('create-error', error)\n  } finally {\n    creating.value = false\n  }\n}\n\nfunction onSelect(event: CustomEvent, row: SelectOption<T> | typeof CREATE) {\n  // What's chosen lives in the model; the listbox keeps no selection of its own.\n  event.preventDefault()\n  if ('create' in row) create()\n  else if (!row.disabled) choose(row)\n}\n\nfunction remove(value: T) {\n  model.value = props.multiple ? values.value.filter((chosen) => chosen !== value) : null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n  if (event.key === 'Backspace' && removable.value && !query.value && values.value.length)\n    remove(values.value[values.value.length - 1]!)\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (!open.value && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n    event.preventDefault()\n    show(true)\n  }\n}\n\n// The filter takes focus when there is one, or else the list, so the arrow keys work at once.\nfunction onOpenAutoFocus(event: Event) {\n  event.preventDefault()\n  nextTick(() =>\n    (event.target as HTMLElement | null)?.querySelector<HTMLElement>('[data-select-filter], [role=\"listbox\"]')?.focus()\n  )\n}\n\n// Back to the trigger, which Reka can't find: it's our anchor, not its trigger.\nconst anchor = ref<{ $el: HTMLElement }>()\n\n// Nor does Reka know a press on it isn't outside: closing there would let the click reopen the list.\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n  const target = event.detail.originalEvent.target\n  if (target instanceof Node && anchor.value?.$el?.contains(target)) event.preventDefault()\n}\nfunction returnFocus(event: Event) {\n  event.preventDefault()\n  anchor.value?.$el?.focus()\n}\n\n// Reka highlights the first option as the list mounts; only the chosen one, or the keyboard, should be.\nconst listbox = ref()\nfunction onHighlight(payload: { value: unknown } | undefined) {\n  if (keyboard.value || !payload) return\n  if (values.value.includes(payload.value as T)) return\n  nextTick(() => listbox.value && !keyboard.value && (listbox.value.highlightedElement = null))\n}\n\nconst triggerSizes = { md: 'min-h-9 pr-2.5 pl-3 text-sm', sm: 'h-7 pr-1.5 pl-2 text-13' }\nconst optionClass =\n  'flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-lg py-1.5 pr-2 pl-2.5 text-13 whitespace-nowrap text-sui-ink outline-hidden select-none data-disabled:cursor-default data-disabled:opacity-50 data-highlighted:bg-sui-sunken data-[state=checked]:font-medium data-[state=checked]:text-sui-accent group-data-keyboard/list:data-highlighted:sui-ring-inset'\n</script>\n\n<!-- One select for every choice: a short fixed list, a searchable one, several values as tags (`multiple`), or creating\n     what was typed (`canCreate`). For a server search, set `:filter=\"false\"` and replace `options` on `query-change`. The `trigger` slot draws your own trigger and gets `open`, `toggle` and `selected`. -->\n<template>\n  <PopoverRoot :open=\"open\" @update:open=\"(value) => (value ? show(false) : close())\">\n    <PopoverAnchor ref=\"anchor\" as-child>\n      <slot name=\"trigger\" :open=\"open\" :selected=\"selected\" :toggle=\"toggle\">\n        <button\n          v-bind=\"{ ...fieldAttrs, ...triggerAttrs }\"\n          :aria-expanded=\"open\"\n          aria-haspopup=\"listbox\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          class=\"group inline-flex items-center justify-between gap-1.5 rounded-(--sui-radius-button) border bg-sui-surface text-left text-sui-ink transition-[border-color,box-shadow] duration-150 focus-visible:border-sui-accent focus-visible:sui-ring-field disabled:pointer-events-none disabled:opacity-60\"\n          :class=\"[\n            triggerSizes[size],\n            isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-strong hover:border-sui-ink-muted'\n          ]\"\n          :disabled=\"disabled\"\n          type=\"button\"\n          @click=\"toggle\"\n          @keydown=\"onTriggerKeydown\"\n        >\n          <span v-if=\"label\" class=\"sr-only\">{{ label }}: </span>\n          <span v-if=\"!selected.length\" class=\"text-sui-ink-faint\">{{ placeholder }}</span>\n          <span v-else-if=\"multiple\" class=\"flex flex-wrap gap-1 py-1.25\">\n            <Tag\n              v-for=\"option in selected\"\n              :key=\"option.value\"\n              :color=\"option.color ?? undefined\"\n              :name=\"option.label\"\n            />\n          </span>\n          <Tag v-else-if=\"selected[0]!.color\" :color=\"selected[0]!.color\" :name=\"selected[0]!.label\" />\n          <span v-else class=\"min-w-0 truncate whitespace-nowrap\">{{ selected[0]!.label }}</span>\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4 shrink-0 fill-none stroke-sui-ink-muted transition-transform duration-150 group-aria-expanded:rotate-180\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4.5 6.5 8 10l3.5-3.5\" />\n          </svg>\n        </button>\n      </slot>\n    </PopoverAnchor>\n    <PopoverPortal>\n      <PopoverContent\n        :align=\"align\"\n        :aria-label=\"label ?? placeholder\"\n        class=\"z-[1100] overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-menu-in\"\n        :class=\"\n          search ? 'min-w-[max(var(--reka-popover-trigger-width),15rem)]' : 'min-w-(--reka-popover-trigger-width)'\n        \"\n        :side=\"side\"\n        :side-offset=\"4\"\n        :style=\"panelWidth ? { width: panelWidth } : undefined\"\n        @close-auto-focus=\"returnFocus\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @pointer-down-outside=\"onPointerDownOutside\"\n      >\n        <ListboxRoot\n          ref=\"listbox\"\n          :highlight-on-hover=\"true\"\n          :model-value=\"multiple ? values : (values[0] ?? undefined)\"\n          :multiple=\"multiple\"\n          @highlight=\"onHighlight\"\n          @keydown=\"onKeydown\"\n          @pointermove=\"keyboard = false\"\n        >\n          <div\n            v-if=\"search\"\n            class=\"flex min-h-11 flex-wrap items-center gap-1 border-b border-sui-line-subtle px-3 py-2.5\"\n          >\n            <template v-if=\"removable\">\n              <Tag\n                v-for=\"option in selected\"\n                :key=\"option.value\"\n                :color=\"option.color ?? undefined\"\n                :name=\"option.label\"\n                removable\n                :remove-label=\"removeLabel\"\n                @remove=\"remove(option.value)\"\n              />\n            </template>\n            <!-- focus: classes too: an app's forms plugin rings focused text fields, and outranks plain utilities. -->\n            <ListboxFilter\n              :aria-label=\"label ?? placeholder\"\n              class=\"h-5 min-w-16 flex-1 rounded-none border-none bg-transparent p-0 text-13 text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n              data-select-filter\n              :model-value=\"query\"\n              :placeholder=\"removable && selected.length ? '' : searchPlaceholder\"\n              @update:model-value=\"setQuery\"\n            />\n          </div>\n          <div v-if=\"loading\" class=\"flex justify-center py-6\"><Spinner size=\"sm\" /></div>\n          <ListboxContent\n            v-else-if=\"listed.length || showCreate\"\n            :aria-label=\"label ?? placeholder\"\n            class=\"group/list max-h-60 overflow-auto p-1 outline-hidden\"\n            :data-keyboard=\"keyboard || undefined\"\n          >\n            <ListboxVirtualizer\n              v-if=\"virtual\"\n              v-slot=\"{ option }\"\n              :estimate-size=\"32\"\n              :options=\"listed\"\n              :text-content=\"(option) => option.label\"\n            >\n              <ListboxItem\n                :class=\"optionClass\"\n                :disabled=\"option.disabled\"\n                :value=\"option.value\"\n                @select=\"onSelect($event, option as SelectOption<T>)\"\n              >\n                <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n                  <slot name=\"option\" :option=\"option as SelectOption<T>\">\n                    <Tag v-if=\"option.color\" :color=\"option.color\" :name=\"option.label\" />\n                    <template v-else>{{ option.label }}</template>\n                  </slot>\n                </span>\n                <CheckIcon v-if=\"values.includes(option.value)\" />\n              </ListboxItem>\n            </ListboxVirtualizer>\n            <template v-else>\n              <ListboxItem\n                v-for=\"option in listed\"\n                :key=\"option.value\"\n                :class=\"optionClass\"\n                :disabled=\"option.disabled\"\n                :value=\"option.value\"\n                @select=\"onSelect($event, option)\"\n              >\n                <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n                  <slot name=\"option\" :option=\"option\">\n                    <Tag v-if=\"option.color\" :color=\"option.color\" :name=\"option.label\" />\n                    <template v-else>{{ option.label }}</template>\n                  </slot>\n                </span>\n                <CheckIcon v-if=\"values.includes(option.value)\" />\n              </ListboxItem>\n            </template>\n            <ListboxItem v-if=\"showCreate\" :class=\"optionClass\" :value=\"CREATE\" @select=\"onSelect($event, CREATE)\">\n              <span class=\"inline-flex min-w-0 items-center gap-1.5\">\n                {{ createLabel }}\n                <Tag v-if=\"createColored\" :color=\"newHue\" :name=\"query.trim()\" />\n                <strong v-else class=\"font-medium\">“{{ query.trim() }}”</strong>\n              </span>\n            </ListboxItem>\n          </ListboxContent>\n          <div v-else class=\"px-3.5 py-3 text-13 text-sui-ink-muted\">{{ emptyLabel }}</div>\n        </ListboxRoot>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_createElementVNode","_mergeProps","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","Tag","Icon","_normalizeClass","_normalizeStyle","Spinner","_createTextVNode","CheckIcon","Icon_default","CheckIcon_default","Spinner_default","Tag_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","_hoisted_13","_hoisted_14","optionClass","Select_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","emit","attrs","useAttrs","label","computed","triggerAttrs","key","model","useModel","open","ref","query","keyboard","values","picked","shallowRef","selected","list","option","value","search","removable","matches","text","listed","showCreate","virtual","createHues","newHue","CREATE","fieldAttrs","isInvalid","useFieldControl","setQuery","show","viaKeyboard","close","toggle","event","choose","known","creating","create","draft","error","onSelect","row","remove","chosen","onKeydown","onTriggerKeydown","onOpenAutoFocus","nextTick","anchor","onPointerDownOutside","target","returnFocus","listbox","onHighlight","payload","triggerSizes","openBlock","createBlock","unref","PopoverRoot","_cache","withCtx","createVNode","PopoverAnchor","renderSlot","_ctx","createElementVNode","mergeProps","createElementBlock","toDisplayString","createCommentVNode","Fragment","renderList","PopoverPortal","PopoverContent","normalizeClass","normalizeStyle","ListboxRoot","ListboxFilter","ListboxContent","ListboxVirtualizer","ListboxItem","$event","createTextVNode"],"sources":["../../../src/components/Select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends SelectValue\">\nimport { computed, nextTick, ref, shallowRef, useAttrs } from 'vue'\n\nimport {\n  ListboxContent,\n  ListboxFilter,\n  ListboxItem,\n  ListboxRoot,\n  ListboxVirtualizer,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot\n} from 'reka-ui'\n\nimport type { Hue } from '../../utils/hues'\nimport { useFieldControl } from '../FormField/context'\nimport Icon from '../Icon/Icon.vue'\nimport Spinner from '../Spinner/Spinner.vue'\nimport Tag from '../Tag/Tag.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport type { SelectOption, SelectValue } from './types'\n\nexport interface SelectProps<T extends SelectValue> {\n  options: SelectOption<T>[]\n  /** The options for chosen values that aren't in `options`, such as a saved choice while `options` holds search\n   *  results. Options picked from the list are remembered without it. */\n  selectedOptions?: SelectOption<T>[]\n  multiple?: boolean\n  /** Lets a single choice be removed, as a tag in the filter row or with Backspace there. */\n  clearable?: boolean\n  /** A filter row at the top of the list; on by default for `multiple`, `canCreate` or more than 8 options. */\n  searchable?: boolean\n  /** Narrows `options` to what's typed: by label, or by your function. `false` when `options` are already the results\n   *  for the query, such as from a server search through `query-change`. */\n  filter?: boolean | ((option: SelectOption<T>, query: string) => boolean)\n  /** Offers to create what was typed, through `createOption`. */\n  canCreate?: boolean\n  /** Makes the created option; by default its value is its label. */\n  createOption?: (draft: { label: string; color?: Hue }) => SelectOption<T> | Promise<SelectOption<T>>\n  /** Creates with a hue, shown as a tag. */\n  createColored?: boolean\n  loading?: boolean\n  /** 36px for forms, 28px for table feet and toolbars. */\n  size?: 'md' | 'sm'\n  disabled?: boolean\n  invalid?: boolean\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyLabel?: string\n  createLabel?: string\n  removeLabel?: string\n  /** Where the list opens; it flips when there's no room. */\n  side?: 'bottom' | 'top'\n  align?: 'start' | 'end'\n  /** The list's width, when it should differ from the trigger's, e.g. `20rem`. */\n  panelWidth?: string\n}\n\n// Attributes (aria-label, class for its width) go to the trigger, the one element in the page's flow.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SelectProps<T>>(), {\n  selectedOptions: () => [],\n  searchable: undefined,\n  filter: true,\n  createOption: undefined,\n  createColored: true,\n  size: 'md',\n  placeholder: 'Select an option',\n  searchPlaceholder: 'Type to filter',\n  emptyLabel: 'No results found',\n  createLabel: 'Create',\n  removeLabel: 'Remove',\n  side: 'bottom',\n  align: 'start',\n  panelWidth: undefined\n})\n\nconst emit = defineEmits<{ 'query-change': [query: string]; 'create-error': [error: unknown] }>()\n\n// An aria-label would hide the trigger's visible value from its name; it's said before the value instead.\nconst attrs = useAttrs()\nconst label = computed(() => attrs['aria-label'] as string | undefined)\nconst triggerAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'aria-label')))\n\nconst model = defineModel<T | T[] | null>({ default: null })\n\nconst open = ref(false)\nconst query = ref('')\nconst keyboard = ref(false)\n\nconst values = computed<T[]>(() =>\n  Array.isArray(model.value) ? model.value : model.value === null || model.value === undefined ? [] : [model.value]\n)\n// Options picked from earlier results, which `options` may no longer hold.\nconst picked = shallowRef<SelectOption<T>[]>([])\nconst selected = computed(() =>\n  values.value\n    .map((value) =>\n      [props.options, props.selectedOptions, picked.value]\n        .map((list) => list.find((option) => option.value === value))\n        .find((option) => !!option)\n    )\n    .filter((option) => !!option)\n)\nconst search = computed(\n  () =>\n    props.searchable ??\n    (props.multiple || props.canCreate || props.clearable || props.filter === false || props.options.length > 8)\n)\nconst removable = computed(() => props.multiple || props.clearable)\nconst matches = (option: SelectOption<T>, text: string) =>\n  typeof props.filter === 'function'\n    ? props.filter(option, text)\n    : option.label.toLowerCase().includes(text.toLowerCase())\nconst listed = computed(() => {\n  const text = query.value.trim()\n  return props.options\n    .filter((option) => !(props.multiple && search.value && values.value.includes(option.value)))\n    .filter((option) => !text || props.filter === false || matches(option, text))\n})\nconst showCreate = computed(() => {\n  const text = query.value.trim().toLowerCase()\n  return props.canCreate && !!text && !props.options.some((option) => option.label.toLowerCase() === text)\n})\n// More than this and the list renders only the rows in view.\nconst virtual = computed(() => listed.value.length > 20)\n\nconst createHues: Hue[] = ['gray', 'purple', 'red', 'green', 'orange', 'pink', 'blue', 'slate']\nconst newHue = computed(() => createHues[query.value.length % createHues.length])\nconst CREATE = { create: true } as const\n\nconst { attrs: fieldAttrs, invalid: isInvalid } = useFieldControl(\n  () => undefined,\n  () => props.invalid\n)\n\nfunction setQuery(text: string) {\n  query.value = text\n  emit('query-change', text)\n}\n\nfunction show(viaKeyboard: boolean) {\n  if (props.disabled) return\n  keyboard.value = viaKeyboard\n  open.value = true\n}\n\nfunction close() {\n  open.value = false\n  if (query.value) setQuery('')\n}\n\nfunction toggle(event?: Event) {\n  if (open.value) close()\n  // A click from the keyboard (Enter, Space) has no pointer position.\n  else show(!!event && (event as MouseEvent).detail === 0)\n}\n\nfunction choose(option: SelectOption<T>) {\n  picked.value = [option, ...picked.value.filter((known) => known.value !== option.value)]\n  if (props.multiple) {\n    model.value = values.value.includes(option.value)\n      ? values.value.filter((value) => value !== option.value)\n      : [...values.value, option.value]\n    setQuery('')\n  } else {\n    model.value = option.value\n    close()\n  }\n}\n\nconst creating = ref(false)\n\n// A failed createOption keeps what was typed, so it can be tried again.\nasync function create() {\n  if (creating.value) return\n  const label = query.value.trim()\n  const draft = props.createColored ? { label, color: newHue.value } : { label }\n  creating.value = true\n  try {\n    const option = props.createOption\n      ? await props.createOption(draft)\n      : ({ value: label as T, label, color: draft.color } as SelectOption<T>)\n    choose(option)\n  } catch (error) {\n    emit('create-error', error)\n  } finally {\n    creating.value = false\n  }\n}\n\nfunction onSelect(event: CustomEvent, row: SelectOption<T> | typeof CREATE) {\n  // What's chosen lives in the model; the listbox keeps no selection of its own.\n  event.preventDefault()\n  if ('create' in row) create()\n  else if (!row.disabled) choose(row)\n}\n\nfunction remove(value: T) {\n  model.value = props.multiple ? values.value.filter((chosen) => chosen !== value) : null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n  if (event.key === 'Backspace' && removable.value && !query.value && values.value.length)\n    remove(values.value[values.value.length - 1]!)\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (!open.value && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n    event.preventDefault()\n    show(true)\n  }\n}\n\n// The filter takes focus when there is one, or else the list, so the arrow keys work at once.\nfunction onOpenAutoFocus(event: Event) {\n  event.preventDefault()\n  nextTick(() =>\n    (event.target as HTMLElement | null)?.querySelector<HTMLElement>('[data-select-filter], [role=\"listbox\"]')?.focus()\n  )\n}\n\n// Back to the trigger, which Reka can't find: it's our anchor, not its trigger.\nconst anchor = ref<{ $el: HTMLElement }>()\n\n// Nor does Reka know a press on it isn't outside: closing there would let the click reopen the list.\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n  const target = event.detail.originalEvent.target\n  if (target instanceof Node && anchor.value?.$el?.contains(target)) event.preventDefault()\n}\nfunction returnFocus(event: Event) {\n  event.preventDefault()\n  anchor.value?.$el?.focus()\n}\n\n// Reka highlights the first option as the list mounts; only the chosen one, or the keyboard, should be.\nconst listbox = ref()\nfunction onHighlight(payload: { value: unknown } | undefined) {\n  if (keyboard.value || !payload) return\n  if (values.value.includes(payload.value as T)) return\n  nextTick(() => listbox.value && !keyboard.value && (listbox.value.highlightedElement = null))\n}\n\nconst triggerSizes = { md: 'min-h-9 pr-2.5 pl-3 text-sm', sm: 'h-7 pr-1.5 pl-2 text-13' }\nconst optionClass =\n  'flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-lg py-1.5 pr-2 pl-2.5 text-13 whitespace-nowrap text-sui-ink outline-hidden select-none data-disabled:cursor-default data-disabled:opacity-50 data-highlighted:bg-sui-sunken data-[state=checked]:font-medium data-[state=checked]:text-sui-accent group-data-keyboard/list:data-highlighted:sui-ring-inset'\n</script>\n\n<!-- One select for every choice: a short fixed list, a searchable one, several values as tags (`multiple`), or creating\n     what was typed (`canCreate`). For a server search, set `:filter=\"false\"` and replace `options` on `query-change`. The `trigger` slot draws your own trigger and gets `open`, `toggle` and `selected`. -->\n<template>\n  <PopoverRoot :open=\"open\" @update:open=\"(value) => (value ? show(false) : close())\">\n    <PopoverAnchor ref=\"anchor\" as-child>\n      <slot name=\"trigger\" :open=\"open\" :selected=\"selected\" :toggle=\"toggle\">\n        <button\n          v-bind=\"{ ...fieldAttrs, ...triggerAttrs }\"\n          :aria-expanded=\"open\"\n          aria-haspopup=\"listbox\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          class=\"group inline-flex items-center justify-between gap-1.5 rounded-(--sui-radius-button) border bg-sui-surface text-left text-sui-ink transition-[border-color,box-shadow] duration-150 focus-visible:border-sui-accent focus-visible:sui-ring-field disabled:pointer-events-none disabled:opacity-60\"\n          :class=\"[\n            triggerSizes[size],\n            isInvalid ? 'border-sui-danger-mid' : 'border-sui-line-strong hover:border-sui-ink-muted'\n          ]\"\n          :disabled=\"disabled\"\n          type=\"button\"\n          @click=\"toggle\"\n          @keydown=\"onTriggerKeydown\"\n        >\n          <span v-if=\"label\" class=\"sr-only\">{{ label }}: </span>\n          <span v-if=\"!selected.length\" class=\"text-sui-ink-faint\">{{ placeholder }}</span>\n          <span v-else-if=\"multiple\" class=\"flex flex-wrap gap-1 py-1.25\">\n            <Tag\n              v-for=\"option in selected\"\n              :key=\"option.value\"\n              :color=\"option.color ?? undefined\"\n              :icon=\"option.icon\"\n              :icon-color=\"option.iconColor\"\n              :name=\"option.label\"\n            />\n          </span>\n          <Tag\n            v-else-if=\"selected[0]!.color\"\n            :color=\"selected[0]!.color\"\n            :icon=\"selected[0]!.icon\"\n            :icon-color=\"selected[0]!.iconColor\"\n            :name=\"selected[0]!.label\"\n          />\n          <span v-else-if=\"selected[0]!.icon\" class=\"inline-flex min-w-0 items-center gap-1.5\">\n            <Icon class=\"shrink-0\" :color=\"selected[0]!.iconColor ?? 'ink-subtle'\" :name=\"selected[0]!.icon\" />\n            <span class=\"truncate whitespace-nowrap\">{{ selected[0]!.label }}</span>\n          </span>\n          <span v-else class=\"min-w-0 truncate whitespace-nowrap\">{{ selected[0]!.label }}</span>\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4 shrink-0 fill-none stroke-sui-ink-muted transition-transform duration-150 group-aria-expanded:rotate-180\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4.5 6.5 8 10l3.5-3.5\" />\n          </svg>\n        </button>\n      </slot>\n    </PopoverAnchor>\n    <PopoverPortal>\n      <PopoverContent\n        :align=\"align\"\n        :aria-label=\"label ?? placeholder\"\n        class=\"z-[1100] overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-menu-in\"\n        :class=\"\n          search ? 'min-w-[max(var(--reka-popover-trigger-width),15rem)]' : 'min-w-(--reka-popover-trigger-width)'\n        \"\n        :side=\"side\"\n        :side-offset=\"4\"\n        :style=\"panelWidth ? { width: panelWidth } : undefined\"\n        @close-auto-focus=\"returnFocus\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @pointer-down-outside=\"onPointerDownOutside\"\n      >\n        <ListboxRoot\n          ref=\"listbox\"\n          :highlight-on-hover=\"true\"\n          :model-value=\"multiple ? values : (values[0] ?? undefined)\"\n          :multiple=\"multiple\"\n          @highlight=\"onHighlight\"\n          @keydown=\"onKeydown\"\n          @pointermove=\"keyboard = false\"\n        >\n          <div\n            v-if=\"search\"\n            class=\"flex min-h-11 flex-wrap items-center gap-1 border-b border-sui-line-subtle px-3 py-2.5\"\n          >\n            <template v-if=\"removable\">\n              <Tag\n                v-for=\"option in selected\"\n                :key=\"option.value\"\n                :color=\"option.color ?? undefined\"\n                :icon=\"option.icon\"\n                :icon-color=\"option.iconColor\"\n                :name=\"option.label\"\n                removable\n                :remove-label=\"removeLabel\"\n                @remove=\"remove(option.value)\"\n              />\n            </template>\n            <!-- focus: classes too: an app's forms plugin rings focused text fields, and outranks plain utilities. -->\n            <ListboxFilter\n              :aria-label=\"label ?? placeholder\"\n              class=\"h-5 min-w-16 flex-1 rounded-none border-none bg-transparent p-0 text-13 text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n              data-select-filter\n              :model-value=\"query\"\n              :placeholder=\"removable && selected.length ? '' : searchPlaceholder\"\n              @update:model-value=\"setQuery\"\n            />\n          </div>\n          <div v-if=\"loading\" class=\"flex justify-center py-6\"><Spinner size=\"sm\" /></div>\n          <ListboxContent\n            v-else-if=\"listed.length || showCreate\"\n            :aria-label=\"label ?? placeholder\"\n            class=\"group/list max-h-60 overflow-auto p-1 outline-hidden\"\n            :data-keyboard=\"keyboard || undefined\"\n          >\n            <ListboxVirtualizer\n              v-if=\"virtual\"\n              v-slot=\"{ option }\"\n              :estimate-size=\"32\"\n              :options=\"listed\"\n              :text-content=\"(option) => option.label\"\n            >\n              <ListboxItem\n                :class=\"optionClass\"\n                :disabled=\"option.disabled\"\n                :value=\"option.value\"\n                @select=\"onSelect($event, option as SelectOption<T>)\"\n              >\n                <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n                  <slot name=\"option\" :option=\"option as SelectOption<T>\">\n                    <Tag\n                      v-if=\"option.color\"\n                      :color=\"option.color\"\n                      :icon=\"option.icon\"\n                      :icon-color=\"option.iconColor\"\n                      :name=\"option.label\"\n                    />\n                    <template v-else>\n                      <Icon\n                        v-if=\"option.icon\"\n                        class=\"shrink-0\"\n                        :color=\"option.iconColor ?? 'ink-subtle'\"\n                        :name=\"option.icon\"\n                      />{{ option.label }}\n                    </template>\n                  </slot>\n                </span>\n                <CheckIcon v-if=\"values.includes(option.value)\" />\n              </ListboxItem>\n            </ListboxVirtualizer>\n            <template v-else>\n              <ListboxItem\n                v-for=\"option in listed\"\n                :key=\"option.value\"\n                :class=\"optionClass\"\n                :disabled=\"option.disabled\"\n                :value=\"option.value\"\n                @select=\"onSelect($event, option)\"\n              >\n                <span class=\"inline-flex min-w-0 items-center gap-1.5 truncate\">\n                  <slot name=\"option\" :option=\"option\">\n                    <Tag\n                      v-if=\"option.color\"\n                      :color=\"option.color\"\n                      :icon=\"option.icon\"\n                      :icon-color=\"option.iconColor\"\n                      :name=\"option.label\"\n                    />\n                    <template v-else>\n                      <Icon\n                        v-if=\"option.icon\"\n                        class=\"shrink-0\"\n                        :color=\"option.iconColor ?? 'ink-subtle'\"\n                        :name=\"option.icon\"\n                      />{{ option.label }}\n                    </template>\n                  </slot>\n                </span>\n                <CheckIcon v-if=\"values.includes(option.value)\" />\n              </ListboxItem>\n            </template>\n            <ListboxItem v-if=\"showCreate\" :class=\"optionClass\" :value=\"CREATE\" @select=\"onSelect($event, CREATE)\">\n              <span class=\"inline-flex min-w-0 items-center gap-1.5\">\n                {{ createLabel }}\n                <Tag v-if=\"createColored\" :color=\"newHue\" :name=\"query.trim()\" />\n                <strong v-else class=\"font-medium\">“{{ query.trim() }}”</strong>\n              </span>\n            </ListboxItem>\n          </ListboxContent>\n          <div v-else class=\"px-3.5 py-3 text-13 text-sui-ink-muted\">{{ emptyLabel }}</div>\n        </ListboxRoot>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

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

@@ -1,9 +1,14 @@
 import type { Hue } from '../../utils/hues';
+import type { IconColor } from '../Icon/colors';
 export type SelectValue = string | number;
 export interface SelectOption<T extends SelectValue = SelectValue> {
     value: T;
     label: string;
     /** Shows the option as a Tag of this hue. */
     color?: Hue | null;
+    /** An icon before the label, through the app's icon resolver: in the list, the trigger and its tags. */
+    icon?: string;
+    /** The icon's colour; ink-subtle by default. */
+    iconColor?: IconColor;
     disabled?: boolean;
 }

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["_sfc_main","Table_vue_vue_type_script_setup_true_lang_default","Table_default"],"sources":["../../../src/components/Table/Table.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { TableColumn, TableSort } from './types'\n\nexport interface TableProps<T> {\n  columns: TableColumn[]\n  rows: T[]\n  /** The row field that identifies it. */\n  rowKey?: keyof T & string\n  /** A checkbox column bound to `v-model:selected`; selected rows tint accent-wash. */\n  selectable?: boolean\n  /** Skeleton rows in place of the body. */\n  loading?: boolean\n  loadingRows?: number\n  /** md: 57px rows. sm: 40px, for dense lists. */\n  size?: 'md' | 'sm'\n  /** A row height in px between the sizes, such as 44, for body and header rows; sets `--sui-table-row`. */\n  rowHeight?: number\n  /** canvas lays the header on the page colour, for a table directly on the canvas. */\n  headerTone?: 'sunken' | 'canvas'\n  /** The table's name for screen readers. */\n  caption?: string\n  selectAllLabel?: string\n  selectRowLabel?: string\n  /** Makes rows clickable (`@row-click`), e.g. to open the record. */\n  onRowClick?: (row: T) => void\n}\n\nconst props = withDefaults(defineProps<TableProps<T>>(), {\n  rowKey: 'id' as never,\n  loadingRows: 5,\n  size: 'md',\n  rowHeight: undefined,\n  headerTone: 'sunken',\n  caption: undefined,\n  selectAllLabel: 'Select all rows',\n  selectRowLabel: 'Select row',\n  onRowClick: undefined\n})\n\nconst sort = defineModel<TableSort | null>('sort', { default: null })\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\n\nconst slots = defineSlots<\n  {\n    /** Shown in place of the body when there are no rows, e.g. an EmptyState. */\n    empty?: () => unknown\n    /** Replaces the body when given, e.g. an inset danger Alert with a retry. */\n    error?: () => unknown\n    /** A canvas strip under the rows: a rows-per-page Select, the range, Pagination. */\n    footer?: () => unknown\n  } & {\n    [K in `cell-${string}`]?: (props: { row: T; value: unknown }) => unknown\n  }\n>()\n\nconst idOf = (row: T): unknown => row[props.rowKey ?? 'id']\nconst ids = computed(() => props.rows.map(idOf))\nconst allSelected = computed(() => ids.value.length > 0 && ids.value.every((id) => selected.value.includes(id)))\nconst someSelected = computed(() => !allSelected.value && ids.value.some((id) => selected.value.includes(id)))\n\nfunction toggleAll() {\n  selected.value = allSelected.value\n    ? selected.value.filter((id) => !ids.value.includes(id))\n    : [...new Set([...selected.value, ...ids.value])]\n}\n\nfunction toggle(id: unknown) {\n  selected.value = selected.value.includes(id) ? selected.value.filter((x) => x !== id) : [...selected.value, id]\n}\n\n// Sorting a column cycles ascending, descending, unsorted.\nfunction sortBy(key: string) {\n  const dir = sort.value?.key === key ? sort.value.dir : null\n  const next = dir === null ? 'asc' : dir === 'asc' ? 'desc' : null\n  sort.value = next ? { key, dir: next } : null\n}\n\nfunction dirOf(key: string) {\n  return sort.value?.key === key ? sort.value.dir : null\n}\n\nfunction ariaSort(column: TableColumn) {\n  const dir = dirOf(column.key)\n  if (dir) return dir === 'asc' ? 'ascending' : 'descending'\n  return column.sortable ? 'none' : undefined\n}\n\nconst state = computed(() => {\n  if (slots.error) return 'error'\n  if (props.loading) return 'loading'\n  return props.rows.length === 0 && slots.empty ? 'empty' : 'rows'\n})\n\nconst columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\nconst alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' }\nconst skeletonWidths = ['60%', '45%', '70%', '35%', '55%']\n\nconst sm = computed(() => props.size === 'sm')\nconst fixed = computed(() => props.rowHeight !== undefined)\nconst rowStyle = computed(() => (fixed.value ? { '--sui-table-row': `${props.rowHeight}px` } : undefined))\nconst th = computed(() => [\n  'border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap',\n  sm.value ? 'h-[var(--sui-table-row,2.25rem)]' : 'h-[var(--sui-table-row,2.75rem)]'\n])\nconst td = computed(() => [\n  'border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0',\n  sm.value ? 'h-[var(--sui-table-row,2.5rem)]' : 'h-[var(--sui-table-row,3.5625rem)]'\n])\n// A set row height takes the cells' vertical padding with it.\nconst pad = computed(() => [sm.value ? 'px-3' : 'px-4', !fixed.value && (sm.value ? 'py-1.5' : 'py-3')])\nconst headTone = computed(() => (props.headerTone === 'canvas' ? 'bg-sui-canvas' : 'bg-sui-sunken'))\nconst headPad = computed(() => (sm.value ? 'px-3' : 'px-4'))\nconst checkCell = 'w-12 pl-4'\n</script>\n\n<!-- A data table: sunken header strip, sortable headers, selection, loading, empty and error states, a footer. -->\n<template>\n  <div\n    class=\"overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink\"\n    :style=\"rowStyle\"\n  >\n    <div class=\"overflow-x-auto\">\n      <table class=\"w-full min-w-[var(--sui-table-min,720px)] table-fixed border-collapse\">\n        <caption v-if=\"caption\" class=\"sr-only\">\n          {{\n            caption\n          }}\n        </caption>\n        <colgroup>\n          <col v-if=\"selectable\" class=\"w-12\" />\n          <col\n            v-for=\"column in columns\"\n            :key=\"column.key\"\n            :style=\"{ width: typeof column.width === 'number' ? `${column.width}px` : column.width }\"\n          />\n        </colgroup>\n        <thead>\n          <tr>\n            <th v-if=\"selectable\" :class=\"[th, checkCell, headTone]\">\n              <Checkbox\n                :aria-label=\"selectAllLabel\"\n                :disabled=\"loading || rows.length === 0\"\n                :indeterminate=\"someSelected\"\n                :model-value=\"allSelected\"\n                @update:model-value=\"toggleAll\"\n              />\n            </th>\n            <component\n              :is=\"column.label ? 'th' : 'td'\"\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :aria-sort=\"ariaSort(column)\"\n              :class=\"[\n                th,\n                headPad,\n                alignClass[column.align ?? 'left'],\n                dirOf(column.key) ? 'bg-sui-accent-wash text-sui-accent' : [headTone, 'text-sui-ink-subtle']\n              ]\"\n              :scope=\"column.label ? 'col' : undefined\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                class=\"inline-flex h-full w-full items-center gap-1.5 rounded-md outline-hidden focus-visible:sui-ring-inset\"\n                :class=\"[\n                  column.align === 'right' && 'justify-end',\n                  column.align === 'center' && 'justify-center',\n                  !dirOf(column.key) && 'hover:text-sui-ink'\n                ]\"\n                type=\"button\"\n                @click=\"sortBy(column.key)\"\n              >\n                {{ column.label }}\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"size-3 shrink-0 fill-none stroke-current\"\n                  :class=\"!dirOf(column.key) && 'opacity-50'\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"1.5\"\n                  viewBox=\"0 0 12 12\"\n                >\n                  <path v-if=\"dirOf(column.key) === 'asc'\" d=\"M3 7.5 6 4.5l3 3\" />\n                  <path v-else-if=\"dirOf(column.key) === 'desc'\" d=\"M3 4.5 6 7.5l3-3\" />\n                  <path v-else d=\"M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5\" />\n                </svg>\n              </button>\n              <template v-else>{{ column.label }}</template>\n            </component>\n          </tr>\n        </thead>\n        <tbody :aria-busy=\"loading || undefined\">\n          <tr v-if=\"state === 'error' || state === 'empty'\">\n            <td class=\"p-0\" :colspan=\"columnCount\">\n              <slot :name=\"state\" />\n            </td>\n          </tr>\n          <template v-else-if=\"state === 'loading'\">\n            <tr v-for=\"i in loadingRows\" :key=\"i\" aria-hidden=\"true\" class=\"group/row\">\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\"><Skeleton size=\"1rem\" /></td>\n              <td v-for=\"(column, j) in columns\" :key=\"column.key\" :class=\"[td, pad]\">\n                <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(i + j) % 5]\" />\n              </td>\n            </tr>\n          </template>\n          <template v-else>\n            <tr\n              v-for=\"row in rows\"\n              :key=\"idOf(row) as PropertyKey\"\n              :aria-selected=\"selectable ? selected.includes(idOf(row)) : undefined\"\n              class=\"group/row transition-colors duration-150\"\n              :class=\"[\n                selected.includes(idOf(row)) ? 'bg-sui-accent-wash' : 'hover:bg-sui-sunken',\n                onRowClick && 'cursor-pointer'\n              ]\"\n              @click=\"onRowClick?.(row)\"\n            >\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\" @click.stop>\n                <Checkbox\n                  :aria-label=\"selectRowLabel\"\n                  :model-value=\"selected.includes(idOf(row))\"\n                  @update:model-value=\"toggle(idOf(row))\"\n                />\n              </td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"column.key\"\n                :class=\"[\n                  td,\n                  pad,\n                  alignClass[column.align ?? 'left'],\n                  column.wrap ? 'break-words whitespace-normal' : 'truncate'\n                ]\"\n              >\n                <slot :name=\"`cell-${column.key}`\" :row=\"row\" :value=\"row[column.key]\">\n                  <template v-if=\"row[column.key] != null && row[column.key] !== ''\">{{ row[column.key] }}</template>\n                  <span v-else class=\"text-sui-ink-muted\">–</span>\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n    <div\n      v-if=\"$slots.footer\"\n      class=\"flex flex-wrap items-center justify-between gap-3 border-t border-sui-line-subtle bg-sui-canvas py-2 pr-3 pl-4 text-13 text-sui-ink-muted\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Table.js","names":["_sfc_main","Table_vue_vue_type_script_setup_true_lang_default","Table_default"],"sources":["../../../src/components/Table/Table.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { TableColumn, TableSort } from './types'\n\nexport interface TableProps<T> {\n  columns: TableColumn[]\n  rows: T[]\n  /** The row field that identifies it. */\n  rowKey?: keyof T & string\n  /** A checkbox column bound to `v-model:selected`; selected rows tint accent-wash. */\n  selectable?: boolean\n  /** Skeleton rows in place of the body. */\n  loading?: boolean\n  loadingRows?: number\n  /** md: 57px rows. sm: 40px, for dense lists. */\n  size?: 'md' | 'sm'\n  /** A row height in px between the sizes, such as 44, for body and header rows; sets `--sui-table-row`. */\n  rowHeight?: number\n  /** The header row's height in px, e.g. 36 over 44px rows; sets `--sui-table-header`. Defaults to the row height. */\n  headerHeight?: number\n  /** canvas lays the header on the page colour, for a table directly on the canvas. */\n  headerTone?: 'sunken' | 'canvas'\n  /** The table's name for screen readers. */\n  caption?: string\n  selectAllLabel?: string\n  selectRowLabel?: string\n  /** Makes rows clickable (`@row-click`), e.g. to open the record. */\n  onRowClick?: (row: T) => void\n}\n\nconst props = withDefaults(defineProps<TableProps<T>>(), {\n  rowKey: 'id' as never,\n  loadingRows: 5,\n  size: 'md',\n  rowHeight: undefined,\n  headerHeight: undefined,\n  headerTone: 'sunken',\n  caption: undefined,\n  selectAllLabel: 'Select all rows',\n  selectRowLabel: 'Select row',\n  onRowClick: undefined\n})\n\nconst sort = defineModel<TableSort | null>('sort', { default: null })\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\n\nconst slots = defineSlots<\n  {\n    /** Shown in place of the body when there are no rows, e.g. an EmptyState. */\n    empty?: () => unknown\n    /** Replaces the body when given, e.g. an inset danger Alert with a retry. */\n    error?: () => unknown\n    /** A canvas strip under the rows: a rows-per-page Select, the range, Pagination. */\n    footer?: () => unknown\n  } & {\n    [K in `cell-${string}`]?: (props: { row: T; value: unknown }) => unknown\n  }\n>()\n\nconst idOf = (row: T): unknown => row[props.rowKey ?? 'id']\nconst ids = computed(() => props.rows.map(idOf))\nconst allSelected = computed(() => ids.value.length > 0 && ids.value.every((id) => selected.value.includes(id)))\nconst someSelected = computed(() => !allSelected.value && ids.value.some((id) => selected.value.includes(id)))\n\nfunction toggleAll() {\n  selected.value = allSelected.value\n    ? selected.value.filter((id) => !ids.value.includes(id))\n    : [...new Set([...selected.value, ...ids.value])]\n}\n\nfunction toggle(id: unknown) {\n  selected.value = selected.value.includes(id) ? selected.value.filter((x) => x !== id) : [...selected.value, id]\n}\n\n// Sorting a column cycles ascending, descending, unsorted.\nfunction sortBy(key: string) {\n  const dir = sort.value?.key === key ? sort.value.dir : null\n  const next = dir === null ? 'asc' : dir === 'asc' ? 'desc' : null\n  sort.value = next ? { key, dir: next } : null\n}\n\nfunction dirOf(key: string) {\n  return sort.value?.key === key ? sort.value.dir : null\n}\n\nfunction ariaSort(column: TableColumn) {\n  const dir = dirOf(column.key)\n  if (dir) return dir === 'asc' ? 'ascending' : 'descending'\n  return column.sortable ? 'none' : undefined\n}\n\nconst state = computed(() => {\n  if (slots.error) return 'error'\n  if (props.loading) return 'loading'\n  return props.rows.length === 0 && slots.empty ? 'empty' : 'rows'\n})\n\nconst columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\nconst alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' }\nconst skeletonWidths = ['60%', '45%', '70%', '35%', '55%']\n\nconst sm = computed(() => props.size === 'sm')\nconst fixed = computed(() => props.rowHeight !== undefined)\nconst rowStyle = computed(() => {\n  const style: Record<string, string> = {}\n  if (fixed.value) style['--sui-table-row'] = `${props.rowHeight}px`\n  if (props.headerHeight !== undefined) style['--sui-table-header'] = `${props.headerHeight}px`\n  return Object.keys(style).length ? style : undefined\n})\nconst th = computed(() => [\n  'border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap',\n  sm.value\n    ? 'h-[var(--sui-table-header,var(--sui-table-row,2.25rem))]'\n    : 'h-[var(--sui-table-header,var(--sui-table-row,2.75rem))]'\n])\nconst td = computed(() => [\n  'border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0',\n  sm.value ? 'h-[var(--sui-table-row,2.5rem)]' : 'h-[var(--sui-table-row,3.5625rem)]'\n])\n// A set row height takes the cells' vertical padding with it.\nconst pad = computed(() => [sm.value ? 'px-3' : 'px-4', !fixed.value && (sm.value ? 'py-1.5' : 'py-3')])\nconst headTone = computed(() => (props.headerTone === 'canvas' ? 'bg-sui-canvas' : 'bg-sui-sunken'))\nconst headPad = computed(() => (sm.value ? 'px-3' : 'px-4'))\nconst checkCell = 'w-12 pl-4'\n</script>\n\n<!-- A data table: sunken header strip, sortable headers, selection, loading, empty and error states, a footer. -->\n<template>\n  <div\n    class=\"overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink\"\n    :style=\"rowStyle\"\n  >\n    <div class=\"overflow-x-auto\">\n      <table class=\"w-full min-w-[var(--sui-table-min,720px)] table-fixed border-collapse\">\n        <caption v-if=\"caption\" class=\"sr-only\">\n          {{\n            caption\n          }}\n        </caption>\n        <colgroup>\n          <col v-if=\"selectable\" class=\"w-12\" />\n          <col\n            v-for=\"column in columns\"\n            :key=\"column.key\"\n            :style=\"{ width: typeof column.width === 'number' ? `${column.width}px` : column.width }\"\n          />\n        </colgroup>\n        <thead>\n          <tr>\n            <th v-if=\"selectable\" :class=\"[th, checkCell, headTone]\">\n              <Checkbox\n                :aria-label=\"selectAllLabel\"\n                :disabled=\"loading || rows.length === 0\"\n                :indeterminate=\"someSelected\"\n                :model-value=\"allSelected\"\n                @update:model-value=\"toggleAll\"\n              />\n            </th>\n            <component\n              :is=\"column.label ? 'th' : 'td'\"\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :aria-sort=\"ariaSort(column)\"\n              :class=\"[\n                th,\n                headPad,\n                alignClass[column.align ?? 'left'],\n                dirOf(column.key) ? 'bg-sui-accent-wash text-sui-accent' : [headTone, 'text-sui-ink-subtle']\n              ]\"\n              :scope=\"column.label ? 'col' : undefined\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                class=\"inline-flex h-full w-full items-center gap-1.5 rounded-md outline-hidden focus-visible:sui-ring-inset\"\n                :class=\"[\n                  column.align === 'right' && 'justify-end',\n                  column.align === 'center' && 'justify-center',\n                  !dirOf(column.key) && 'hover:text-sui-ink'\n                ]\"\n                type=\"button\"\n                @click=\"sortBy(column.key)\"\n              >\n                {{ column.label }}\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"size-3 shrink-0 fill-none stroke-current\"\n                  :class=\"!dirOf(column.key) && 'opacity-50'\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"1.5\"\n                  viewBox=\"0 0 12 12\"\n                >\n                  <path v-if=\"dirOf(column.key) === 'asc'\" d=\"M3 7.5 6 4.5l3 3\" />\n                  <path v-else-if=\"dirOf(column.key) === 'desc'\" d=\"M3 4.5 6 7.5l3-3\" />\n                  <path v-else d=\"M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5\" />\n                </svg>\n              </button>\n              <template v-else>{{ column.label }}</template>\n            </component>\n          </tr>\n        </thead>\n        <tbody :aria-busy=\"loading || undefined\">\n          <tr v-if=\"state === 'error' || state === 'empty'\">\n            <td class=\"p-0\" :colspan=\"columnCount\">\n              <slot :name=\"state\" />\n            </td>\n          </tr>\n          <template v-else-if=\"state === 'loading'\">\n            <tr v-for=\"i in loadingRows\" :key=\"i\" aria-hidden=\"true\" class=\"group/row\">\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\"><Skeleton size=\"1rem\" /></td>\n              <td v-for=\"(column, j) in columns\" :key=\"column.key\" :class=\"[td, pad]\">\n                <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(i + j) % 5]\" />\n              </td>\n            </tr>\n          </template>\n          <template v-else>\n            <tr\n              v-for=\"row in rows\"\n              :key=\"idOf(row) as PropertyKey\"\n              :aria-selected=\"selectable ? selected.includes(idOf(row)) : undefined\"\n              class=\"group/row transition-colors duration-150\"\n              :class=\"[\n                selected.includes(idOf(row)) ? 'bg-sui-accent-wash' : 'hover:bg-sui-sunken',\n                onRowClick && 'cursor-pointer'\n              ]\"\n              @click=\"onRowClick?.(row)\"\n            >\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\" @click.stop>\n                <Checkbox\n                  :aria-label=\"selectRowLabel\"\n                  :model-value=\"selected.includes(idOf(row))\"\n                  @update:model-value=\"toggle(idOf(row))\"\n                />\n              </td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"column.key\"\n                :class=\"[\n                  td,\n                  pad,\n                  alignClass[column.align ?? 'left'],\n                  column.wrap ? 'break-words whitespace-normal' : 'truncate'\n                ]\"\n              >\n                <slot :name=\"`cell-${column.key}`\" :row=\"row\" :value=\"row[column.key]\">\n                  <template v-if=\"row[column.key] != null && row[column.key] !== ''\">{{ row[column.key] }}</template>\n                  <span v-else class=\"text-sui-ink-muted\">–</span>\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n    <div\n      v-if=\"$slots.footer\"\n      class=\"flex flex-wrap items-center justify-between gap-3 border-t border-sui-line-subtle bg-sui-canvas py-2 pr-3 pl-4 text-13 text-sui-ink-muted\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -13,6 +13,8 @@ export interface TableProps<T> {
     size?: 'md' | 'sm';
     /** A row height in px between the sizes, such as 44, for body and header rows; sets `--sui-table-row`. */
     rowHeight?: number;
+    /** The header row's height in px, e.g. 36 over 44px rows; sets `--sui-table-header`. Defaults to the row height. */
+    headerHeight?: number;
     /** canvas lays the header on the page colour, for a table directly on the canvas. */
     headerTone?: 'sunken' | 'canvas';
     /** The table's name for screen readers. */

package/dist/components/Table/Table.vue_vue_type_script_setup_true_lang.js

@@ -34,6 +34,7 @@ var C = { class: "overflow-x-auto" }, w = { class: "w-full min-w-[var(--sui-tabl
 		loadingRows: { default: 5 },
 		size: { default: "md" },
 		rowHeight: { default: void 0 },
+		headerHeight: { default: void 0 },
 		headerTone: { default: "sunken" },
 		caption: { default: void 0 },
 		selectAllLabel: { default: "Select all rows" },
@@ -81,7 +82,10 @@ var C = { class: "overflow-x-auto" }, w = { class: "w-full min-w-[var(--sui-tabl
 			"70%",
 			"35%",
 			"55%"
-		], J = r(() => d.size === "sm"), Y = r(() => d.rowHeight !== void 0), oe = r(() => Y.value ? { "--sui-table-row": `${d.rowHeight}px` } : void 0), X = r(() => ["border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap", J.value ? "h-[var(--sui-table-row,2.25rem)]" : "h-[var(--sui-table-row,2.75rem)]"]), Z = r(() => ["border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0", J.value ? "h-[var(--sui-table-row,2.5rem)]" : "h-[var(--sui-table-row,3.5625rem)]"]), Q = r(() => [J.value ? "px-3" : "px-4", !Y.value && (J.value ? "py-1.5" : "py-3")]), $ = r(() => d.headerTone === "canvas" ? "bg-sui-canvas" : "bg-sui-sunken"), se = r(() => J.value ? "px-3" : "px-4");
+		], J = r(() => d.size === "sm"), Y = r(() => d.rowHeight !== void 0), oe = r(() => {
+			let e = {};
+			return Y.value && (e["--sui-table-row"] = `${d.rowHeight}px`), d.headerHeight !== void 0 && (e["--sui-table-header"] = `${d.headerHeight}px`), Object.keys(e).length ? e : void 0;
+		}), X = r(() => ["border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap", J.value ? "h-[var(--sui-table-header,var(--sui-table-row,2.25rem))]" : "h-[var(--sui-table-header,var(--sui-table-row,2.75rem))]"]), Z = r(() => ["border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0", J.value ? "h-[var(--sui-table-row,2.5rem)]" : "h-[var(--sui-table-row,3.5625rem)]"]), Q = r(() => [J.value ? "px-3" : "px-4", !Y.value && (J.value ? "py-1.5" : "py-3")]), $ = r(() => d.headerTone === "canvas" ? "bg-sui-canvas" : "bg-sui-sunken"), se = r(() => J.value ? "px-3" : "px-4");
 		return (r, d) => (m(), o("div", {
 			class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink",
 			style: p(oe.value)

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

@@ -1 +1 @@
-{"version":3,"file":"Table.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_normalizeClass","_createVNode","Checkbox","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_renderSlot","Skeleton","_withModifiers","Skeleton_default","Checkbox_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","checkCell","Table_vue_vue_type_script_setup_true_lang_default","\"sort\"","\"sortModifiers\"","\"selected\"","\"selectedModifiers\"","props","__props","sort","useModel","selected","slots","useSlots","idOf","row","ids","computed","allSelected","id","someSelected","toggleAll","toggle","x","sortBy","dir","key","next","dirOf","ariaSort","column","state","columnCount","alignClass","skeletonWidths","sm","fixed","rowStyle","th","td","pad","headTone","headPad","openBlock","createElementBlock","normalizeStyle","createElementVNode","toDisplayString","createCommentVNode","Fragment","renderList","normalizeClass","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","renderSlot","_ctx","i","j","_cache","withModifiers"],"sources":["../../../src/components/Table/Table.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { TableColumn, TableSort } from './types'\n\nexport interface TableProps<T> {\n  columns: TableColumn[]\n  rows: T[]\n  /** The row field that identifies it. */\n  rowKey?: keyof T & string\n  /** A checkbox column bound to `v-model:selected`; selected rows tint accent-wash. */\n  selectable?: boolean\n  /** Skeleton rows in place of the body. */\n  loading?: boolean\n  loadingRows?: number\n  /** md: 57px rows. sm: 40px, for dense lists. */\n  size?: 'md' | 'sm'\n  /** A row height in px between the sizes, such as 44, for body and header rows; sets `--sui-table-row`. */\n  rowHeight?: number\n  /** canvas lays the header on the page colour, for a table directly on the canvas. */\n  headerTone?: 'sunken' | 'canvas'\n  /** The table's name for screen readers. */\n  caption?: string\n  selectAllLabel?: string\n  selectRowLabel?: string\n  /** Makes rows clickable (`@row-click`), e.g. to open the record. */\n  onRowClick?: (row: T) => void\n}\n\nconst props = withDefaults(defineProps<TableProps<T>>(), {\n  rowKey: 'id' as never,\n  loadingRows: 5,\n  size: 'md',\n  rowHeight: undefined,\n  headerTone: 'sunken',\n  caption: undefined,\n  selectAllLabel: 'Select all rows',\n  selectRowLabel: 'Select row',\n  onRowClick: undefined\n})\n\nconst sort = defineModel<TableSort | null>('sort', { default: null })\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\n\nconst slots = defineSlots<\n  {\n    /** Shown in place of the body when there are no rows, e.g. an EmptyState. */\n    empty?: () => unknown\n    /** Replaces the body when given, e.g. an inset danger Alert with a retry. */\n    error?: () => unknown\n    /** A canvas strip under the rows: a rows-per-page Select, the range, Pagination. */\n    footer?: () => unknown\n  } & {\n    [K in `cell-${string}`]?: (props: { row: T; value: unknown }) => unknown\n  }\n>()\n\nconst idOf = (row: T): unknown => row[props.rowKey ?? 'id']\nconst ids = computed(() => props.rows.map(idOf))\nconst allSelected = computed(() => ids.value.length > 0 && ids.value.every((id) => selected.value.includes(id)))\nconst someSelected = computed(() => !allSelected.value && ids.value.some((id) => selected.value.includes(id)))\n\nfunction toggleAll() {\n  selected.value = allSelected.value\n    ? selected.value.filter((id) => !ids.value.includes(id))\n    : [...new Set([...selected.value, ...ids.value])]\n}\n\nfunction toggle(id: unknown) {\n  selected.value = selected.value.includes(id) ? selected.value.filter((x) => x !== id) : [...selected.value, id]\n}\n\n// Sorting a column cycles ascending, descending, unsorted.\nfunction sortBy(key: string) {\n  const dir = sort.value?.key === key ? sort.value.dir : null\n  const next = dir === null ? 'asc' : dir === 'asc' ? 'desc' : null\n  sort.value = next ? { key, dir: next } : null\n}\n\nfunction dirOf(key: string) {\n  return sort.value?.key === key ? sort.value.dir : null\n}\n\nfunction ariaSort(column: TableColumn) {\n  const dir = dirOf(column.key)\n  if (dir) return dir === 'asc' ? 'ascending' : 'descending'\n  return column.sortable ? 'none' : undefined\n}\n\nconst state = computed(() => {\n  if (slots.error) return 'error'\n  if (props.loading) return 'loading'\n  return props.rows.length === 0 && slots.empty ? 'empty' : 'rows'\n})\n\nconst columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\nconst alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' }\nconst skeletonWidths = ['60%', '45%', '70%', '35%', '55%']\n\nconst sm = computed(() => props.size === 'sm')\nconst fixed = computed(() => props.rowHeight !== undefined)\nconst rowStyle = computed(() => (fixed.value ? { '--sui-table-row': `${props.rowHeight}px` } : undefined))\nconst th = computed(() => [\n  'border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap',\n  sm.value ? 'h-[var(--sui-table-row,2.25rem)]' : 'h-[var(--sui-table-row,2.75rem)]'\n])\nconst td = computed(() => [\n  'border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0',\n  sm.value ? 'h-[var(--sui-table-row,2.5rem)]' : 'h-[var(--sui-table-row,3.5625rem)]'\n])\n// A set row height takes the cells' vertical padding with it.\nconst pad = computed(() => [sm.value ? 'px-3' : 'px-4', !fixed.value && (sm.value ? 'py-1.5' : 'py-3')])\nconst headTone = computed(() => (props.headerTone === 'canvas' ? 'bg-sui-canvas' : 'bg-sui-sunken'))\nconst headPad = computed(() => (sm.value ? 'px-3' : 'px-4'))\nconst checkCell = 'w-12 pl-4'\n</script>\n\n<!-- A data table: sunken header strip, sortable headers, selection, loading, empty and error states, a footer. -->\n<template>\n  <div\n    class=\"overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink\"\n    :style=\"rowStyle\"\n  >\n    <div class=\"overflow-x-auto\">\n      <table class=\"w-full min-w-[var(--sui-table-min,720px)] table-fixed border-collapse\">\n        <caption v-if=\"caption\" class=\"sr-only\">\n          {{\n            caption\n          }}\n        </caption>\n        <colgroup>\n          <col v-if=\"selectable\" class=\"w-12\" />\n          <col\n            v-for=\"column in columns\"\n            :key=\"column.key\"\n            :style=\"{ width: typeof column.width === 'number' ? `${column.width}px` : column.width }\"\n          />\n        </colgroup>\n        <thead>\n          <tr>\n            <th v-if=\"selectable\" :class=\"[th, checkCell, headTone]\">\n              <Checkbox\n                :aria-label=\"selectAllLabel\"\n                :disabled=\"loading || rows.length === 0\"\n                :indeterminate=\"someSelected\"\n                :model-value=\"allSelected\"\n                @update:model-value=\"toggleAll\"\n              />\n            </th>\n            <component\n              :is=\"column.label ? 'th' : 'td'\"\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :aria-sort=\"ariaSort(column)\"\n              :class=\"[\n                th,\n                headPad,\n                alignClass[column.align ?? 'left'],\n                dirOf(column.key) ? 'bg-sui-accent-wash text-sui-accent' : [headTone, 'text-sui-ink-subtle']\n              ]\"\n              :scope=\"column.label ? 'col' : undefined\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                class=\"inline-flex h-full w-full items-center gap-1.5 rounded-md outline-hidden focus-visible:sui-ring-inset\"\n                :class=\"[\n                  column.align === 'right' && 'justify-end',\n                  column.align === 'center' && 'justify-center',\n                  !dirOf(column.key) && 'hover:text-sui-ink'\n                ]\"\n                type=\"button\"\n                @click=\"sortBy(column.key)\"\n              >\n                {{ column.label }}\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"size-3 shrink-0 fill-none stroke-current\"\n                  :class=\"!dirOf(column.key) && 'opacity-50'\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"1.5\"\n                  viewBox=\"0 0 12 12\"\n                >\n                  <path v-if=\"dirOf(column.key) === 'asc'\" d=\"M3 7.5 6 4.5l3 3\" />\n                  <path v-else-if=\"dirOf(column.key) === 'desc'\" d=\"M3 4.5 6 7.5l3-3\" />\n                  <path v-else d=\"M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5\" />\n                </svg>\n              </button>\n              <template v-else>{{ column.label }}</template>\n            </component>\n          </tr>\n        </thead>\n        <tbody :aria-busy=\"loading || undefined\">\n          <tr v-if=\"state === 'error' || state === 'empty'\">\n            <td class=\"p-0\" :colspan=\"columnCount\">\n              <slot :name=\"state\" />\n            </td>\n          </tr>\n          <template v-else-if=\"state === 'loading'\">\n            <tr v-for=\"i in loadingRows\" :key=\"i\" aria-hidden=\"true\" class=\"group/row\">\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\"><Skeleton size=\"1rem\" /></td>\n              <td v-for=\"(column, j) in columns\" :key=\"column.key\" :class=\"[td, pad]\">\n                <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(i + j) % 5]\" />\n              </td>\n            </tr>\n          </template>\n          <template v-else>\n            <tr\n              v-for=\"row in rows\"\n              :key=\"idOf(row) as PropertyKey\"\n              :aria-selected=\"selectable ? selected.includes(idOf(row)) : undefined\"\n              class=\"group/row transition-colors duration-150\"\n              :class=\"[\n                selected.includes(idOf(row)) ? 'bg-sui-accent-wash' : 'hover:bg-sui-sunken',\n                onRowClick && 'cursor-pointer'\n              ]\"\n              @click=\"onRowClick?.(row)\"\n            >\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\" @click.stop>\n                <Checkbox\n                  :aria-label=\"selectRowLabel\"\n                  :model-value=\"selected.includes(idOf(row))\"\n                  @update:model-value=\"toggle(idOf(row))\"\n                />\n              </td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"column.key\"\n                :class=\"[\n                  td,\n                  pad,\n                  alignClass[column.align ?? 'left'],\n                  column.wrap ? 'break-words whitespace-normal' : 'truncate'\n                ]\"\n              >\n                <slot :name=\"`cell-${column.key}`\" :row=\"row\" :value=\"row[column.key]\">\n                  <template v-if=\"row[column.key] != null && row[column.key] !== ''\">{{ row[column.key] }}</template>\n                  <span v-else class=\"text-sui-ink-muted\">–</span>\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n    <div\n      v-if=\"$slots.footer\"\n      class=\"flex flex-wrap items-center justify-between gap-3 border-t border-sui-line-subtle bg-sui-canvas py-2 pr-3 pl-4 text-13 text-sui-ink-muted\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Table.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_normalizeClass","_createVNode","Checkbox","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_renderSlot","Skeleton","_withModifiers","Skeleton_default","Checkbox_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","checkCell","Table_vue_vue_type_script_setup_true_lang_default","\"sort\"","\"sortModifiers\"","\"selected\"","\"selectedModifiers\"","props","__props","sort","useModel","selected","slots","useSlots","idOf","row","ids","computed","allSelected","id","someSelected","toggleAll","toggle","x","sortBy","dir","key","next","dirOf","ariaSort","column","state","columnCount","alignClass","skeletonWidths","sm","fixed","rowStyle","style","th","td","pad","headTone","headPad","openBlock","createElementBlock","normalizeStyle","createElementVNode","toDisplayString","createCommentVNode","Fragment","renderList","normalizeClass","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","renderSlot","_ctx","i","j","_cache","withModifiers"],"sources":["../../../src/components/Table/Table.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { TableColumn, TableSort } from './types'\n\nexport interface TableProps<T> {\n  columns: TableColumn[]\n  rows: T[]\n  /** The row field that identifies it. */\n  rowKey?: keyof T & string\n  /** A checkbox column bound to `v-model:selected`; selected rows tint accent-wash. */\n  selectable?: boolean\n  /** Skeleton rows in place of the body. */\n  loading?: boolean\n  loadingRows?: number\n  /** md: 57px rows. sm: 40px, for dense lists. */\n  size?: 'md' | 'sm'\n  /** A row height in px between the sizes, such as 44, for body and header rows; sets `--sui-table-row`. */\n  rowHeight?: number\n  /** The header row's height in px, e.g. 36 over 44px rows; sets `--sui-table-header`. Defaults to the row height. */\n  headerHeight?: number\n  /** canvas lays the header on the page colour, for a table directly on the canvas. */\n  headerTone?: 'sunken' | 'canvas'\n  /** The table's name for screen readers. */\n  caption?: string\n  selectAllLabel?: string\n  selectRowLabel?: string\n  /** Makes rows clickable (`@row-click`), e.g. to open the record. */\n  onRowClick?: (row: T) => void\n}\n\nconst props = withDefaults(defineProps<TableProps<T>>(), {\n  rowKey: 'id' as never,\n  loadingRows: 5,\n  size: 'md',\n  rowHeight: undefined,\n  headerHeight: undefined,\n  headerTone: 'sunken',\n  caption: undefined,\n  selectAllLabel: 'Select all rows',\n  selectRowLabel: 'Select row',\n  onRowClick: undefined\n})\n\nconst sort = defineModel<TableSort | null>('sort', { default: null })\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\n\nconst slots = defineSlots<\n  {\n    /** Shown in place of the body when there are no rows, e.g. an EmptyState. */\n    empty?: () => unknown\n    /** Replaces the body when given, e.g. an inset danger Alert with a retry. */\n    error?: () => unknown\n    /** A canvas strip under the rows: a rows-per-page Select, the range, Pagination. */\n    footer?: () => unknown\n  } & {\n    [K in `cell-${string}`]?: (props: { row: T; value: unknown }) => unknown\n  }\n>()\n\nconst idOf = (row: T): unknown => row[props.rowKey ?? 'id']\nconst ids = computed(() => props.rows.map(idOf))\nconst allSelected = computed(() => ids.value.length > 0 && ids.value.every((id) => selected.value.includes(id)))\nconst someSelected = computed(() => !allSelected.value && ids.value.some((id) => selected.value.includes(id)))\n\nfunction toggleAll() {\n  selected.value = allSelected.value\n    ? selected.value.filter((id) => !ids.value.includes(id))\n    : [...new Set([...selected.value, ...ids.value])]\n}\n\nfunction toggle(id: unknown) {\n  selected.value = selected.value.includes(id) ? selected.value.filter((x) => x !== id) : [...selected.value, id]\n}\n\n// Sorting a column cycles ascending, descending, unsorted.\nfunction sortBy(key: string) {\n  const dir = sort.value?.key === key ? sort.value.dir : null\n  const next = dir === null ? 'asc' : dir === 'asc' ? 'desc' : null\n  sort.value = next ? { key, dir: next } : null\n}\n\nfunction dirOf(key: string) {\n  return sort.value?.key === key ? sort.value.dir : null\n}\n\nfunction ariaSort(column: TableColumn) {\n  const dir = dirOf(column.key)\n  if (dir) return dir === 'asc' ? 'ascending' : 'descending'\n  return column.sortable ? 'none' : undefined\n}\n\nconst state = computed(() => {\n  if (slots.error) return 'error'\n  if (props.loading) return 'loading'\n  return props.rows.length === 0 && slots.empty ? 'empty' : 'rows'\n})\n\nconst columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\nconst alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' }\nconst skeletonWidths = ['60%', '45%', '70%', '35%', '55%']\n\nconst sm = computed(() => props.size === 'sm')\nconst fixed = computed(() => props.rowHeight !== undefined)\nconst rowStyle = computed(() => {\n  const style: Record<string, string> = {}\n  if (fixed.value) style['--sui-table-row'] = `${props.rowHeight}px`\n  if (props.headerHeight !== undefined) style['--sui-table-header'] = `${props.headerHeight}px`\n  return Object.keys(style).length ? style : undefined\n})\nconst th = computed(() => [\n  'border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap',\n  sm.value\n    ? 'h-[var(--sui-table-header,var(--sui-table-row,2.25rem))]'\n    : 'h-[var(--sui-table-header,var(--sui-table-row,2.75rem))]'\n])\nconst td = computed(() => [\n  'border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0',\n  sm.value ? 'h-[var(--sui-table-row,2.5rem)]' : 'h-[var(--sui-table-row,3.5625rem)]'\n])\n// A set row height takes the cells' vertical padding with it.\nconst pad = computed(() => [sm.value ? 'px-3' : 'px-4', !fixed.value && (sm.value ? 'py-1.5' : 'py-3')])\nconst headTone = computed(() => (props.headerTone === 'canvas' ? 'bg-sui-canvas' : 'bg-sui-sunken'))\nconst headPad = computed(() => (sm.value ? 'px-3' : 'px-4'))\nconst checkCell = 'w-12 pl-4'\n</script>\n\n<!-- A data table: sunken header strip, sortable headers, selection, loading, empty and error states, a footer. -->\n<template>\n  <div\n    class=\"overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink\"\n    :style=\"rowStyle\"\n  >\n    <div class=\"overflow-x-auto\">\n      <table class=\"w-full min-w-[var(--sui-table-min,720px)] table-fixed border-collapse\">\n        <caption v-if=\"caption\" class=\"sr-only\">\n          {{\n            caption\n          }}\n        </caption>\n        <colgroup>\n          <col v-if=\"selectable\" class=\"w-12\" />\n          <col\n            v-for=\"column in columns\"\n            :key=\"column.key\"\n            :style=\"{ width: typeof column.width === 'number' ? `${column.width}px` : column.width }\"\n          />\n        </colgroup>\n        <thead>\n          <tr>\n            <th v-if=\"selectable\" :class=\"[th, checkCell, headTone]\">\n              <Checkbox\n                :aria-label=\"selectAllLabel\"\n                :disabled=\"loading || rows.length === 0\"\n                :indeterminate=\"someSelected\"\n                :model-value=\"allSelected\"\n                @update:model-value=\"toggleAll\"\n              />\n            </th>\n            <component\n              :is=\"column.label ? 'th' : 'td'\"\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :aria-sort=\"ariaSort(column)\"\n              :class=\"[\n                th,\n                headPad,\n                alignClass[column.align ?? 'left'],\n                dirOf(column.key) ? 'bg-sui-accent-wash text-sui-accent' : [headTone, 'text-sui-ink-subtle']\n              ]\"\n              :scope=\"column.label ? 'col' : undefined\"\n            >\n              <button\n                v-if=\"column.sortable\"\n                class=\"inline-flex h-full w-full items-center gap-1.5 rounded-md outline-hidden focus-visible:sui-ring-inset\"\n                :class=\"[\n                  column.align === 'right' && 'justify-end',\n                  column.align === 'center' && 'justify-center',\n                  !dirOf(column.key) && 'hover:text-sui-ink'\n                ]\"\n                type=\"button\"\n                @click=\"sortBy(column.key)\"\n              >\n                {{ column.label }}\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"size-3 shrink-0 fill-none stroke-current\"\n                  :class=\"!dirOf(column.key) && 'opacity-50'\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"1.5\"\n                  viewBox=\"0 0 12 12\"\n                >\n                  <path v-if=\"dirOf(column.key) === 'asc'\" d=\"M3 7.5 6 4.5l3 3\" />\n                  <path v-else-if=\"dirOf(column.key) === 'desc'\" d=\"M3 4.5 6 7.5l3-3\" />\n                  <path v-else d=\"M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5\" />\n                </svg>\n              </button>\n              <template v-else>{{ column.label }}</template>\n            </component>\n          </tr>\n        </thead>\n        <tbody :aria-busy=\"loading || undefined\">\n          <tr v-if=\"state === 'error' || state === 'empty'\">\n            <td class=\"p-0\" :colspan=\"columnCount\">\n              <slot :name=\"state\" />\n            </td>\n          </tr>\n          <template v-else-if=\"state === 'loading'\">\n            <tr v-for=\"i in loadingRows\" :key=\"i\" aria-hidden=\"true\" class=\"group/row\">\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\"><Skeleton size=\"1rem\" /></td>\n              <td v-for=\"(column, j) in columns\" :key=\"column.key\" :class=\"[td, pad]\">\n                <Skeleton height=\"0.75rem\" :width=\"skeletonWidths[(i + j) % 5]\" />\n              </td>\n            </tr>\n          </template>\n          <template v-else>\n            <tr\n              v-for=\"row in rows\"\n              :key=\"idOf(row) as PropertyKey\"\n              :aria-selected=\"selectable ? selected.includes(idOf(row)) : undefined\"\n              class=\"group/row transition-colors duration-150\"\n              :class=\"[\n                selected.includes(idOf(row)) ? 'bg-sui-accent-wash' : 'hover:bg-sui-sunken',\n                onRowClick && 'cursor-pointer'\n              ]\"\n              @click=\"onRowClick?.(row)\"\n            >\n              <td v-if=\"selectable\" :class=\"[td, checkCell]\" @click.stop>\n                <Checkbox\n                  :aria-label=\"selectRowLabel\"\n                  :model-value=\"selected.includes(idOf(row))\"\n                  @update:model-value=\"toggle(idOf(row))\"\n                />\n              </td>\n              <td\n                v-for=\"column in columns\"\n                :key=\"column.key\"\n                :class=\"[\n                  td,\n                  pad,\n                  alignClass[column.align ?? 'left'],\n                  column.wrap ? 'break-words whitespace-normal' : 'truncate'\n                ]\"\n              >\n                <slot :name=\"`cell-${column.key}`\" :row=\"row\" :value=\"row[column.key]\">\n                  <template v-if=\"row[column.key] != null && row[column.key] !== ''\">{{ row[column.key] }}</template>\n                  <span v-else class=\"text-sui-ink-muted\">–</span>\n                </slot>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n    <div\n      v-if=\"$slots.footer\"\n      class=\"flex flex-wrap items-center justify-between gap-3 border-t border-sui-line-subtle bg-sui-canvas py-2 pr-3 pl-4 text-13 text-sui-ink-muted\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["_sfc_main","Tag_vue_vue_type_script_setup_true_lang_default","Tag_default"],"sources":["../../../src/components/Tag/Tag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Hue } from '../../utils/hues'\nimport CloseSmallIcon from '../internal/CloseSmallIcon.vue'\n\nexport interface TagProps {\n  /** The text; or use the default slot. */\n  name?: string\n  /** soft: a label people create, with an optional hue dot, removable. outline: a value from a fixed set (a stage, a status). */\n  variant?: 'soft' | 'outline'\n  /** soft only: a dot of the tag's own hue, on a neutral chip. */\n  color?: Hue\n  /** outline only: the quieter, superseded side, e.g. the \"from\" of a stage change. */\n  muted?: boolean\n  /** soft only. */\n  removable?: boolean\n  /** The remove button's accessible name. */\n  removeLabel?: string\n  /** A toggle button for quick choices, bound to `v-model:pressed`. Group several in a `role=\"group\"` with a label. */\n  pressable?: boolean\n  /** pressable only. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<TagProps>(), {\n  name: undefined,\n  variant: 'soft',\n  color: undefined,\n  removeLabel: 'Remove tag'\n})\n\ndefineEmits<{ remove: [] }>()\n\nconst pressed = defineModel<boolean>('pressed', { default: false })\n\nconst dots: Record<Hue, string> = {\n  blue: 'bg-sui-hue-blue-ink',\n  green: 'bg-sui-hue-green-ink',\n  orange: 'bg-sui-hue-orange-ink',\n  pink: 'bg-sui-hue-pink-ink',\n  purple: 'bg-sui-hue-purple-ink',\n  slate: 'bg-sui-hue-slate-ink',\n  red: 'bg-sui-hue-red-ink',\n  amber: 'bg-sui-hue-amber-ink',\n  gray: 'bg-sui-ink'\n}\n</script>\n\n<!-- A label: soft for the ones people create, outline for a value from a fixed set; or, pressable, a toggle chip. -->\n<template>\n  <button\n    v-if=\"pressable\"\n    :aria-pressed=\"pressed\"\n    class=\"inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-3 text-13 leading-none font-medium whitespace-nowrap transition-colors duration-150 outline-hidden focus-visible:sui-ring disabled:cursor-default disabled:opacity-50\"\n    :class=\"\n      pressed\n        ? 'border-sui-accent-line bg-sui-accent-wash text-sui-accent enabled:hover:border-sui-accent-bright enabled:hover:bg-sui-accent-soft enabled:active:border-sui-accent-solid enabled:active:bg-sui-accent-soft'\n        : 'border-sui-line bg-sui-surface text-sui-ink-body enabled:hover:border-sui-line-strong enabled:hover:bg-sui-canvas enabled:hover:text-sui-ink enabled:active:bg-sui-sunken'\n    \"\n    :disabled=\"disabled\"\n    type=\"button\"\n    @click=\"pressed = !pressed\"\n  >\n    <svg\n      v-if=\"pressed\"\n      aria-hidden=\"true\"\n      class=\"-ml-0.5 size-3 shrink-0 fill-none stroke-current\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"1.75\"\n      viewBox=\"0 0 16 16\"\n    >\n      <path d=\"M3.5 8.25l3 3 6-6.5\" />\n    </svg>\n    <slot>{{ name }}</slot>\n  </button>\n  <span\n    v-else-if=\"variant === 'outline'\"\n    class=\"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap\"\n    :class=\"\n      muted ? 'border-sui-line-subtle text-sui-ink-muted' : 'border-sui-line bg-sui-sunken font-medium text-sui-ink'\n    \"\n  >\n    <slot>{{ name }}</slot>\n  </span>\n  <div\n    v-else\n    class=\"inline-flex items-center gap-1.5 rounded-md bg-sui-sunken px-2 py-0.5 text-xs font-medium text-sui-ink-body\"\n  >\n    <span v-if=\"color\" class=\"h-1.5 w-1.5 shrink-0 rounded-full\" :class=\"dots[color]\" />\n    <span class=\"truncate\"\n      ><slot>{{ name }}</slot></span\n    >\n    <button\n      v-if=\"removable\"\n      :aria-label=\"removeLabel\"\n      class=\"-mr-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-sui-line focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n    >\n      <CloseSmallIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Tag.js","names":["_sfc_main","Tag_vue_vue_type_script_setup_true_lang_default","Tag_default"],"sources":["../../../src/components/Tag/Tag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Hue } from '../../utils/hues'\nimport Icon from '../Icon/Icon.vue'\nimport type { IconColor } from '../Icon/colors'\nimport CloseSmallIcon from '../internal/CloseSmallIcon.vue'\n\nexport interface TagProps {\n  /** The text; or use the default slot. */\n  name?: string\n  /** soft: a label people create, with an optional hue dot, removable. outline: a value from a fixed set (a stage, a status). */\n  variant?: 'soft' | 'outline'\n  /** soft only: a dot of the tag's own hue, on a neutral chip. */\n  color?: Hue\n  /** soft and outline: a 14px icon before the name, through the app's icon resolver, in place of the dot. */\n  icon?: string\n  /** The icon's colour; ink-subtle by default. */\n  iconColor?: IconColor\n  /** outline only: the quieter, superseded side, e.g. the \"from\" of a stage change. */\n  muted?: boolean\n  /** soft only. */\n  removable?: boolean\n  /** The remove button's accessible name. */\n  removeLabel?: string\n  /** A toggle button for quick choices, bound to `v-model:pressed`. Group several in a `role=\"group\"` with a label. */\n  pressable?: boolean\n  /** pressable only. */\n  disabled?: boolean\n  /** pressable only: md is 28px, sm 22px for a dense row of filters. */\n  size?: 'sm' | 'md'\n}\n\nwithDefaults(defineProps<TagProps>(), {\n  name: undefined,\n  variant: 'soft',\n  color: undefined,\n  icon: undefined,\n  iconColor: 'ink-subtle',\n  removeLabel: 'Remove tag',\n  size: 'md'\n})\n\ndefineEmits<{ remove: [] }>()\n\nconst pressed = defineModel<boolean>('pressed', { default: false })\n\nconst dots: Record<Hue, string> = {\n  blue: 'bg-sui-hue-blue-ink',\n  green: 'bg-sui-hue-green-ink',\n  orange: 'bg-sui-hue-orange-ink',\n  pink: 'bg-sui-hue-pink-ink',\n  purple: 'bg-sui-hue-purple-ink',\n  slate: 'bg-sui-hue-slate-ink',\n  red: 'bg-sui-hue-red-ink',\n  amber: 'bg-sui-hue-amber-ink',\n  gray: 'bg-sui-ink'\n}\n</script>\n\n<!-- A label: soft for the ones people create, outline for a value from a fixed set; or, pressable, a toggle chip. -->\n<template>\n  <button\n    v-if=\"pressable\"\n    :aria-pressed=\"pressed\"\n    class=\"inline-flex cursor-pointer items-center rounded-md border leading-none font-medium whitespace-nowrap transition-colors duration-150 outline-hidden focus-visible:sui-ring disabled:cursor-default disabled:opacity-50\"\n    :class=\"[\n      size === 'sm' ? 'h-5.5 gap-1 px-2 text-xs' : 'h-7 gap-1.5 px-3 text-13',\n      pressed\n        ? 'border-sui-accent-line bg-sui-accent-wash text-sui-accent enabled:hover:border-sui-accent-bright enabled:hover:bg-sui-accent-soft enabled:active:border-sui-accent-solid enabled:active:bg-sui-accent-soft'\n        : 'border-sui-line bg-sui-surface text-sui-ink-body enabled:hover:border-sui-line-strong enabled:hover:bg-sui-canvas enabled:hover:text-sui-ink enabled:active:bg-sui-sunken'\n    ]\"\n    :disabled=\"disabled\"\n    type=\"button\"\n    @click=\"pressed = !pressed\"\n  >\n    <svg\n      v-if=\"pressed\"\n      aria-hidden=\"true\"\n      class=\"-ml-0.5 size-3 shrink-0 fill-none stroke-current\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"1.75\"\n      viewBox=\"0 0 16 16\"\n    >\n      <path d=\"M3.5 8.25l3 3 6-6.5\" />\n    </svg>\n    <slot>{{ name }}</slot>\n  </button>\n  <span\n    v-else-if=\"variant === 'outline'\"\n    class=\"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap\"\n    :class=\"\n      muted ? 'border-sui-line-subtle text-sui-ink-muted' : 'border-sui-line bg-sui-sunken font-medium text-sui-ink'\n    \"\n  >\n    <Icon v-if=\"icon\" class=\"size-3.5 shrink-0\" :color=\"iconColor\" :name=\"icon\" />\n    <slot>{{ name }}</slot>\n  </span>\n  <div\n    v-else\n    class=\"inline-flex items-center gap-1.5 rounded-md bg-sui-sunken px-2 py-0.5 text-xs font-medium text-sui-ink-body\"\n  >\n    <Icon v-if=\"icon\" class=\"size-3.5 shrink-0\" :color=\"iconColor\" :name=\"icon\" />\n    <span v-else-if=\"color\" class=\"h-1.5 w-1.5 shrink-0 rounded-full\" :class=\"dots[color]\" />\n    <span class=\"truncate\"\n      ><slot>{{ name }}</slot></span\n    >\n    <button\n      v-if=\"removable\"\n      :aria-label=\"removeLabel\"\n      class=\"-mr-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-sui-line focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n    >\n      <CloseSmallIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n    </button>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,4 +1,5 @@
 import type { Hue } from '../../utils/hues';
+import type { IconColor } from '../Icon/colors';
 export interface TagProps {
     /** The text; or use the default slot. */
     name?: string;
@@ -6,6 +7,10 @@ export interface TagProps {
     variant?: 'soft' | 'outline';
     /** soft only: a dot of the tag's own hue, on a neutral chip. */
     color?: Hue;
+    /** soft and outline: a 14px icon before the name, through the app's icon resolver, in place of the dot. */
+    icon?: string;
+    /** The icon's colour; ink-subtle by default. */
+    iconColor?: IconColor;
     /** outline only: the quieter, superseded side, e.g. the "from" of a stage change. */
     muted?: boolean;
     /** soft only. */
@@ -16,19 +21,21 @@ export interface TagProps {
     pressable?: boolean;
     /** pressable only. */
     disabled?: boolean;
+    /** pressable only: md is 28px, sm 22px for a dense row of filters. */
+    size?: 'sm' | 'md';
 }
 type __VLS_Props = TagProps;
 type __VLS_ModelProps = {
     'pressed'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: () => any;
@@ -38,9 +45,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:pressed"?: ((value: boolean) => any) | undefined;
 }>, {
     variant: "soft" | "outline";
+    size: "sm" | "md";
     name: string;
     color: Hue;
+    icon: string;
     removeLabel: string;
+    iconColor: "danger" | "warning" | "success" | "ink" | "ink-emphasis" | "ink-body" | "ink-subtle" | "ink-muted" | "ink-faint" | "mark-faint" | "accent" | "accent-solid" | "on-accent" | "on-contrast" | "on-danger" | "on-inverse" | "success-mid" | "warning-mid" | "danger-mid" | "info-mid" | "info";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Tag/Tag.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
-import e from "../internal/CloseSmallIcon.js";
-import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, useModel as f } from "vue";
+import e from "../Icon/Icon.js";
+import t from "../internal/CloseSmallIcon.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p, useModel as m } from "vue";
 //#region src/components/Tag/Tag.vue?vue&type=script&setup=true&lang.ts
-var p = ["aria-pressed", "disabled"], m = {
+var h = ["aria-pressed", "disabled"], g = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "-ml-0.5 size-3 shrink-0 fill-none stroke-current",
@@ -9,20 +10,23 @@ var p = ["aria-pressed", "disabled"], m = {
 	"stroke-linejoin": "round",
 	"stroke-width": "1.75",
 	viewBox: "0 0 16 16"
-}, h = {
+}, _ = {
 	key: 2,
 	class: "inline-flex items-center gap-1.5 rounded-md bg-sui-sunken px-2 py-0.5 text-xs font-medium text-sui-ink-body"
-}, g = { class: "truncate" }, _ = ["aria-label"], v = /*@__PURE__*/ o({
+}, v = { class: "truncate" }, y = ["aria-label"], b = /*@__PURE__*/ c({
 	__name: "Tag",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ l({
 		name: { default: void 0 },
 		variant: { default: "soft" },
 		color: { default: void 0 },
+		icon: { default: void 0 },
+		iconColor: { default: "ink-subtle" },
 		muted: { type: Boolean },
 		removable: { type: Boolean },
 		removeLabel: { default: "Remove tag" },
 		pressable: { type: Boolean },
-		disabled: { type: Boolean }
+		disabled: { type: Boolean },
+		size: { default: "md" }
 	}, {
 		pressed: {
 			type: Boolean,
@@ -30,9 +34,9 @@ var p = ["aria-pressed", "disabled"], m = {
 		},
 		pressedModifiers: {}
 	}),
-	emits: /*@__PURE__*/ s(["remove"], ["update:pressed"]),
-	setup(o) {
-		let s = f(o, "pressed"), v = {
+	emits: /*@__PURE__*/ l(["remove"], ["update:pressed"]),
+	setup(c) {
+		let l = m(c, "pressed"), b = {
 			blue: "bg-sui-hue-blue-ink",
 			green: "bg-sui-hue-green-ink",
 			orange: "bg-sui-hue-orange-ink",
@@ -43,33 +47,43 @@ var p = ["aria-pressed", "disabled"], m = {
 			amber: "bg-sui-hue-amber-ink",
 			gray: "bg-sui-ink"
 		};
-		return (f, y) => o.pressable ? (l(), n("button", {
+		return (m, x) => c.pressable ? (d(), i("button", {
 			key: 0,
-			"aria-pressed": s.value,
-			class: c(["inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-3 text-13 leading-none font-medium whitespace-nowrap transition-colors duration-150 outline-hidden focus-visible:sui-ring disabled:cursor-default disabled:opacity-50", s.value ? "border-sui-accent-line bg-sui-accent-wash text-sui-accent enabled:hover:border-sui-accent-bright enabled:hover:bg-sui-accent-soft enabled:active:border-sui-accent-solid enabled:active:bg-sui-accent-soft" : "border-sui-line bg-sui-surface text-sui-ink-body enabled:hover:border-sui-line-strong enabled:hover:bg-sui-canvas enabled:hover:text-sui-ink enabled:active:bg-sui-sunken"]),
-			disabled: o.disabled,
+			"aria-pressed": l.value,
+			class: u(["inline-flex cursor-pointer items-center rounded-md border leading-none font-medium whitespace-nowrap transition-colors duration-150 outline-hidden focus-visible:sui-ring disabled:cursor-default disabled:opacity-50", [c.size === "sm" ? "h-5.5 gap-1 px-2 text-xs" : "h-7 gap-1.5 px-3 text-13", l.value ? "border-sui-accent-line bg-sui-accent-wash text-sui-accent enabled:hover:border-sui-accent-bright enabled:hover:bg-sui-accent-soft enabled:active:border-sui-accent-solid enabled:active:bg-sui-accent-soft" : "border-sui-line bg-sui-surface text-sui-ink-body enabled:hover:border-sui-line-strong enabled:hover:bg-sui-canvas enabled:hover:text-sui-ink enabled:active:bg-sui-sunken"]]),
+			disabled: c.disabled,
 			type: "button",
-			onClick: y[0] ||= (e) => s.value = !s.value
-		}, [s.value ? (l(), n("svg", m, [...y[2] ||= [r("path", { d: "M3.5 8.25l3 3 6-6.5" }, null, -1)]])) : t("", !0), u(f.$slots, "default", {}, () => [i(d(o.name), 1)])], 10, p)) : o.variant === "outline" ? (l(), n("span", {
+			onClick: x[0] ||= (e) => l.value = !l.value
+		}, [l.value ? (d(), i("svg", g, [...x[2] ||= [a("path", { d: "M3.5 8.25l3 3 6-6.5" }, null, -1)]])) : r("", !0), f(m.$slots, "default", {}, () => [o(p(c.name), 1)])], 10, h)) : c.variant === "outline" ? (d(), i("span", {
 			key: 1,
-			class: c(["inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap", o.muted ? "border-sui-line-subtle text-sui-ink-muted" : "border-sui-line bg-sui-sunken font-medium text-sui-ink"])
-		}, [u(f.$slots, "default", {}, () => [i(d(o.name), 1)])], 2)) : (l(), n("div", h, [
-			o.color ? (l(), n("span", {
+			class: u(["inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap", c.muted ? "border-sui-line-subtle text-sui-ink-muted" : "border-sui-line bg-sui-sunken font-medium text-sui-ink"])
+		}, [c.icon ? (d(), n(e, {
+			key: 0,
+			class: "size-3.5 shrink-0",
+			color: c.iconColor,
+			name: c.icon
+		}, null, 8, ["color", "name"])) : r("", !0), f(m.$slots, "default", {}, () => [o(p(c.name), 1)])], 2)) : (d(), i("div", _, [
+			c.icon ? (d(), n(e, {
 				key: 0,
-				class: c(["h-1.5 w-1.5 shrink-0 rounded-full", v[o.color]])
-			}, null, 2)) : t("", !0),
-			r("span", g, [u(f.$slots, "default", {}, () => [i(d(o.name), 1)])]),
-			o.removable ? (l(), n("button", {
+				class: "size-3.5 shrink-0",
+				color: c.iconColor,
+				name: c.icon
+			}, null, 8, ["color", "name"])) : c.color ? (d(), i("span", {
 				key: 1,
-				"aria-label": o.removeLabel,
+				class: u(["h-1.5 w-1.5 shrink-0 rounded-full", b[c.color]])
+			}, null, 2)) : r("", !0),
+			a("span", v, [f(m.$slots, "default", {}, () => [o(p(c.name), 1)])]),
+			c.removable ? (d(), i("button", {
+				key: 2,
+				"aria-label": c.removeLabel,
 				class: "-mr-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-sui-line focus-visible:sui-ring",
 				type: "button",
-				onClick: y[1] ||= (e) => f.$emit("remove")
-			}, [a(e, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })], 8, _)) : t("", !0)
+				onClick: x[1] ||= (e) => m.$emit("remove")
+			}, [s(t, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })], 8, y)) : r("", !0)
 		]));
 	}
 });
 //#endregion
-export { v as default };
+export { b as default };
 
 //# sourceMappingURL=Tag.vue_vue_type_script_setup_true_lang.js.map