@ecoma-io/loom 0.4.0 → 0.5.0

package/dist/packages/primitives/command/src/Command.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,333 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, watch } from "vue";
+//#region packages/primitives/command/src/Command.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-state"];
+var _hoisted_2 = { class: "flex items-center border-b border-border" };
+var _hoisted_3 = [
+	"id",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-labelledby",
+	"aria-label",
+	"placeholder",
+	"value"
+];
+var _hoisted_4 = ["id", "aria-labelledby"];
+var _hoisted_5 = ["id"];
+var _hoisted_6 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"data-active",
+	"onMouseenter",
+	"onClick"
+];
+var _hoisted_7 = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+};
+var _hoisted_8 = {
+	key: 0,
+	role: "option",
+	"aria-selected": "false",
+	"aria-disabled": "true",
+	class: "px-2 py-6 text-center text-sm text-muted-foreground"
+};
+var _hoisted_9 = ["id"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it.
+* Every string a Command actually says is the chrome around the host's items,
+* so the whole slot is here and none of it hides in the template.
+*/
+var COMMAND_LABELS = {
+	placeholder: "Type to search…",
+	emptyMessage: "No results found.",
+	searchLabel: "Search",
+	resultSingular: "{count} result available",
+	resultPlural: "{count} results available"
+};
+var Command_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Command",
+	props: {
+		items: {},
+		groups: {},
+		query: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: { default: void 0 },
+		ariaLabelledby: {}
+	},
+	emits: [
+		"select",
+		"update:query",
+		"update:open"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const resolvedLabels = useLabels("command", COMMAND_LABELS, () => props.labels);
+		const inputId = useId();
+		const listboxId = useId();
+		const liveRegionId = useId();
+		/**
+		* The controlled/uncontrolled query. When `query` is bound from outside, the
+		* prop wins; otherwise the component owns its own state.
+		*/
+		const internalQuery = ref("");
+		const queryValue = computed(() => props.query ?? internalQuery.value);
+		function setQuery(value) {
+			internalQuery.value = value;
+			emit("update:query", value);
+		}
+		/**
+		* The controlled/uncontrolled open state. `true` when the listbox is visible.
+		*/
+		const internalOpen = ref(true);
+		const isOpen = computed(() => props.open ?? internalOpen.value);
+		function setOpen(value) {
+			if (props.open !== void 0) emit("update:open", value);
+			else internalOpen.value = value;
+		}
+		/**
+		* Bring the listbox back after Escape closed it. Focus never leaves the
+		* search input, so without this a closed Command is a dead end — the only
+		* escape, before this fix, was unmounting the component. Controlled mode is
+		* untouched: the emit the host chose stays with the host, and this rewrites
+		* only the fallback state a host never bound.
+		*/
+		function restoreOpen() {
+			if (props.open === void 0) internalOpen.value = true;
+		}
+		/**
+		* The index of the highlighted item within the filtered list. Reset to `0`
+		* whenever the query changes so the first match is always ready to select.
+		*/
+		const highlightedIndex = ref(0);
+		const listboxRef = ref(null);
+		watch([highlightedIndex, isOpen], async () => {
+			if (!isOpen.value) return;
+			await nextTick();
+			listboxRef.value?.querySelector("[data-active]")?.scrollIntoView?.({ block: "nearest" });
+		});
+		/**
+		* Items filtered by the current query. Case-insensitive substring match
+		* across `label`, `description` and `value`.
+		*/
+		const filteredItems = computed(() => {
+			const needle = queryValue.value.trim().toLowerCase();
+			if (!needle) return props.items;
+			return props.items.filter((item) => {
+				return [
+					item.label,
+					item.description ?? "",
+					item.value
+				].join(" ").toLowerCase().includes(needle);
+			});
+		});
+		/**
+		* Items grouped for rendering. Each entry is either a group heading or a flat
+		* item. Groups with no matching items are omitted entirely.
+		*/
+		const renderEntries = computed(() => {
+			if (filteredItems.value.length === 0) return [];
+			const groupDefs = props.groups;
+			if (!groupDefs || groupDefs.length === 0) return filteredItems.value.map((item, i) => ({
+				kind: "item",
+				item,
+				globalIndex: i
+			}));
+			const ungrouped = [];
+			const grouped = /* @__PURE__ */ new Map();
+			for (const item of filteredItems.value) if (item.group) {
+				const list = grouped.get(item.group) ?? [];
+				list.push(item);
+				grouped.set(item.group, list);
+			} else ungrouped.push(item);
+			const entries = [];
+			let globalIndex = 0;
+			for (const def of groupDefs) {
+				const items = grouped.get(def.heading);
+				if (!items || items.length === 0) continue;
+				entries.push({
+					kind: "heading",
+					heading: def.heading,
+					groupId: `${inputId}-group-${def.heading}`
+				});
+				for (const item of items) {
+					entries.push({
+						kind: "item",
+						item,
+						globalIndex
+					});
+					globalIndex++;
+				}
+			}
+			for (const item of ungrouped) {
+				entries.push({
+					kind: "item",
+					item,
+					globalIndex
+				});
+				globalIndex++;
+			}
+			return entries;
+		});
+		/**
+		* The item list for the non-grouped case, used by keyboard navigation. Derived
+		* from `renderEntries` so the two are always in sync.
+		*/
+		const flatItems = computed(() => renderEntries.value.filter((e) => e.kind === "item"));
+		/**
+		* Keep the highlight within bounds. A filter that removes items can strand the
+		* index past the end.
+		*/
+		watch(flatItems, (items) => {
+			if (highlightedIndex.value >= items.length) highlightedIndex.value = Math.max(0, items.length - 1);
+		});
+		/**
+		* The documented reset: the highlight returns to the first match whenever the
+		* query changes — whether the query came from typing or from a parent updating
+		* the controlled `query` prop. Typing reaches this watcher through `setQuery`,
+		* which is why onInput no longer resets the highlight itself.
+		*/
+		watch(queryValue, () => {
+			highlightedIndex.value = 0;
+		});
+		/**
+		* The total number of results, announced to assistive technology through a live
+		* region. Changes only when the filtered set changes, not on every keystroke.
+		*/
+		const resultCount = computed(() => filteredItems.value.length);
+		const announcement = ref("");
+		watch(resultCount, (count) => {
+			const template = count === 1 ? resolvedLabels.value.resultSingular : resolvedLabels.value.resultPlural;
+			announcement.value = template.replace("{count}", String(count));
+		});
+		/**
+		* The currently highlighted item, or `undefined` when the list is empty.
+		*/
+		const highlightedItem = computed(() => flatItems.value[highlightedIndex.value]?.item);
+		function highlightUp() {
+			if (flatItems.value.length === 0) return;
+			highlightedIndex.value = highlightedIndex.value <= 0 ? flatItems.value.length - 1 : highlightedIndex.value - 1;
+		}
+		function highlightDown() {
+			if (flatItems.value.length === 0) return;
+			highlightedIndex.value = highlightedIndex.value >= flatItems.value.length - 1 ? 0 : highlightedIndex.value + 1;
+		}
+		function selectHighlighted() {
+			const item = highlightedItem.value;
+			if (!item || item.disabled) return;
+			emit("select", item.value);
+		}
+		function onKeydown(event) {
+			if (!isOpen.value && event.key !== "Escape" && event.key !== "Tab") restoreOpen();
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					highlightDown();
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					highlightUp();
+					break;
+				case "Enter":
+					event.preventDefault();
+					selectHighlighted();
+					break;
+				case "Escape":
+					event.preventDefault();
+					if (queryValue.value.length > 0) setQuery("");
+					else setOpen(false);
+					break;
+				case "Home":
+					event.preventDefault();
+					if (flatItems.value.length > 0) highlightedIndex.value = 0;
+					break;
+				case "End":
+					event.preventDefault();
+					if (flatItems.value.length > 0) highlightedIndex.value = flatItems.value.length - 1;
+			}
+		}
+		function onInput(event) {
+			const value = event.target.value;
+			setQuery(value);
+		}
+		function selectItem(item) {
+			if (item.disabled) return;
+			emit("select", item.value);
+		}
+		function itemId(index) {
+			return `${inputId}-option-${String(index)}`;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-state": isOpen.value ? "open" : "closed",
+				class: normalizeClass(unref(cn)("rounded-md border border-border bg-popover text-popover-foreground shadow-md overflow-hidden", "outline-none"))
+			}, [
+				createElementVNode("div", _hoisted_2, [createElementVNode("input", {
+					id: unref(inputId),
+					type: "text",
+					role: "searchbox",
+					autocomplete: "off",
+					autocorrect: "off",
+					spellcheck: "false",
+					"aria-autocomplete": "list",
+					"aria-controls": unref(listboxId),
+					"aria-activedescendant": highlightedItem.value ? itemId(highlightedIndex.value) : void 0,
+					"aria-labelledby": __props.ariaLabelledby,
+					"aria-label": __props.ariaLabelledby ? void 0 : unref(resolvedLabels).searchLabel,
+					placeholder: unref(resolvedLabels).placeholder,
+					value: queryValue.value,
+					class: "w-full px-3 py-2 text-sm bg-transparent text-foreground border-none outline-none placeholder:text-muted-foreground",
+					onInput,
+					onKeydown,
+					onFocus: restoreOpen,
+					onClick: restoreOpen
+				}, null, 40, _hoisted_3)]),
+				isOpen.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(listboxId),
+					ref_key: "listboxRef",
+					ref: listboxRef,
+					role: "listbox",
+					tabindex: "0",
+					"aria-labelledby": unref(inputId),
+					class: "max-h-[300px] overflow-y-auto p-1"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderEntries.value, (entry) => {
+					return openBlock(), createElementBlock(Fragment, { key: entry.kind === "heading" ? entry.groupId : entry.item.value }, [entry.kind === "heading" ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: entry.groupId,
+						role: "presentation",
+						class: "px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground"
+					}, toDisplayString(entry.heading), 9, _hoisted_5)) : (openBlock(), createElementBlock("div", {
+						key: 1,
+						id: itemId(entry.globalIndex),
+						role: "option",
+						"aria-selected": highlightedIndex.value === entry.globalIndex,
+						"aria-disabled": entry.item.disabled || void 0,
+						"data-active": highlightedIndex.value === entry.globalIndex || void 0,
+						class: "flex flex-col gap-0.5 rounded-sm px-2 py-1.5 text-sm cursor-pointer outline-none transition-colors duration-fast ease-out data-[active]:bg-primary-muted data-[active]:text-primary-text",
+						onMouseenter: ($event) => highlightedIndex.value = entry.globalIndex,
+						onClick: ($event) => selectItem(entry.item)
+					}, [createElementVNode("span", null, toDisplayString(entry.item.label), 1), entry.item.description ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(entry.item.description), 1)) : createCommentVNode("", true)], 40, _hoisted_6))], 64);
+				}), 128)), filteredItems.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(unref(resolvedLabels).emptyMessage), 1)) : createCommentVNode("", true)], 8, _hoisted_4)) : createCommentVNode("", true),
+				createElementVNode("span", {
+					id: unref(liveRegionId),
+					role: "status",
+					"aria-live": "polite",
+					class: "sr-only"
+				}, toDisplayString(announcement.value), 9, _hoisted_9)
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { COMMAND_LABELS, Command_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Command.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/command/src/Command.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/command/src/Command.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CommandLabels, LabelOverrides } from \"@ecoma-io/loom-labels\";\n/**\n * One searchable item in the command list. `value` is what the host receives on\n * select; `label` is what the reader sees and what the filter matches against.\n *\n * Deliberately not `ComboboxOption` or `DropdownMenuEntry`: those shapes carry\n * `modelValue` and `separator` fields respectively, and either would be\n * dead weight here — a command is an action, not a value or a menu row.\n */\nexport interface CommandItem {\n  /** Unique key. */\n  value: string;\n  /** Visible label. */\n  label: string;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Group heading this item belongs to. */\n  group?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * A named section heading above a run of items. Only rendered when the group\n * contains at least one item that survived the current filter.\n */\nexport interface CommandGroup {\n  /** Group heading text. */\n  heading: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * Every string a Command actually says is the chrome around the host's items,\n * so the whole slot is here and none of it hides in the template.\n */\nexport const COMMAND_LABELS: CommandLabels = {\n  placeholder: \"Type to search…\",\n  emptyMessage: \"No results found.\",\n  searchLabel: \"Search\",\n  resultSingular: \"{count} result available\",\n  resultPlural: \"{count} results available\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useId, watch } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Command — a keyboard-driven command search, the universal \"Cmd+K\" pattern.\n *\n * A text input that narrows a grouped list as you type, for executing actions\n * rather than selecting values. Its neighbour is `Combobox`, which selects a\n * value for a form field; this control runs an action and has no `modelValue`.\n *\n * The two are one family in the same way a Combobox and a Select are: the same\n * surface vocabulary, the same tokens, the same keyboard model. What differs is\n * intent — \"open settings\" is not a value you could submit in a form — and that\n * intent shapes the API: `onSelect` rather than `v-model`.\n *\n * Built from native ARIA roles rather than Reka UI, because Reka ships no\n * Command primitive. The semantics follow the WAI-ARIA combobox pattern with\n * `aria-activedescendant` navigation: focus stays in the input while the\n * highlighted item moves, which is the only model that keeps typing fluid.\n *\n * `aria-expanded` is deliberately absent. The input is a fixed searchbox, not\n * a popover trigger, so it has no collapsed state to announce: the listbox is\n * visible on mount and returns on any interaction after Escape closes it.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The items to search through. */\n    items: CommandItem[];\n    /** Optional group definitions for section headers. */\n    groups?: CommandGroup[];\n    /** Controlled search query. */\n    query?: string | undefined;\n    /** Whether the command menu is open. */\n    open?: boolean | undefined;\n    /** Names for the strings this control supplies itself. */\n    labels?: LabelOverrides<CommandLabels> | undefined;\n    /** Accessible label by reference for the search input. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    query: undefined,\n    open: undefined,\n    labels: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Fired when an item is selected. */\n  select: [value: string];\n  /** Fired when the query changes. */\n  \"update:query\": [value: string];\n  /** Fired when open state changes. */\n  \"update:open\": [value: boolean];\n}>();\n\nconst resolvedLabels = useLabels(\"command\", COMMAND_LABELS, () => props.labels);\n\nconst inputId = useId();\nconst listboxId = useId();\nconst liveRegionId = useId();\n\n/**\n * The controlled/uncontrolled query. When `query` is bound from outside, the\n * prop wins; otherwise the component owns its own state.\n */\nconst internalQuery = ref(\"\");\nconst queryValue = computed(() => props.query ?? internalQuery.value);\n\nfunction setQuery(value: string): void {\n  internalQuery.value = value;\n  emit(\"update:query\", value);\n}\n\n/**\n * The controlled/uncontrolled open state. `true` when the listbox is visible.\n */\nconst internalOpen = ref(true);\nconst isOpen = computed(() => props.open ?? internalOpen.value);\n\nfunction setOpen(value: boolean): void {\n  if (props.open !== undefined) {\n    emit(\"update:open\", value);\n  } else {\n    internalOpen.value = value;\n  }\n}\n\n/**\n * Bring the listbox back after Escape closed it. Focus never leaves the\n * search input, so without this a closed Command is a dead end — the only\n * escape, before this fix, was unmounting the component. Controlled mode is\n * untouched: the emit the host chose stays with the host, and this rewrites\n * only the fallback state a host never bound.\n */\nfunction restoreOpen(): void {\n  if (props.open === undefined) internalOpen.value = true;\n}\n\n/**\n * The index of the highlighted item within the filtered list. Reset to `0`\n * whenever the query changes so the first match is always ready to select.\n */\nconst highlightedIndex = ref(0);\n\nconst listboxRef = ref<HTMLElement | null>(null);\n\n// Arrow-key focus never leaves the input (aria-activedescendant), so the\n// scrollable listbox must be tab-reachable itself — an overflow container no\n// keyboard can reach is the scrollable-region-focusable violation the harness\n// axe gate exists to catch. Scrolling the highlighted option into view is the\n// other half: an active item moved off-screen is navigation the user cannot\n// see. jsdom has no scrollIntoView, hence the optional call.\nwatch([highlightedIndex, isOpen], async () => {\n  if (!isOpen.value) return;\n  await nextTick();\n  listboxRef.value?.querySelector(\"[data-active]\")?.scrollIntoView?.({ block: \"nearest\" });\n});\n\n/**\n * Items filtered by the current query. Case-insensitive substring match\n * across `label`, `description` and `value`.\n */\nconst filteredItems = computed(() => {\n  const needle = queryValue.value.trim().toLowerCase();\n  if (!needle) return props.items;\n  return props.items.filter((item) => {\n    const haystack = [item.label, item.description ?? \"\", item.value].join(\" \").toLowerCase();\n    return haystack.includes(needle);\n  });\n});\n\n/**\n * Items grouped for rendering. Each entry is either a group heading or a flat\n * item. Groups with no matching items are omitted entirely.\n */\ninterface GroupedEntry {\n  kind: \"heading\";\n  heading: string;\n  groupId: string;\n}\n\ninterface GroupedItem {\n  kind: \"item\";\n  item: CommandItem;\n  globalIndex: number;\n}\n\ntype RenderEntry = GroupedEntry | GroupedItem;\n\nconst renderEntries = computed<RenderEntry[]>(() => {\n  if (filteredItems.value.length === 0) return [];\n\n  const groupDefs = props.groups;\n  if (!groupDefs || groupDefs.length === 0) {\n    return filteredItems.value.map((item, i) => ({ kind: \"item\", item, globalIndex: i }));\n  }\n\n  const ungrouped: CommandItem[] = [];\n  const grouped = new Map<string, CommandItem[]>();\n\n  for (const item of filteredItems.value) {\n    if (item.group) {\n      const list = grouped.get(item.group) ?? [];\n      list.push(item);\n      grouped.set(item.group, list);\n    } else {\n      ungrouped.push(item);\n    }\n  }\n\n  const entries: RenderEntry[] = [];\n  let globalIndex = 0;\n\n  for (const def of groupDefs) {\n    const items = grouped.get(def.heading);\n    if (!items || items.length === 0) continue;\n    entries.push({\n      kind: \"heading\",\n      heading: def.heading,\n      groupId: `${inputId}-group-${def.heading}`,\n    });\n    for (const item of items) {\n      entries.push({ kind: \"item\", item, globalIndex });\n      globalIndex++;\n    }\n  }\n\n  for (const item of ungrouped) {\n    entries.push({ kind: \"item\", item, globalIndex });\n    globalIndex++;\n  }\n\n  return entries;\n});\n\n/**\n * The item list for the non-grouped case, used by keyboard navigation. Derived\n * from `renderEntries` so the two are always in sync.\n */\nconst flatItems = computed(() =>\n  renderEntries.value.filter((e): e is GroupedItem => e.kind === \"item\"),\n);\n\n/**\n * Keep the highlight within bounds. A filter that removes items can strand the\n * index past the end.\n */\nwatch(flatItems, (items) => {\n  if (highlightedIndex.value >= items.length) {\n    highlightedIndex.value = Math.max(0, items.length - 1);\n  }\n});\n\n/**\n * The documented reset: the highlight returns to the first match whenever the\n * query changes — whether the query came from typing or from a parent updating\n * the controlled `query` prop. Typing reaches this watcher through `setQuery`,\n * which is why onInput no longer resets the highlight itself.\n */\nwatch(queryValue, () => {\n  highlightedIndex.value = 0;\n});\n\n/**\n * The total number of results, announced to assistive technology through a live\n * region. Changes only when the filtered set changes, not on every keystroke.\n */\nconst resultCount = computed(() => filteredItems.value.length);\nconst announcement = ref(\"\");\nwatch(resultCount, (count) => {\n  const template =\n    count === 1 ? resolvedLabels.value.resultSingular : resolvedLabels.value.resultPlural;\n  announcement.value = template.replace(\"{count}\", String(count));\n});\n\n/**\n * The currently highlighted item, or `undefined` when the list is empty.\n */\nconst highlightedItem = computed(() => flatItems.value[highlightedIndex.value]?.item);\n\nfunction highlightUp(): void {\n  if (flatItems.value.length === 0) return;\n  highlightedIndex.value =\n    highlightedIndex.value <= 0 ? flatItems.value.length - 1 : highlightedIndex.value - 1;\n}\n\nfunction highlightDown(): void {\n  if (flatItems.value.length === 0) return;\n  highlightedIndex.value =\n    highlightedIndex.value >= flatItems.value.length - 1 ? 0 : highlightedIndex.value + 1;\n}\n\nfunction selectHighlighted(): void {\n  const item = highlightedItem.value;\n  if (!item || item.disabled) return;\n  emit(\"select\", item.value);\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // A closed Command returns on any interaction except the two that leave it —\n  // Escape (the key that closed it, still under the same finger) and Tab\n  // (which moves focus elsewhere). Keydown fires before the input event, so\n  // typing also lands on an open list.\n  if (!isOpen.value && event.key !== \"Escape\" && event.key !== \"Tab\") restoreOpen();\n  switch (event.key) {\n    case \"ArrowDown\": {\n      event.preventDefault();\n      highlightDown();\n      break;\n    }\n    case \"ArrowUp\": {\n      event.preventDefault();\n      highlightUp();\n      break;\n    }\n    case \"Enter\": {\n      event.preventDefault();\n      selectHighlighted();\n      break;\n    }\n    case \"Escape\": {\n      event.preventDefault();\n      if (queryValue.value.length > 0) {\n        setQuery(\"\");\n      } else {\n        setOpen(false);\n      }\n      break;\n    }\n    case \"Home\": {\n      event.preventDefault();\n      if (flatItems.value.length > 0) highlightedIndex.value = 0;\n      break;\n    }\n    case \"End\": {\n      event.preventDefault();\n      if (flatItems.value.length > 0) highlightedIndex.value = flatItems.value.length - 1;\n      break;\n    }\n  }\n}\n\nfunction onInput(event: Event): void {\n  const value = (event.target as HTMLInputElement).value;\n  setQuery(value);\n}\n\nfunction selectItem(item: CommandItem): void {\n  if (item.disabled) return;\n  emit(\"select\", item.value);\n}\n\nfunction itemId(index: number): string {\n  return `${inputId}-option-${String(index)}`;\n}\n</script>\n\n<template>\n  <div\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    :class=\"\n      cn(\n        'rounded-md border border-border bg-popover text-popover-foreground shadow-md overflow-hidden',\n        'outline-none',\n      )\n    \"\n  >\n    <div class=\"flex items-center border-b border-border\">\n      <input\n        :id=\"inputId\"\n        type=\"text\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-activedescendant=\"highlightedItem ? itemId(highlightedIndex) : undefined\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :aria-label=\"ariaLabelledby ? undefined : resolvedLabels.searchLabel\"\n        :placeholder=\"resolvedLabels.placeholder\"\n        :value=\"queryValue\"\n        class=\"w-full px-3 py-2 text-sm bg-transparent text-foreground border-none outline-none placeholder:text-muted-foreground\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"restoreOpen\"\n        @click=\"restoreOpen\"\n      />\n    </div>\n    <div\n      v-if=\"isOpen\"\n      :id=\"listboxId\"\n      ref=\"listboxRef\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      :aria-labelledby=\"inputId\"\n      class=\"max-h-[300px] overflow-y-auto p-1\"\n    >\n      <template\n        v-for=\"entry in renderEntries\"\n        :key=\"entry.kind === 'heading' ? entry.groupId : entry.item.value\"\n      >\n        <div\n          v-if=\"entry.kind === 'heading'\"\n          :id=\"entry.groupId\"\n          role=\"presentation\"\n          class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n        >\n          {{ entry.heading }}\n        </div>\n        <!-- eslint-disable vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus, vuejs-accessibility/mouse-events-have-key-events -->\n        <div\n          v-else\n          :id=\"itemId(entry.globalIndex)\"\n          role=\"option\"\n          :aria-selected=\"highlightedIndex === entry.globalIndex\"\n          :aria-disabled=\"entry.item.disabled || undefined\"\n          :data-active=\"highlightedIndex === entry.globalIndex || undefined\"\n          class=\"flex flex-col gap-0.5 rounded-sm px-2 py-1.5 text-sm cursor-pointer outline-none transition-colors duration-fast ease-out data-[active]:bg-primary-muted data-[active]:text-primary-text\"\n          @mouseenter=\"highlightedIndex = entry.globalIndex\"\n          @click=\"selectItem(entry.item)\"\n        >\n          <span>{{ entry.item.label }}</span>\n          <span v-if=\"entry.item.description\" class=\"text-xs text-muted-foreground\">\n            {{ entry.item.description }}\n          </span>\n        </div>\n      </template>\n\n      <div\n        v-if=\"filteredItems.length === 0\"\n        role=\"option\"\n        aria-selected=\"false\"\n        aria-disabled=\"true\"\n        class=\"px-2 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ resolvedLabels.emptyMessage }}\n      </div>\n    </div>\n\n    <span :id=\"liveRegionId\" role=\"status\" aria-live=\"polite\" class=\"sr-only\">\n      {{ announcement }}\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/command/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, COMMAND_LABELS } from "./Command.vue";
+export type { CommandItem, CommandGroup } from "./Command.vue";
+export type { CommandLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/command/src/index.js

@@ -0,0 +1,3 @@
+import { COMMAND_LABELS } from "./Command.vue_vue_type_script_setup_true_lang.js";
+import Command_default from "./Command.js";
+export { COMMAND_LABELS, Command_default as default };

package/dist/packages/primitives/copy-button/src/CopyButton.js

@@ -0,0 +1,7 @@
+import CopyButton_vue_vue_type_script_setup_true_lang_default, { COPY_BUTTON_LABELS, COPY_REVERT_MS } from "./CopyButton.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/copy-button/src/CopyButton.vue
+var CopyButton_default = CopyButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { COPY_BUTTON_LABELS, COPY_REVERT_MS, CopyButton_default as default };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/packages/primitives/copy-button/src/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../../../../packages/primitives/copy-button/src/CopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CopyButtonLabels } from \"@ecoma-io/loom-labels\";\nimport type { IconButtonSize, IconButtonVariant } from \"@ecoma-io/loom-icon-button\";\n\n/**\n * The visual weights and hit areas are IconButton's, verbatim — a copy button\n * is an icon button that happens to own a clipboard contract, and there is no\n * second press language to maintain.\n */\nexport type CopyButtonVariant = IconButtonVariant;\nexport type CopyButtonSize = IconButtonSize;\n\nexport const COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy to clipboard\",\n  copied: \"Copied to clipboard\",\n  failed: \"Could not copy to clipboard\",\n};\n\n/** How long the copied/failed feedback holds before the button returns to its resting glyph. */\nexport const COPY_REVERT_MS = 2000;\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref } from \"vue\";\nimport { Check, Copy, X } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useAnnounce } from \"@ecoma-io/loom-live-region\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The text to copy. Provide `value` or `getText` — a `CopyButton` with neither has nothing to do. */\n    value?: string;\n    /** Resolved at click time instead of a static `value` — for text the host computes on demand, possibly asynchronously. */\n    getText?: () => string | Promise<string>;\n    /**\n     * Names for what the button says, as any subset of `CopyButtonLabels` —\n     * the per-instance correction over `COPY_BUTTON_LABELS`, in the same\n     * shape every component's `labels` prop takes. `copy` is the button's\n     * accessible name and never changes with the state; `copied` and\n     * `failed` are what assistive technology hears.\n     */\n    labels?: LabelOverrides<CopyButtonLabels>;\n    /** Visual weight, shared with IconButton. */\n    variant?: CopyButtonVariant;\n    /** Square hit area, shared with IconButton. */\n    size?: CopyButtonSize;\n    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false, type: \"button\" },\n);\n\n/**\n * The outcome is announced through the shared LiveRegion seam, not a\n * region of this component's own: a region must pre-exist the messages it\n * announces, and the seam's standalone pair on `document.body` guarantees\n * that without every copy button mounting its own.\n */\nconst announce = useAnnounce();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"copyButton\", COPY_BUTTON_LABELS, () => props.labels);\n\n/**\n * idle → copied | failed → idle, on a two-second revert timer. The guard\n * covers only the await window: a click during the feedback window is a\n * legitimate \"copy again\", not a duplicate — the announcement seam re-adds\n * the message, so a repeat is heard.\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\nconst state = ref<CopyState>(\"idle\");\nlet pending = false;\nlet revertTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction scheduleRevert(): void {\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = setTimeout(() => {\n    state.value = \"idle\";\n    revertTimer = null;\n  }, COPY_REVERT_MS);\n}\n\nonBeforeUnmount(() => {\n  // The timer holds the only writer into `state`; firing after unmount\n  // would write into a dead component. Cleared, not waited out.\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = null;\n});\n\nasync function copy(): Promise<void> {\n  if (props.disabled || pending) return;\n  pending = true;\n  try {\n    // A throwing `getText` and a refusing clipboard take the same road:\n    // the failed state is announced, the glyph says so, and the button\n    // stays operable so the very next click retries the whole attempt.\n    const value = props.getText ? await props.getText() : (props.value ?? \"\");\n    await navigator.clipboard.writeText(value);\n    state.value = \"copied\";\n    announce(text.value.copied);\n  } catch {\n    state.value = \"failed\";\n    announce(text.value.failed);\n  } finally {\n    pending = false;\n    scheduleRevert();\n  }\n}\n</script>\n\n<template>\n  <IconButton\n    :label=\"text.copy\"\n    :variant=\"variant\"\n    :size=\"size\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n    @click=\"copy\"\n  >\n    <!-- The glyph swap is the feedback's visual half only — never its only\n         carrier. The announcement carries the state to assistive technology,\n         and the accessible name stays `copy` throughout: a button whose name\n         changes under a screen reader's cursor is its own confusion. -->\n    <Check v-if=\"state === 'copied'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <X v-else-if=\"state === 'failed'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <Copy v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n  </IconButton>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/copy-button/src/CopyButton.vue.d.ts

