@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

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

@@ -6,10 +6,13 @@ export interface SegmentedControlOption<T extends string> {
     /** An SVG path on a 24px grid. */
     icon?: string;
 }
+export interface SegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    /** Fills its row, the segments sharing it evenly with their labels truncated: phone tab bars. */
+    block?: boolean;
+}
 declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
-        options: SegmentedControlOption<T>[];
-    } & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SegmentedControlProps<T> & {
         modelValue: T;
     }) & {
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;

package/dist/components/SegmentedControl/SegmentedControl.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import e from "../Icon/Icon.js";
-import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, openBlock as u, renderList as d, toDisplayString as f, unref as p, useModel as m, withCtx as h } from "vue";
-import { RadioGroupItem as g, RadioGroupRoot as _ } from "reka-ui";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, useModel as p, withCtx as m } from "vue";
+import { RadioGroupItem as h, RadioGroupRoot as g } from "reka-ui";
 //#region src/components/SegmentedControl/SegmentedControl.vue?vue&type=script&setup=true&lang.ts
-var v = {
+var _ = {
 	key: 1,
 	"aria-hidden": "true",
 	class: "h-3.5 w-3.5",
@@ -10,36 +10,39 @@ var v = {
 	stroke: "currentColor",
 	"stroke-width": "2",
 	viewBox: "0 0 24 24"
-}, y = ["d"], b = /*@__PURE__*/ s({
+}, v = ["d"], y = { class: "min-w-0 truncate" }, b = /*@__PURE__*/ o({
 	__name: "SegmentedControl",
-	props: /*@__PURE__*/ c({ options: {} }, {
+	props: /*@__PURE__*/ s({
+		options: {},
+		block: { type: Boolean }
+	}, {
 		modelValue: { required: !0 },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(s) {
-		let c = m(s, "modelValue");
-		return (m, b) => (u(), n(p(_), {
-			modelValue: c.value,
-			"onUpdate:modelValue": b[0] ||= (e) => c.value = e,
-			class: "flex w-fit gap-0.5 rounded-lg bg-sui-sunken p-0.75 ring-1 ring-sui-line-subtle ring-inset",
+	setup(o) {
+		let s = p(o, "modelValue");
+		return (p, b) => (l(), n(f(g), {
+			modelValue: s.value,
+			"onUpdate:modelValue": b[0] ||= (e) => s.value = e,
+			class: c(["flex gap-0.5 rounded-lg bg-sui-sunken p-0.75 ring-1 ring-sui-line-subtle ring-inset", o.block ? "w-full" : "w-fit"]),
 			orientation: "horizontal"
 		}, {
-			default: h(() => [(u(!0), i(t, null, d(s.options, (t) => (u(), n(p(g), {
+			default: m(() => [(l(!0), i(t, null, u(o.options, (t) => (l(), n(f(h), {
 				key: t.value,
-				class: l(["inline-flex h-7 items-center gap-1.5 rounded-md pr-3 pl-2.5 text-13 font-medium transition-colors focus-visible:sui-ring-inset [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]", t.value === c.value ? "bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle" : "text-sui-ink-body hover:text-sui-ink"]),
+				class: c(["inline-flex h-7 items-center gap-1.5 rounded-md text-13 font-medium transition-colors focus-visible:sui-ring-inset [&_svg]:shrink-0 [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]", [o.block ? "min-w-0 flex-1 justify-center px-2" : "pr-3 pl-2.5", t.value === s.value ? "bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle" : "text-sui-ink-body hover:text-sui-ink"]]),
 				value: t.value
 			}, {
-				default: h(() => [t.iconName ? (u(), n(e, {
+				default: m(() => [t.iconName ? (l(), n(e, {
 					key: 0,
 					class: "h-4 w-4",
-					color: t.value === c.value ? "ink" : "ink-body",
+					color: t.value === s.value ? "ink" : "ink-body",
 					name: t.iconName
-				}, null, 8, ["color", "name"])) : t.icon ? (u(), i("svg", v, [a("path", { d: t.icon }, null, 8, y)])) : r("", !0), o(" " + f(t.label), 1)]),
+				}, null, 8, ["color", "name"])) : t.icon ? (l(), i("svg", _, [a("path", { d: t.icon }, null, 8, v)])) : r("", !0), a("span", y, d(t.label), 1)]),
 				_: 2
 			}, 1032, ["class", "value"]))), 128))]),
 			_: 1
-		}, 8, ["modelValue"]));
+		}, 8, ["modelValue", "class"]));
 	}
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeClass","Icon","_createElementVNode","_createCommentVNode","_createTextVNode","_toDisplayString","Icon_default","_hoisted_1","_hoisted_2","SegmentedControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","model","useModel","__props","openBlock","createBlock","unref","RadioGroupRoot","_cache","$event","withCtx","createElementBlock","Fragment","renderList","RadioGroupItem","option","normalizeClass","createElementVNode","createCommentVNode","createTextVNode","toDisplayString"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { RadioGroupItem, RadioGroupRoot } from 'reka-ui'\n\nimport Icon from '../Icon/Icon.vue'\n\nexport interface SegmentedControlOption<T extends string> {\n  value: T\n  label: string\n  /** An Icon name. */\n  iconName?: string\n  /** An SVG path on a 24px grid. */\n  icon?: string\n}\n\ndefineProps<{ options: SegmentedControlOption<T>[] }>()\n\nconst model = defineModel<T>({ required: true })\n</script>\n\n<!-- A few choices side by side, one picked: the chosen one lifts onto a card. Arrow keys move between them. -->\n<template>\n  <RadioGroupRoot\n    v-model=\"model\"\n    class=\"flex w-fit gap-0.5 rounded-lg bg-sui-sunken p-0.75 ring-1 ring-sui-line-subtle ring-inset\"\n    orientation=\"horizontal\"\n  >\n    <RadioGroupItem\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"inline-flex h-7 items-center gap-1.5 rounded-md pr-3 pl-2.5 text-13 font-medium transition-colors focus-visible:sui-ring-inset [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]\"\n      :class=\"\n        option.value === model\n          ? 'bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle'\n          : 'text-sui-ink-body hover:text-sui-ink'\n      \"\n      :value=\"option.value\"\n    >\n      <Icon\n        v-if=\"option.iconName\"\n        class=\"h-4 w-4\"\n        :color=\"option.value === model ? 'ink' : 'ink-body'\"\n        :name=\"option.iconName\"\n      />\n      <svg\n        v-else-if=\"option.icon\"\n        aria-hidden=\"true\"\n        class=\"h-3.5 w-3.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path :d=\"option.icon\" />\n      </svg>\n      {{ option.label }}\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAgBA,IAAMoB,IAAQpB,EAAcsB,GAAA,YAAmB;E,kBAK7CrB,EAAA,GAAAC,EAmCiBC,EAAAuB,CAAA,GAAA;GAlCN,YAAAN,EAAA;GAAA,uBAAA,AAAAO,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACN,aAAY;;GAGV,SAAAxB,QAAyB,EAD3BH,EAAA,EAAA,GAAAI,EA6BiBC,GAAA,MAAAC,EA5BEe,EAAA,UAAV,OADTrB,EAAA,GAAAC,EA6BiBC,EAAA8B,CAAA,GAAA;IA3Bd,KAAKC,EAAO;IACb,OAAK1B,EAAA,CAAC,iMACW0B,EAAO,UAAUd,EAAA,Q;IAKjC,OAAOc,EAAO;;IAEf,SAAA9B,QAKE,CAJM8B,EAAO,YADfjC,EAAA,GAAAC,EAKEO,GAAA;;KAHA,OAAM;KACL,OAAOyB,EAAO,UAAUd,EAAA,QAAK,QAAA;KAC7B,MAAMc,EAAO;I,kCAGHA,EAAO,QADpBjC,EAAA,GAAAI,EAUM,OAVNU,GAUM,CADJL,EAAyB,QAAA,EAAlB,GAAGwB,EAAO,K,+BACbtB,EAAA,MACNC,EAAGqB,EAAO,KAAK,GAAA,CAAA,C"}
+{"version":3,"file":"SegmentedControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_renderList","Icon","_createElementVNode","_createCommentVNode","_toDisplayString","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","SegmentedControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","model","useModel","__props","openBlock","createBlock","unref","RadioGroupRoot","_cache","$event","normalizeClass","withCtx","createElementBlock","Fragment","renderList","RadioGroupItem","option","createElementVNode","createCommentVNode","toDisplayString"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { RadioGroupItem, RadioGroupRoot } from 'reka-ui'\n\nimport Icon from '../Icon/Icon.vue'\n\nexport interface SegmentedControlOption<T extends string> {\n  value: T\n  label: string\n  /** An Icon name. */\n  iconName?: string\n  /** An SVG path on a 24px grid. */\n  icon?: string\n}\n\nexport interface SegmentedControlProps<T extends string> {\n  options: SegmentedControlOption<T>[]\n  /** Fills its row, the segments sharing it evenly with their labels truncated: phone tab bars. */\n  block?: boolean\n}\n\ndefineProps<SegmentedControlProps<T>>()\n\nconst model = defineModel<T>({ required: true })\n</script>\n\n<!-- A few choices side by side, one picked: the chosen one lifts onto a card. Arrow keys move between them. -->\n<template>\n  <RadioGroupRoot\n    v-model=\"model\"\n    class=\"flex gap-0.5 rounded-lg bg-sui-sunken p-0.75 ring-1 ring-sui-line-subtle ring-inset\"\n    :class=\"block ? 'w-full' : 'w-fit'\"\n    orientation=\"horizontal\"\n  >\n    <RadioGroupItem\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"inline-flex h-7 items-center gap-1.5 rounded-md text-13 font-medium transition-colors focus-visible:sui-ring-inset [&_svg]:shrink-0 [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]\"\n      :class=\"[\n        block ? 'min-w-0 flex-1 justify-center px-2' : 'pr-3 pl-2.5',\n        option.value === model\n          ? 'bg-sui-surface text-sui-ink shadow-(--sui-shadow-raised) ring-1 ring-sui-line-subtle'\n          : 'text-sui-ink-body hover:text-sui-ink'\n      ]\"\n      :value=\"option.value\"\n    >\n      <Icon\n        v-if=\"option.iconName\"\n        class=\"h-4 w-4\"\n        :color=\"option.value === model ? 'ink' : 'ink-body'\"\n        :name=\"option.iconName\"\n      />\n      <svg\n        v-else-if=\"option.icon\"\n        aria-hidden=\"true\"\n        class=\"h-3.5 w-3.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path :d=\"option.icon\" />\n      </svg>\n      <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAMoB,IAAQpB,EAAcsB,GAAA,YAAmB;E,kBAK7CrB,EAAA,GAAAC,EAqCiBC,EAAAuB,CAAA,GAAA;GApCN,YAAAN,EAAA;GAAA,uBAAA,AAAAO,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAKxB,EAAA,CAAC,uFACEkB,EAAA,QAAK,WAAA,OAAA,CAAA;GACb,aAAY;;GAGV,SAAAjB,QAAyB,EAD3BJ,EAAA,EAAA,GAAAK,EA8BiBC,GAAA,MAAAC,EA7BEc,EAAA,UAAV,OADTrB,EAAA,GAAAC,EA8BiBC,EAAA+B,CAAA,GAAA;IA5Bd,KAAKC,EAAO;IACb,OAAK/B,EAAA,CAAC,sMAAoM,CACxLkB,EAAA,QAAK,uCAAA,eAAiEa,EAAO,UAAUf,EAAA,Q;IAMxG,OAAOe,EAAO;;IAEf,SAAA9B,QAKE,CAJM8B,EAAO,YADflC,EAAA,GAAAC,EAKEO,GAAA;;KAHA,OAAM;KACL,OAAO0B,EAAO,UAAUf,EAAA,QAAK,QAAA;KAC7B,MAAMe,EAAO;I,kCAGHA,EAAO,QADpBlC,EAAA,GAAAK,EAUM,OAVNQ,GAUM,CADJJ,EAAyB,QAAA,EAAlB,GAAGyB,EAAO,K,+BAEnBzB,EAAwD,QAAxDM,GAAwDJ,EAAtBuB,EAAO,KAAK,GAAA,CAAA,C"}

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

@@ -1,2 +1,2 @@
 export { default as SegmentedControl } from './SegmentedControl.vue';
-export type { SegmentedControlOption } from './SegmentedControl.vue';
+export type { SegmentedControlOption, SegmentedControlProps } from './SegmentedControl.vue';

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  /** 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  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 th = computed(() => [\n  'border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap',\n  sm.value ? 'h-9' : 'h-11'\n])\nconst td = computed(() => [\n  'truncate border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0',\n  sm.value ? 'h-10' : 'h-[3.5625rem]'\n])\nconst pad = computed(() => (sm.value ? 'px-3 py-1.5' : 'px-4 py-3'))\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 class=\"overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink\">\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=\"bg-sui-sunken\" :class=\"[th, checkCell]\">\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' : 'bg-sui-sunken 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 v-for=\"column in columns\" :key=\"column.key\" :class=\"[td, pad, alignClass[column.align ?? 'left']]\">\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  /** 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":""}

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

@@ -11,6 +11,10 @@ export interface TableProps<T> {
     loadingRows?: number;
     /** md: 57px rows. sm: 40px, for dense lists. */
     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;
+    /** 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. */
     caption?: string;
     selectAllLabel?: string;

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

@@ -2,28 +2,28 @@ import e from "../Skeleton/Skeleton.js";
 import t from "../Checkbox/Checkbox.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, useModel as y, useSlots as b, withCtx as x, withModifiers as S } from "vue";
 //#region src/components/Table/Table.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink" }, w = { class: "overflow-x-auto" }, T = { class: "w-full min-w-[var(--sui-table-min,720px)] table-fixed border-collapse" }, E = {
+var C = { class: "overflow-x-auto" }, w = { class: "w-full min-w-[var(--sui-table-min,720px)] table-fixed border-collapse" }, T = {
 	key: 0,
 	class: "sr-only"
-}, D = {
+}, E = {
 	key: 0,
 	class: "w-12"
-}, ee = ["onClick"], te = {
+}, D = ["onClick"], O = {
 	key: 0,
 	d: "M3 7.5 6 4.5l3 3"
-}, ne = {
+}, ee = {
 	key: 1,
 	d: "M3 4.5 6 7.5l3-3"
-}, re = {
+}, te = {
 	key: 2,
 	d: "M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5"
-}, ie = ["aria-busy"], O = { key: 0 }, k = ["colspan"], A = ["aria-selected", "onClick"], j = {
+}, ne = ["aria-busy"], re = { key: 0 }, ie = ["colspan"], ae = ["aria-selected", "onClick"], k = {
 	key: 1,
 	class: "text-sui-ink-muted"
-}, M = {
+}, A = {
 	key: 0,
 	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 = "w-12 pl-4", P = /*@__PURE__*/ u({
+}, j = "w-12 pl-4", M = /*@__PURE__*/ u({
 	__name: "Table",
 	props: /*@__PURE__*/ d({
 		columns: {},
@@ -33,6 +33,8 @@ var C = { class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-su
 		loading: { type: Boolean },
 		loadingRows: { default: 5 },
 		size: { default: "md" },
+		rowHeight: { default: void 0 },
+		headerTone: { default: "sunken" },
 		caption: { default: void 0 },
 		selectAllLabel: { default: "Select all rows" },
 		selectRowLabel: { default: "Select row" },
@@ -48,53 +50,60 @@ var C = { class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-su
 	}),
 	emits: ["update:sort", "update:selected"],
 	setup(u) {
-		let d = u, P = y(u, "sort"), F = y(u, "selected"), I = b(), L = (e) => e[d.rowKey ?? "id"], R = r(() => d.rows.map(L)), z = r(() => R.value.length > 0 && R.value.every((e) => F.value.includes(e))), B = r(() => !z.value && R.value.some((e) => F.value.includes(e)));
-		function V() {
-			F.value = z.value ? F.value.filter((e) => !R.value.includes(e)) : [.../* @__PURE__ */ new Set([...F.value, ...R.value])];
+		let d = u, M = y(u, "sort"), N = y(u, "selected"), P = b(), F = (e) => e[d.rowKey ?? "id"], I = r(() => d.rows.map(F)), L = r(() => I.value.length > 0 && I.value.every((e) => N.value.includes(e))), R = r(() => !L.value && I.value.some((e) => N.value.includes(e)));
+		function z() {
+			N.value = L.value ? N.value.filter((e) => !I.value.includes(e)) : [.../* @__PURE__ */ new Set([...N.value, ...I.value])];
 		}
-		function H(e) {
-			F.value = F.value.includes(e) ? F.value.filter((t) => t !== e) : [...F.value, e];
+		function B(e) {
+			N.value = N.value.includes(e) ? N.value.filter((t) => t !== e) : [...N.value, e];
 		}
-		function U(e) {
-			let t = P.value?.key === e ? P.value.dir : null, n = t === null ? "asc" : t === "asc" ? "desc" : null;
-			P.value = n ? {
+		function V(e) {
+			let t = M.value?.key === e ? M.value.dir : null, n = t === null ? "asc" : t === "asc" ? "desc" : null;
+			M.value = n ? {
 				key: e,
 				dir: n
 			} : null;
 		}
-		function W(e) {
-			return P.value?.key === e ? P.value.dir : null;
+		function H(e) {
+			return M.value?.key === e ? M.value.dir : null;
 		}
-		function G(e) {
-			let t = W(e.key);
+		function U(e) {
+			let t = H(e.key);
 			return t ? t === "asc" ? "ascending" : "descending" : e.sortable ? "none" : void 0;
 		}
-		let K = r(() => I.error ? "error" : d.loading ? "loading" : d.rows.length === 0 && I.empty ? "empty" : "rows"), q = r(() => d.columns.length + +!!d.selectable), J = {
+		let W = r(() => P.error ? "error" : d.loading ? "loading" : d.rows.length === 0 && P.empty ? "empty" : "rows"), G = r(() => d.columns.length + +!!d.selectable), K = {
 			left: "text-left",
 			center: "text-center",
 			right: "text-right"
-		}, Y = [
+		}, q = [
 			"60%",
 			"45%",
 			"70%",
 			"35%",
 			"55%"
-		], X = r(() => d.size === "sm"), Z = r(() => ["border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap", X.value ? "h-9" : "h-11"]), Q = r(() => ["truncate border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0", X.value ? "h-10" : "h-[3.5625rem]"]), $ = r(() => X.value ? "px-3 py-1.5" : "px-4 py-3"), ae = r(() => X.value ? "px-3" : "px-4");
-		return (r, d) => (m(), o("div", C, [s("div", w, [s("table", T, [
-			u.caption ? (m(), o("caption", E, v(u.caption), 1)) : a("", !0),
-			s("colgroup", null, [u.selectable ? (m(), o("col", D)) : a("", !0), (m(!0), o(n, null, h(u.columns, (e) => (m(), o("col", {
+		], 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");
+		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)
+		}, [s("div", C, [s("table", w, [
+			u.caption ? (m(), o("caption", T, v(u.caption), 1)) : a("", !0),
+			s("colgroup", null, [u.selectable ? (m(), o("col", E)) : a("", !0), (m(!0), o(n, null, h(u.columns, (e) => (m(), o("col", {
 				key: e.key,
 				style: p({ width: typeof e.width == "number" ? `${e.width}px` : e.width })
 			}, null, 4))), 128))]),
 			s("thead", null, [s("tr", null, [u.selectable ? (m(), o("th", {
 				key: 0,
-				class: f(["bg-sui-sunken", [Z.value, N]])
+				class: f([
+					X.value,
+					j,
+					$.value
+				])
 			}, [l(t, {
 				"aria-label": u.selectAllLabel,
 				disabled: u.loading || u.rows.length === 0,
-				indeterminate: B.value,
-				"model-value": z.value,
-				"onUpdate:modelValue": V
+				indeterminate: R.value,
+				"model-value": L.value,
+				"onUpdate:modelValue": z
 			}, null, 8, [
 				"aria-label",
 				"disabled",
@@ -102,12 +111,12 @@ var C = { class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-su
 				"model-value"
 			])], 2)) : a("", !0), (m(!0), o(n, null, h(u.columns, (e) => (m(), i(_(e.label ? "th" : "td"), {
 				key: e.key,
-				"aria-sort": G(e),
+				"aria-sort": U(e),
 				class: f([
-					Z.value,
-					ae.value,
-					J[e.align ?? "left"],
-					W(e.key) ? "bg-sui-accent-wash text-sui-accent" : "bg-sui-sunken text-sui-ink-subtle"
+					X.value,
+					se.value,
+					K[e.align ?? "left"],
+					H(e.key) ? "bg-sui-accent-wash text-sui-accent" : [$.value, "text-sui-ink-subtle"]
 				]),
 				scope: e.label ? "col" : void 0
 			}, {
@@ -116,53 +125,53 @@ var C = { class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-su
 					class: f(["inline-flex h-full w-full items-center gap-1.5 rounded-md outline-hidden focus-visible:sui-ring-inset", [
 						e.align === "right" && "justify-end",
 						e.align === "center" && "justify-center",
-						!W(e.key) && "hover:text-sui-ink"
+						!H(e.key) && "hover:text-sui-ink"
 					]]),
 					type: "button",
-					onClick: (t) => U(e.key)
+					onClick: (t) => V(e.key)
 				}, [c(v(e.label) + " ", 1), (m(), o("svg", {
 					"aria-hidden": "true",
-					class: f(["size-3 shrink-0 fill-none stroke-current", !W(e.key) && "opacity-50"]),
+					class: f(["size-3 shrink-0 fill-none stroke-current", !H(e.key) && "opacity-50"]),
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round",
 					"stroke-width": "1.5",
 					viewBox: "0 0 12 12"
-				}, [W(e.key) === "asc" ? (m(), o("path", te)) : W(e.key) === "desc" ? (m(), o("path", ne)) : (m(), o("path", re))], 2))], 10, ee)) : (m(), o(n, { key: 1 }, [c(v(e.label), 1)], 64))]),
+				}, [H(e.key) === "asc" ? (m(), o("path", O)) : H(e.key) === "desc" ? (m(), o("path", ee)) : (m(), o("path", te))], 2))], 10, D)) : (m(), o(n, { key: 1 }, [c(v(e.label), 1)], 64))]),
 				_: 2
 			}, 1032, [
 				"aria-sort",
 				"class",
 				"scope"
 			]))), 128))])]),
-			s("tbody", { "aria-busy": u.loading || void 0 }, [K.value === "error" || K.value === "empty" ? (m(), o("tr", O, [s("td", {
+			s("tbody", { "aria-busy": u.loading || void 0 }, [W.value === "error" || W.value === "empty" ? (m(), o("tr", re, [s("td", {
 				class: "p-0",
-				colspan: q.value
-			}, [g(r.$slots, K.value)], 8, k)])) : K.value === "loading" ? (m(!0), o(n, { key: 1 }, h(u.loadingRows, (t) => (m(), o("tr", {
+				colspan: G.value
+			}, [g(r.$slots, W.value)], 8, ie)])) : W.value === "loading" ? (m(!0), o(n, { key: 1 }, h(u.loadingRows, (t) => (m(), o("tr", {
 				key: t,
 				"aria-hidden": "true",
 				class: "group/row"
 			}, [u.selectable ? (m(), o("td", {
 				key: 0,
-				class: f([Q.value, N])
+				class: f([Z.value, j])
 			}, [l(e, { size: "1rem" })], 2)) : a("", !0), (m(!0), o(n, null, h(u.columns, (n, r) => (m(), o("td", {
 				key: n.key,
-				class: f([Q.value, $.value])
+				class: f([Z.value, Q.value])
 			}, [l(e, {
 				height: "0.75rem",
-				width: Y[(t + r) % 5]
+				width: q[(t + r) % 5]
 			}, null, 8, ["width"])], 2))), 128))]))), 128)) : (m(!0), o(n, { key: 2 }, h(u.rows, (e) => (m(), o("tr", {
-				key: L(e),
-				"aria-selected": u.selectable ? F.value.includes(L(e)) : void 0,
-				class: f(["group/row transition-colors duration-150", [F.value.includes(L(e)) ? "bg-sui-accent-wash" : "hover:bg-sui-sunken", u.onRowClick && "cursor-pointer"]]),
+				key: F(e),
+				"aria-selected": u.selectable ? N.value.includes(F(e)) : void 0,
+				class: f(["group/row transition-colors duration-150", [N.value.includes(F(e)) ? "bg-sui-accent-wash" : "hover:bg-sui-sunken", u.onRowClick && "cursor-pointer"]]),
 				onClick: (t) => u.onRowClick?.(e)
 			}, [u.selectable ? (m(), o("td", {
 				key: 0,
-				class: f([Q.value, N]),
+				class: f([Z.value, j]),
 				onClick: d[0] ||= S(() => {}, ["stop"])
 			}, [l(t, {
 				"aria-label": u.selectRowLabel,
-				"model-value": F.value.includes(L(e)),
-				"onUpdate:modelValue": (t) => H(L(e))
+				"model-value": N.value.includes(F(e)),
+				"onUpdate:modelValue": (t) => B(F(e))
 			}, null, 8, [
 				"aria-label",
 				"model-value",
@@ -170,18 +179,19 @@ var C = { class: "overflow-hidden rounded-xl border border-sui-line-subtle bg-su
 			])], 2)) : a("", !0), (m(!0), o(n, null, h(u.columns, (t) => (m(), o("td", {
 				key: t.key,
 				class: f([
+					Z.value,
 					Q.value,
-					$.value,
-					J[t.align ?? "left"]
+					K[t.align ?? "left"],
+					t.wrap ? "break-words whitespace-normal" : "truncate"
 				])
 			}, [g(r.$slots, `cell-${t.key}`, {
 				row: e,
 				value: e[t.key]
-			}, () => [e[t.key] != null && e[t.key] !== "" ? (m(), o(n, { key: 0 }, [c(v(e[t.key]), 1)], 64)) : (m(), o("span", j, "–"))])], 2))), 128))], 10, A))), 128))], 8, ie)
-		])]), r.$slots.footer ? (m(), o("div", M, [g(r.$slots, "footer")])) : a("", !0)]));
+			}, () => [e[t.key] != null && e[t.key] !== "" ? (m(), o(n, { key: 0 }, [c(v(e[t.key]), 1)], 64)) : (m(), o("span", k, "–"))])], 2))), 128))], 10, ae))), 128))], 8, ne)
+		])]), r.$slots.footer ? (m(), o("div", A, [g(r.$slots, "footer")])) : a("", !0)], 4));
 	}
 });
 //#endregion
-export { P as default };
+export { M as default };
 
 //# sourceMappingURL=Table.vue_vue_type_script_setup_true_lang.js.map

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","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_normalizeStyle","_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","_hoisted_15","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","th","td","pad","headPad","openBlock","createElementBlock","createElementVNode","toDisplayString","createCommentVNode","Fragment","renderList","normalizeStyle","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  /** 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  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 th = computed(() => [\n  'border-b border-sui-line-subtle text-13 font-medium whitespace-nowrap',\n  sm.value ? 'h-9' : 'h-11'\n])\nconst td = computed(() => [\n  'truncate border-b border-sui-line-subtle align-middle text-sui-ink-body group-last/row:border-b-0',\n  sm.value ? 'h-10' : 'h-[3.5625rem]'\n])\nconst pad = computed(() => (sm.value ? 'px-3 py-1.5' : 'px-4 py-3'))\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 class=\"overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sm text-sui-ink\">\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=\"bg-sui-sunken\" :class=\"[th, checkCell]\">\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' : 'bg-sui-sunken 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 v-for=\"column in columns\" :key=\"column.key\" :class=\"[td, pad, alignClass[column.align ?? 'left']]\">\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","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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"}

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

@@ -5,6 +5,8 @@ export interface TableColumn {
     width?: number | string;
     align?: 'left' | 'center' | 'right';
     sortable?: boolean;
+    /** Lets the cell's content wrap onto more lines, e.g. a name over a summary; cells otherwise truncate to one. */
+    wrap?: boolean;
 }
 export interface TableSort {
     key: string;

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}\n\nwithDefaults(defineProps<TagProps>(), {\n  name: undefined,\n  variant: 'soft',\n  color: undefined,\n  removeLabel: 'Remove tag'\n})\n\ndefineEmits<{ remove: [] }>()\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. -->\n<template>\n  <span\n    v-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 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":""}

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

@@ -12,17 +12,30 @@ export interface TagProps {
     removable?: boolean;
     /** The remove button's accessible name. */
     removeLabel?: string;
+    /** A toggle button for quick choices, bound to `v-model:pressed`. Group several in a `role="group"` with a label. */
+    pressable?: boolean;
+    /** pressable only. */
+    disabled?: boolean;
 }
-declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Props = TagProps;
+type __VLS_ModelProps = {
+    'pressed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: () => any;
-}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{
+    "update:pressed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onRemove?: (() => any) | undefined;
+    "onUpdate:pressed"?: ((value: boolean) => any) | undefined;
 }>, {
     variant: "soft" | "outline";
     name: string;