@@ -0,0 +1,64 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { CopyButtonLabels } from "../../../labels/src/index";
+import type { IconButtonSize, IconButtonVariant } from "../../icon-button/src/index";
+/**
+ * The visual weights and hit areas are IconButton's, verbatim — a copy button
+ * is an icon button that happens to own a clipboard contract, and there is no
+ * second press language to maintain.
+ */
+export type CopyButtonVariant = IconButtonVariant;
+export type CopyButtonSize = IconButtonSize;
+export declare const COPY_BUTTON_LABELS: CopyButtonLabels;
+/** How long the copied/failed feedback holds before the button returns to its resting glyph. */
+export declare const COPY_REVERT_MS = 2000;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The text to copy. Provide `value` or `getText` — a `CopyButton` with neither has nothing to do. */
+    value?: string;
+    /** Resolved at click time instead of a static `value` — for text the host computes on demand, possibly asynchronously. */
+    getText?: () => string | Promise<string>;
+    /**
+     * Names for what the button says, as any subset of `CopyButtonLabels` —
+     * the per-instance correction over `COPY_BUTTON_LABELS`, in the same
+     * shape every component's `labels` prop takes. `copy` is the button's
+     * accessible name and never changes with the state; `copied` and
+     * `failed` are what assistive technology hears.
+     */
+    labels?: LabelOverrides<CopyButtonLabels>;
+    /** Visual weight, shared with IconButton. */
+    variant?: CopyButtonVariant;
+    /** Square hit area, shared with IconButton. */
+    size?: CopyButtonSize;
+    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */
+    disabled?: boolean;
+    /** The native button type. Defaults to `button`, never an accidental submit. */
+    type?: "button" | "submit" | "reset";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The text to copy. Provide `value` or `getText` — a `CopyButton` with neither has nothing to do. */
+    value?: string;
+    /** Resolved at click time instead of a static `value` — for text the host computes on demand, possibly asynchronously. */
+    getText?: () => string | Promise<string>;
+    /**
+     * Names for what the button says, as any subset of `CopyButtonLabels` —
+     * the per-instance correction over `COPY_BUTTON_LABELS`, in the same
+     * shape every component's `labels` prop takes. `copy` is the button's
+     * accessible name and never changes with the state; `copied` and
+     * `failed` are what assistive technology hears.
+     */
+    labels?: LabelOverrides<CopyButtonLabels>;
+    /** Visual weight, shared with IconButton. */
+    variant?: CopyButtonVariant;
+    /** Square hit area, shared with IconButton. */
+    size?: CopyButtonSize;
+    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */
+    disabled?: boolean;
+    /** The native button type. Defaults to `button`, never an accidental submit. */
+    type?: "button" | "submit" | "reset";
+}> & Readonly<{}>, {
+    size: CopyButtonSize;
+    type: "button" | "submit" | "reset";
+    disabled: boolean;
+    variant: CopyButtonVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=CopyButton.vue.d.ts.map

package/dist/packages/primitives/copy-button/src/CopyButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import IconButton_default from "../../icon-button/src/IconButton.js";
+import "../../icon-button/src/index.js";
+import { useAnnounce } from "../../live-region/src/useAnnounce.js";
+import "../../live-region/src/index.js";
+import { createBlock, defineComponent, onBeforeUnmount, openBlock, ref, unref, withCtx } from "vue";
+import { Check, Copy, X } from "@lucide/vue";
+//#region packages/primitives/copy-button/src/CopyButton.vue?vue&type=script&setup=true&lang.ts
+var COPY_BUTTON_LABELS = {
+	copy: "Copy to clipboard",
+	copied: "Copied to clipboard",
+	failed: "Could not copy to clipboard"
+};
+/** How long the copied/failed feedback holds before the button returns to its resting glyph. */
+var COPY_REVERT_MS = 2e3;
+var CopyButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "CopyButton",
+	props: {
+		value: {},
+		getText: {},
+		labels: {},
+		variant: { default: "default" },
+		size: { default: "md" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		type: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		/**
+		* The outcome is announced through the shared LiveRegion seam, not a
+		* region of this component's own: a region must pre-exist the messages it
+		* announces, and the seam's standalone pair on `document.body` guarantees
+		* that without every copy button mounting its own.
+		*/
+		const announce = useAnnounce();
+		const text = useLabels("copyButton", COPY_BUTTON_LABELS, () => props.labels);
+		/**
+		* idle → copied | failed → idle, on a two-second revert timer. The guard
+		* covers only the await window: a click during the feedback window is a
+		* legitimate "copy again", not a duplicate — the announcement seam re-adds
+		* the message, so a repeat is heard.
+		*/
+		const state = ref("idle");
+		let pending = false;
+		let revertTimer = null;
+		function scheduleRevert() {
+			if (revertTimer !== null) clearTimeout(revertTimer);
+			revertTimer = setTimeout(() => {
+				state.value = "idle";
+				revertTimer = null;
+			}, COPY_REVERT_MS);
+		}
+		onBeforeUnmount(() => {
+			if (revertTimer !== null) clearTimeout(revertTimer);
+			revertTimer = null;
+		});
+		async function copy() {
+			if (props.disabled || pending) return;
+			pending = true;
+			try {
+				const value = props.getText ? await props.getText() : props.value ?? "";
+				await navigator.clipboard.writeText(value);
+				state.value = "copied";
+				announce(text.value.copied);
+			} catch {
+				state.value = "failed";
+				announce(text.value.failed);
+			} finally {
+				pending = false;
+				scheduleRevert();
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(IconButton_default), {
+				label: unref(text).copy,
+				variant: __props.variant,
+				size: __props.size,
+				disabled: __props.disabled,
+				type: __props.type,
+				onClick: copy
+			}, {
+				default: withCtx(() => [state.value === "copied" ? (openBlock(), createBlock(unref(Check), {
+					key: 0,
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})) : state.value === "failed" ? (openBlock(), createBlock(unref(X), {
+					key: 1,
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})) : (openBlock(), createBlock(unref(Copy), {
+					key: 2,
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				}))]),
+				_: 1
+			}, 8, [
+				"label",
+				"variant",
+				"size",
+				"disabled",
+				"type"
+			]);
+		};
+	}
+});
+//#endregion
+export { COPY_BUTTON_LABELS, COPY_REVERT_MS, CopyButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CopyButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/copy-button/src/CopyButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/copy-button/src/CopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CopyButtonLabels } from \"@ecoma-io/loom-labels\";\nimport type { IconButtonSize, IconButtonVariant } from \"@ecoma-io/loom-icon-button\";\n\n/**\n * The visual weights and hit areas are IconButton's, verbatim — a copy button\n * is an icon button that happens to own a clipboard contract, and there is no\n * second press language to maintain.\n */\nexport type CopyButtonVariant = IconButtonVariant;\nexport type CopyButtonSize = IconButtonSize;\n\nexport const COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy to clipboard\",\n  copied: \"Copied to clipboard\",\n  failed: \"Could not copy to clipboard\",\n};\n\n/** How long the copied/failed feedback holds before the button returns to its resting glyph. */\nexport const COPY_REVERT_MS = 2000;\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref } from \"vue\";\nimport { Check, Copy, X } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useAnnounce } from \"@ecoma-io/loom-live-region\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The text to copy. Provide `value` or `getText` — a `CopyButton` with neither has nothing to do. */\n    value?: string;\n    /** Resolved at click time instead of a static `value` — for text the host computes on demand, possibly asynchronously. */\n    getText?: () => string | Promise<string>;\n    /**\n     * Names for what the button says, as any subset of `CopyButtonLabels` —\n     * the per-instance correction over `COPY_BUTTON_LABELS`, in the same\n     * shape every component's `labels` prop takes. `copy` is the button's\n     * accessible name and never changes with the state; `copied` and\n     * `failed` are what assistive technology hears.\n     */\n    labels?: LabelOverrides<CopyButtonLabels>;\n    /** Visual weight, shared with IconButton. */\n    variant?: CopyButtonVariant;\n    /** Square hit area, shared with IconButton. */\n    size?: CopyButtonSize;\n    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false, type: \"button\" },\n);\n\n/**\n * The outcome is announced through the shared LiveRegion seam, not a\n * region of this component's own: a region must pre-exist the messages it\n * announces, and the seam's standalone pair on `document.body` guarantees\n * that without every copy button mounting its own.\n */\nconst announce = useAnnounce();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"copyButton\", COPY_BUTTON_LABELS, () => props.labels);\n\n/**\n * idle → copied | failed → idle, on a two-second revert timer. The guard\n * covers only the await window: a click during the feedback window is a\n * legitimate \"copy again\", not a duplicate — the announcement seam re-adds\n * the message, so a repeat is heard.\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\nconst state = ref<CopyState>(\"idle\");\nlet pending = false;\nlet revertTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction scheduleRevert(): void {\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = setTimeout(() => {\n    state.value = \"idle\";\n    revertTimer = null;\n  }, COPY_REVERT_MS);\n}\n\nonBeforeUnmount(() => {\n  // The timer holds the only writer into `state`; firing after unmount\n  // would write into a dead component. Cleared, not waited out.\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = null;\n});\n\nasync function copy(): Promise<void> {\n  if (props.disabled || pending) return;\n  pending = true;\n  try {\n    // A throwing `getText` and a refusing clipboard take the same road:\n    // the failed state is announced, the glyph says so, and the button\n    // stays operable so the very next click retries the whole attempt.\n    const value = props.getText ? await props.getText() : (props.value ?? \"\");\n    await navigator.clipboard.writeText(value);\n    state.value = \"copied\";\n    announce(text.value.copied);\n  } catch {\n    state.value = \"failed\";\n    announce(text.value.failed);\n  } finally {\n    pending = false;\n    scheduleRevert();\n  }\n}\n</script>\n\n<template>\n  <IconButton\n    :label=\"text.copy\"\n    :variant=\"variant\"\n    :size=\"size\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n    @click=\"copy\"\n  >\n    <!-- The glyph swap is the feedback's visual half only — never its only\n         carrier. The announcement carries the state to assistive technology,\n         and the accessible name stays `copy` throughout: a button whose name\n         changes under a screen reader's cursor is its own confusion. -->\n    <Check v-if=\"state === 'copied'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <X v-else-if=\"state === 'failed'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <Copy v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n  </IconButton>\n</template>\n"],"mappings":";;;;;;;;;AAYA,IAAa,qBAAuC;CAClD,MAAM;CACN,QAAQ;CACR,QAAQ;AACV;;AAGA,IAAa,iBAAiB;;;;;;;;;;;;;;;;EAU9B,MAAM,QAAQ;;;;;;;EAgCd,MAAM,WAAW,YAAY;EAM7B,MAAM,OAAO,UAAU,cAAc,0BAA0B,MAAM,MAAM;;;;;;;EAS3E,MAAM,QAAQ,IAAe,MAAM;EACnC,IAAI,UAAU;EACd,IAAI,cAAoD;EAExD,SAAS,iBAAuB;GAC9B,IAAI,gBAAgB,MAAM,aAAa,WAAW;GAClD,cAAc,iBAAiB;IAC7B,MAAM,QAAQ;IACd,cAAc;GAChB,GAAG,cAAc;EACnB;EAEA,sBAAsB;GAGpB,IAAI,gBAAgB,MAAM,aAAa,WAAW;GAClD,cAAc;EAChB,CAAC;EAED,eAAe,OAAsB;GACnC,IAAI,MAAM,YAAY,SAAS;GAC/B,UAAU;GACV,IAAI;IAIF,MAAM,QAAQ,MAAM,UAAU,MAAM,MAAM,QAAQ,IAAK,MAAM,SAAS;IACtE,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,MAAM,QAAQ;IACd,SAAS,KAAK,MAAM,MAAM;GAC5B,QAAQ;IACN,MAAM,QAAQ;IACd,SAAS,KAAK,MAAM,MAAM;GAC5B,UAAU;IACR,UAAU;IACV,eAAe;GACjB;EACF;;GAIE,OAAA,UAAA,GAAA,YAea,MAAA,kBAAA,GAAA;IAdV,OAAO,MAAA,IAAA,CAAI,CAAC;IACZ,SAAS,QAAA;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,MAAM,QAAA;IACN,SAAO;;IAMK,SAAA,cAAA,CAAA,MAAA,UAAK,YAAlB,UAAA,GAAA,YAAsE,MAAA,KAAA,GAAA;;KAArC,OAAM;KAAU,eAAY;IAC/C,CAAA,KAAA,MAAA,UAAK,YAAnB,UAAA,GAAA,YAAuE,MAAA,CAAA,GAAA;;KAArC,OAAM;KAAU,eAAY;IAC9D,CAAA,MAAA,UAAA,GAAA,YAAkD,MAAA,IAAA,GAAA;;KAArC,OAAM;KAAU,eAAY"}

package/dist/packages/primitives/copy-button/src/index.d.ts

@@ -0,0 +1,4 @@
+export { COPY_BUTTON_LABELS, COPY_REVERT_MS, default } from "./CopyButton.vue";
+export type { CopyButtonSize, CopyButtonVariant } from "./CopyButton.vue";
+export type { CopyButtonLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/copy-button/src/index.js

@@ -0,0 +1,3 @@
+import "./CopyButton.vue_vue_type_script_setup_true_lang.js";
+import CopyButton_default from "./CopyButton.js";
+export { CopyButton_default as default };

package/dist/packages/primitives/data-grid/src/DataGrid.js

@@ -0,0 +1,7 @@
+import DataGrid_vue_vue_type_script_setup_true_lang_default, { DATA_GRID_LABELS } from "./DataGrid.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/data-grid/src/DataGrid.vue
+var DataGrid_default = DataGrid_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DATA_GRID_LABELS, DataGrid_default as default };
+
+//# sourceMappingURL=DataGrid.js.map