@scalar/components 0.32.1 → 0.33.0

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.script.js

@@ -1,106 +0,0 @@
-import ScalarComboboxOptions_default from "./ScalarComboboxOptions.vue.js";
-import ScalarComboboxPopover_default from "./ScalarComboboxPopover.vue.js";
-import { createBlock, createCommentVNode, createSlots, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, ref, renderSlot, useModel, withCtx } from "vue";
-var ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarComboboxMultiselect",
-	props: /*@__PURE__*/ mergeModels({
-		options: {},
-		placeholder: {},
-		filterFn: { type: Function },
-		loader: {},
-		placement: {},
-		offset: { type: [
-			Number,
-			Object,
-			Function
-		] },
-		resize: { type: Boolean },
-		target: {},
-		middleware: {},
-		teleport: { type: [Boolean, String] }
-	}, {
-		"modelValue": { default: () => [] },
-		"modelModifiers": {},
-		"query": { default: "" },
-		"queryModifiers": {}
-	}),
-	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue", "update:query"]),
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const emit = __emit;
-		const model = useModel(__props, "modelValue");
-		/** The search query, bind it to search the options yourself */
-		const query = useModel(__props, "query");
-		/** Propagate up the popover ref */
-		const comboboxPopoverRef = ref(null);
-		__expose({ comboboxPopoverRef });
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ScalarComboboxPopover_default, {
-				ref_key: "comboboxPopoverRef",
-				ref: comboboxPopoverRef,
-				middleware: __props.middleware,
-				offset: __props.offset,
-				placement: __props.placement ?? "bottom-start",
-				resize: __props.resize,
-				target: __props.target,
-				teleport: __props.teleport
-			}, {
-				default: withCtx(({ open }) => [renderSlot(_ctx.$slots, "default", { open })]),
-				popover: withCtx(({ open }) => [__props.options?.length || __props.loader ? (openBlock(), createBlock(ScalarComboboxOptions_default, {
-					key: 0,
-					modelValue: model.value,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-					query: query.value,
-					"onUpdate:query": _cache[1] || (_cache[1] = ($event) => query.value = $event),
-					filterFn: __props.filterFn,
-					loader: __props.loader,
-					multiselect: "",
-					open,
-					options: __props.options,
-					placeholder: __props.placeholder,
-					onAdd: _cache[2] || (_cache[2] = ($event) => emit("add"))
-				}, createSlots({ _: 2 }, [
-					_ctx.$slots["search-end"] ? {
-						name: "search-end",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "search-end", normalizeProps(guardReactiveProps(props)))]),
-						key: "0"
-					} : void 0,
-					_ctx.$slots.option ? {
-						name: "option",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(props)))]),
-						key: "1"
-					} : void 0,
-					_ctx.$slots.group ? {
-						name: "group",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "group", normalizeProps(guardReactiveProps(props)))]),
-						key: "2"
-					} : void 0,
-					_ctx.$slots.add ? {
-						name: "add",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "add", normalizeProps(guardReactiveProps(props)))]),
-						key: "3"
-					} : void 0
-				]), 1032, [
-					"modelValue",
-					"query",
-					"filterFn",
-					"loader",
-					"open",
-					"options",
-					"placeholder"
-				])) : createCommentVNode("", true)]),
-				_: 3
-			}, 8, [
-				"middleware",
-				"offset",
-				"placement",
-				"resize",
-				"target",
-				"teleport"
-			]);
-		};
-	}
-});
-//#endregion
-export { ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarComboboxMultiselect.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Multiselect component\n *\n * A searchable select input that supports selecting multiple options.\n *\n * @example\n * <ScalarComboboxMultiselect v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>Select items</ScalarButton>\n * </ScalarComboboxMultiselect>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\" O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O> \">\nimport { ref } from 'vue'\n\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport type { LoadingState } from '../ScalarLoading'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n     * server) using the `query` model, so results the server already matched are shown as given.\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n    /**\n     * The loading state of the options, see `useLoadingState`\n     *\n     * Shows a spinner at the end of the search input while active, or an X when the state is\n     * invalidated (e.g. a failed request).\n     */\n    loader?: LoadingState\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\n/** The search query, bind it to search the options yourself */\nconst query = defineModel<string>('query', { default: '' })\n\ndefineSlots<ComboboxSlots<O, G>>()\n\n/** Propagate up the popover ref */\nconst comboboxPopoverRef = ref<typeof ComboboxPopover | null>(null)\n\ndefineExpose({ comboboxPopoverRef })\n</script>\n<template>\n  <ComboboxPopover\n    ref=\"comboboxPopoverRef\"\n    :middleware=\"middleware\"\n    :offset=\"offset\"\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize=\"resize\"\n    :target=\"target\"\n    :teleport=\"teleport\">\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open }\">\n      <ComboboxOptions\n        v-if=\"options?.length || loader\"\n        v-model=\"model\"\n        v-model:query=\"query\"\n        :filterFn\n        :loader\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots['search-end']\"\n          #search-end=\"props\">\n          <slot\n            name=\"search-end\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAgB,SAAA,YAAsB;;EAGpD,MAAM,QAAQ,SAAmB,SAAC,OAAwB;;EAK1D,MAAM,qBAAqB,IAAmC,IAAI;EAElE,SAAa,EAAE,mBAAmB,CAAC;;uBAGjC,YAsDkB,+BAAA;aArDZ;IAAJ,KAAI;IACH,YAAY,QAAA;IACZ,QAAQ,QAAA;IACR,WAAW,QAAA,aAAS;IACpB,QAAQ,QAAA;IACR,QAAQ,QAAA;IACR,UAAU,QAAA;;IACA,SAAO,SACF,EADM,WAAI,CACxB,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SAyCE,EAzCE,WAAI,CAEhB,QAAA,SAAS,UAAU,QAAA,UAAA,UAAA,GAD3B,YAwCkB,+BAAA;;iBAtCP,MAAA;wEAAK,QAAA;KACN,OAAO,MAAA;mEAAK,QAAA;KACnB,UAAA,QAAA;KACA,QAAA,QAAA;KACD,aAAA;KACC;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,OAAG,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,KAAA;;KAGFA,KAAAA,OAAM,gBAAA;YACX;mBAAY,UAAK,CAClB,WAEmB,KAAA,QAAA,cAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.script.js

@@ -1,43 +0,0 @@
-import { cva, cx } from "@scalar/use-hooks/useBindCx";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
-//#region src/components/ScalarCombobox/ScalarComboboxOption.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-selected"];
-var ScalarComboboxOption_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarComboboxOption",
-	props: {
-		active: { type: Boolean },
-		selected: { type: Boolean }
-	},
-	setup(__props) {
-		const variants = cva({
-			base: [
-				"group/item",
-				"flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left",
-				"truncate bg-transparent text-c-1",
-				"cursor-pointer hover:bg-b-2"
-			],
-			variants: {
-				selected: { true: "text-c-1" },
-				active: { true: "bg-b-2" }
-			}
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("li", {
-				"aria-selected": __props.selected,
-				class: normalizeClass(unref(cx)(unref(variants)({
-					active: __props.active,
-					selected: __props.selected
-				}))),
-				role: "option",
-				tabindex: "-1"
-			}, [renderSlot(_ctx.$slots, "default", {
-				active: __props.active,
-				selected: __props.selected
-			})], 10, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { ScalarComboboxOption_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarComboboxOption.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarComboboxOption.vue.script.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Option component\n *\n * A single selectable option within a combobox list.\n * Handles active and selected states.\n *\n * @example\n * <ScalarComboboxOption :active=\"true\" :selected=\"false\">\n *   Option Label\n * </ScalarComboboxOption>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst { active, selected } = defineProps<{\n  active?: boolean\n  selected?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Group\n    'group/item',\n    // Layout\n    'flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left',\n    // Text / background style\n    'truncate bg-transparent text-c-1',\n    // Interaction\n    'cursor-pointer hover:bg-b-2',\n  ],\n  variants: {\n    selected: { true: 'text-c-1' },\n    active: { true: 'bg-b-2' },\n  },\n})\n</script>\n<template>\n  <li\n    :aria-selected=\"selected\"\n    :class=\"cx(variants({ active, selected }))\"\n    role=\"option\"\n    tabindex=\"-1\">\n    <slot\n      :active\n      :selected />\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;EAuBA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAEA;IAEA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,WAAW;IAC7B,QAAQ,EAAE,MAAM,SAAS;GAC3B;EACF,CAAC;;uBAGC,mBAQK,MAAA;IAPF,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;IAAQ,CAAA,CAAA,CAAA;IACtC,MAAK;IACL,UAAS;OACT,WAEc,KAAA,QAAA,WAAA;IADX,QAAA,QAAA;IACA,UAAA,QAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.script.js

@@ -1,36 +0,0 @@
-import { createCommentVNode, createElementBlock, defineComponent, openBlock, renderSlot, useId } from "vue";
-//#region src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"id",
-	"aria-labelledby",
-	"role"
-];
-var _hoisted_2 = ["id"];
-var ScalarComboboxOptionGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarComboboxOptionGroup",
-	props: {
-		id: { default: () => useId() },
-		hidden: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				id: __props.id,
-				"aria-labelledby": __props.id ? `${__props.id}-label` : void 0,
-				class: "contents",
-				role: __props.hidden ? void 0 : "group"
-			}, [!__props.hidden ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				id: `${__props.id}-label`,
-				class: "min-w-0 truncate px-2.5 py-1.5 text-c-2"
-			}, [renderSlot(_ctx.$slots, "label")], 8, _hoisted_2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { ScalarComboboxOptionGroup_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarComboboxOptionGroup.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarComboboxOptionGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Option Group component\n *\n * Groups related options under an optional label within a combobox.\n *\n * @example\n * <ScalarComboboxOptionGroup>\n *   <template #label>Group Name</template>\n *   <!-- options -->\n * </ScalarComboboxOptionGroup>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { id = useId(), hidden = false } = defineProps<{\n  id?: string\n  hidden?: boolean\n}>()\n</script>\n<template>\n  <div\n    :id=\"id\"\n    :aria-labelledby=\"id ? `${id}-label` : undefined\"\n    class=\"contents\"\n    :role=\"hidden ? undefined : 'group'\">\n    <div\n      v-if=\"!hidden\"\n      :id=\"`${id}-label`\"\n      class=\"min-w-0 truncate px-2.5 py-1.5 text-c-2\">\n      <slot name=\"label\" />\n    </div>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;uBAwBE,mBAYM,OAAA;IAXH,IAAI,QAAA;IACJ,mBAAiB,QAAA,KAAE,GAAM,QAAA,GAAE,UAAW,KAAA;IACvC,OAAM;IACL,MAAM,QAAA,SAAS,KAAA,IAAS;QAEhB,QAAA,UAAA,UAAA,GADT,mBAKM,OAAA;;IAHH,IAAE,GAAK,QAAA,GAAE;IACV,OAAM;OACN,WAAqB,KAAA,QAAA,OAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAEvB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.script.js

@@ -1,274 +0,0 @@
-import ScalarLoading_default from "../ScalarLoading/ScalarLoading.vue.js";
-import { filterByOptionLabel } from "./filter-by-option-label.js";
-import ScalarListboxCheckbox_default from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
-import ScalarComboboxOption_default from "./ScalarComboboxOption.vue.js";
-import ScalarComboboxOptionGroup_default from "./ScalarComboboxOptionGroup.vue.js";
-import { isGroups } from "./types.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { ScalarIconMagnifyingGlass, ScalarIconPlus } from "@scalar/icons";
-//#region src/components/ScalarCombobox/ScalarComboboxOptions.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "relative flex items-center m-1 mb-0.75" };
-var _hoisted_2 = [
-	"aria-activedescendant",
-	"aria-expanded",
-	"aria-label",
-	"placeholder"
-];
-var _hoisted_3 = {
-	key: 0,
-	class: "absolute right-1.75 top-1/2 flex -translate-y-1/2 items-center"
-};
-var _hoisted_4 = ["aria-busy", "aria-multiselectable"];
-var _hoisted_5 = {
-	key: 1,
-	class: "text-c-3 px-2.5 py-2",
-	role: "status"
-};
-var _hoisted_6 = { class: "inline-block min-w-0 flex-1 truncate text-c-1" };
-var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarComboboxOptions",
-	props: /*@__PURE__*/ mergeModels({
-		options: {},
-		placeholder: {},
-		inputLabel: {},
-		noResults: {},
-		close: { type: Function },
-		filterFn: {
-			type: Function,
-			default: filterByOptionLabel
-		},
-		loader: {},
-		multiselect: { type: Boolean }
-	}, {
-		"modelValue": { default: () => [] },
-		"modelModifiers": {},
-		"query": { default: "" },
-		"queryModifiers": {}
-	}),
-	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue", "update:query"]),
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const model = useModel(__props, "modelValue");
-		const slots = useSlots();
-		/** A unique ID for the combobox */
-		const id = `scalar-combobox-items-${useId()}`;
-		/** A static option entry for the "Add a new option" option */
-		const addOption = {
-			id: `${useId()}-add`,
-			label: "Add a new option"
-		};
-		/** Generate a unique ID for an option */
-		function getOptionId(option) {
-			return `${id}-${option.id}`;
-		}
-		/** A flat list of all options */
-		const options = computed(() => isGroups(__props.options) ? __props.options.flatMap((group) => group.options) : __props.options);
-		/** An list of all groups */
-		const groups = computed(() => isGroups(__props.options) ? __props.options : [{
-			label: "",
-			options: __props.options
-		}]);
-		/** The search query, exposed so callers can search the options themselves */
-		const query = useModel(__props, "query");
-		/** The filtered list of options */
-		const filtered = computed(() => __props.filterFn(query.value, options.value, groups.value));
-		/** The list of filtered options with the "Add a new option" option */
-		const withAdd = computed(() => slots.add ? [...filtered.value, addOption] : filtered.value);
-		/**
-		* The selected option when it is in the list, otherwise the top option.
-		*
-		* With async search the selected option is often not in the loaded results (e.g. a branch
-		* past the first page), and pointing at a row that does not exist would let Enter select nothing.
-		*/
-		const getInitialActive = () => {
-			const selected = model.value[0];
-			return selected && withAdd.value.some((option) => option.id === selected.id) ? selected : withAdd.value[0];
-		};
-		const activeRef = ref(getInitialActive());
-		onMounted(() => {
-			query.value = "";
-			activeRef.value = getInitialActive();
-			if (model.value[0]) setTimeout(() => {
-				const value = model.value[0];
-				if (!value) return;
-				document?.getElementById(getOptionId(value))?.scrollIntoView({ block: "nearest" });
-			}, 10);
-		});
-		/**
-		* Whether the query changed since the options last updated. Async results arrive after the
-		* query changes, so the top hit of the new results should become active even when the
-		* previously active option is still somewhere in the list.
-		*/
-		let queryChanged = false;
-		watch(() => query.value, () => {
-			activeRef.value = withAdd.value[0];
-			queryChanged = true;
-		});
-		/**
-		* Async options arrive after the query has changed, so the active option can point at a row
-		* that no longer exists or is no longer the top hit. Move it back to the top when that happens.
-		*/
-		watch(withAdd, (list) => {
-			if (queryChanged || !list.some((option) => option.id === activeRef.value?.id)) activeRef.value = list[0];
-			queryChanged = false;
-		});
-		/** Whether the options are still loading */
-		const isLoading = computed(() => Boolean(__props.loader?.isLoading));
-		/** Show placeholder rows while loading with nothing to show yet */
-		const showSkeleton = computed(() => isLoading.value && !filtered.value.length);
-		/** Show the loader in the search input, unless the skeleton already says it is loading */
-		const showLoader = computed(() => Boolean(__props.loader?.isActive) && !showSkeleton.value);
-		/** Whether there is anything to show at the end of the search input */
-		const showSearchEnd = computed(() => Boolean(slots["search-end"] || showLoader.value));
-		/** Whether the listbox has anything to show */
-		const showList = computed(() => Boolean(filtered.value.length || slots.add || showSkeleton.value || __props.noResults && !isLoading.value));
-		function toggleSelected(option) {
-			if (!option) return;
-			if (option.id === addOption.id) {
-				addNew();
-				return;
-			}
-			if (__props.multiselect && model.value.some((o) => o.id === option.id)) {
-				model.value = model.value.filter((o) => o.id !== option.id);
-				return;
-			}
-			const match = options.value.find((o) => o.id === option.id);
-			if (!match) return;
-			model.value = __props.multiselect ? [...model.value, match] : [match];
-		}
-		function moveActive(dir) {
-			const list = withAdd.value;
-			const nextIdx = list.findIndex((option) => option.id === activeRef.value?.id) + dir;
-			if (nextIdx < 0 || nextIdx > list.length - 1) return;
-			activeRef.value = list[nextIdx];
-			if (!activeRef.value) return;
-			document?.getElementById(getOptionId(activeRef.value))?.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest"
-			});
-		}
-		function addNew() {
-			emit("add");
-			query.value = "";
-		}
-		/**
-		* Space toggles the active option in multiselect mode while the search box is empty.
-		*
-		* The options look like checkboxes, so keyboard users press Space to toggle them. Without this
-		* handler Space types a leading space into the query, which filters out every option whose label
-		* has no space and hides the whole list without any feedback (found by an accessibility audit).
-		* Once a query has been typed, Space keeps inserting a character so multi-word labels stay
-		* searchable. Key auto-repeat is ignored so holding Space after opening the popover with it does
-		* not toggle the option repeatedly, and IME composition is left alone.
-		*/
-		const handleSpace = (event) => {
-			if (!__props.multiselect || query.value !== "" || event.isComposing) return;
-			event.preventDefault();
-			if (!event.repeat) toggleSelected(activeRef.value);
-		};
-		const input = ref(null);
-		onMounted(() => setTimeout(() => input.value?.focus(), 0));
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [
-				createVNode(unref(ScalarIconMagnifyingGlass), { class: "pointer-events-none absolute left-1.75 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
-				withDirectives(createElementVNode("input", {
-					ref_key: "input",
-					ref: input,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
-					"aria-activedescendant": activeRef.value ? getOptionId(activeRef.value) : void 0,
-					"aria-autocomplete": "list",
-					"aria-controls": id,
-					"aria-expanded": showList.value,
-					"aria-label": __props.inputLabel,
-					class: normalizeClass(["min-w-0 flex-1 rounded-md border-0 py-1.5 pl-7.25 leading-none text-c-1", showSearchEnd.value ? "pr-7.25" : "pr-1.75"]),
-					"data-1p-ignore": "",
-					placeholder: __props.placeholder,
-					role: "combobox",
-					tabindex: "0",
-					type: "text",
-					onKeydown: [
-						_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => moveActive(1), ["prevent"]), ["down"])),
-						_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => activeRef.value && toggleSelected(activeRef.value), ["prevent"]), ["enter"])),
-						_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => __props.close?.(), ["prevent"]), ["esc"])),
-						withKeys(handleSpace, ["space"]),
-						_cache[4] || (_cache[4] = withKeys(withModifiers(($event) => moveActive(-1), ["prevent"]), ["up"]))
-					]
-				}, null, 42, _hoisted_2), [[vModelText, query.value]]),
-				showSearchEnd.value ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "search-end", { loader: __props.loader }, () => [showLoader.value ? (openBlock(), createBlock(unref(ScalarLoading_default), {
-					key: 0,
-					loader: __props.loader,
-					size: "md"
-				}, null, 8, ["loader"])) : createCommentVNode("", true)])])) : createCommentVNode("", true)
-			]), withDirectives(createElementVNode("ul", {
-				id,
-				"aria-busy": isLoading.value,
-				"aria-multiselectable": __props.multiselect,
-				class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
-				role: "listbox",
-				tabindex: "-1"
-			}, [
-				showSkeleton.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList(3, (idx) => {
-					return createElementVNode("li", {
-						key: idx,
-						"aria-hidden": "true",
-						class: "flex px-2 py-1.5",
-						role: "presentation"
-					}, [createElementVNode("div", { class: normalizeClass(["h-lh rounded-md bg-b-3 animate-pulse", idx === 3 ? "w-2/3" : "w-full"]) }, null, 2)]);
-				}), 64)) : !filtered.value.length && !slots.add && __props.noResults && !isLoading.value ? (openBlock(), createElementBlock("li", _hoisted_5, toDisplayString(__props.noResults), 1)) : createCommentVNode("", true),
-				(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group, i) => {
-					return openBlock(), createBlock(ScalarComboboxOptionGroup_default, {
-						id: `${id}-group-${i}`,
-						key: i,
-						hidden: !group.options.some((o) => filtered.value.some((f) => f.id === o.id)) || !group.label
-					}, {
-						label: withCtx(() => [_ctx.$slots.group ? renderSlot(_ctx.$slots, "group", { group }, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(group.label), 1)], 64))]),
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (option) => {
-							return openBlock(), createElementBlock(Fragment, { key: option.id }, [group.options.some((o) => o.id === option.id) ? (openBlock(), createBlock(ScalarComboboxOption_default, {
-								key: 0,
-								id: getOptionId(option),
-								active: activeRef.value?.id === option.id,
-								selected: model.value.some((o) => o.id === option.id),
-								onClick: ($event) => toggleSelected(option),
-								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])),
-								onMouseenter: ($event) => activeRef.value = option
-							}, {
-								default: withCtx(({ active, selected }) => [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
-									active,
-									option,
-									selected
-								}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(ScalarListboxCheckbox_default), {
-									multiselect: __props.multiselect,
-									selected: model.value.some((o) => o.id === option.id)
-								}, null, 8, ["multiselect", "selected"]), createElementVNode("span", _hoisted_6, toDisplayString(option.label), 1)], 64))]),
-								_: 2
-							}, 1032, [
-								"id",
-								"active",
-								"selected",
-								"onClick",
-								"onMouseenter"
-							])) : createCommentVNode("", true)], 64);
-						}), 128))]),
-						_: 2
-					}, 1032, ["id", "hidden"]);
-				}), 128)),
-				slots.add ? (openBlock(), createBlock(ScalarComboboxOption_default, {
-					key: 2,
-					id: getOptionId(addOption),
-					active: activeRef.value?.id === addOption.id,
-					onClick: addNew,
-					onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
-					onMouseenter: _cache[7] || (_cache[7] = ($event) => activeRef.value = addOption)
-				}, {
-					default: withCtx(({ active }) => [createVNode(unref(ScalarIconPlus), { class: "size-4 p-px" }), renderSlot(_ctx.$slots, "add", { active })]),
-					_: 3
-				}, 8, ["id", "active"])) : createCommentVNode("", true)
-			], 8, _hoisted_4), [[vShow, showList.value]])], 64);
-		};
-	}
-});
-//#endregion
-export { ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarComboboxOptions.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Options component\n *\n * Renders the searchable option list for a combobox, including\n * filtering, keyboard navigation, and an optional \"add new\" action.\n *\n * @example\n * <ScalarComboboxOptions v-model=\"selected\" :options=\"options\" />\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport { filterByOptionLabel } from '@/components/ScalarCombobox/filter-by-option-label'\nimport { ScalarIconMagnifyingGlass, ScalarIconPlus } from '@scalar/icons'\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport { ScalarListboxCheckbox } from '../ScalarListbox'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\nimport ComboboxOption from './ScalarComboboxOption.vue'\nimport ComboboxOptionGroup from './ScalarComboboxOptionGroup.vue'\nimport {\n  type ComboboxEmits,\n  type ComboboxSlots,\n  type FilterFunction,\n  type Option,\n  type OptionGroup,\n  type OptionsOrGroups,\n  isGroups,\n} from './types'\n\nconst {\n  options: optionsOrGroups,\n  placeholder,\n  inputLabel,\n  noResults,\n  close,\n  filterFn = filterByOptionLabel,\n  loader,\n  multiselect,\n} = defineProps<{\n  /** The options to display in the combobox */\n  options: OptionsOrGroups<O, G>\n  /** The placeholder text to display in the combobox */\n  placeholder?: string\n  /** An accessible label for the search input */\n  inputLabel?: string\n  /** The message to display when filtering returns no options */\n  noResults?: string\n  /** Close the popover without changing the current selection */\n  close?: () => void\n  /**\n   * A function to filter the options based on a query,\n   * if not provided, the options will be filtered by option label\n   *\n   * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n   * server) using the `query` model, so results the server already matched are shown as given.\n   *\n   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\n  /**\n   * The loading state of the options, see `useLoadingState`\n   *\n   * Shows a spinner at the end of the search input while active, or an X when the state is\n   * invalidated (e.g. a failed request). While loading with no options yet, the list shows\n   * placeholder rows instead of the \"no results\" message and the spinner.\n   */\n  loader?: LoadingState\n  /** Whether the combobox is in multiselect mode, defaults to false */\n  multiselect?: boolean\n}>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ default: () => [] })\n\nconst slots = defineSlots<Omit<ComboboxSlots<O, G>, 'default'>>()\n\ndefineOptions({ inheritAttrs: false })\n\n/** A unique ID for the combobox */\nconst id = `scalar-combobox-items-${useId()}`\n\n/** A static option entry for the \"Add a new option\" option */\nconst addOption: Option = { id: `${useId()}-add`, label: 'Add a new option' }\n\n/** Generate a unique ID for an option */\nfunction getOptionId(option: Option) {\n  return `${id}-${option.id}`\n}\n\n/** A flat list of all options */\nconst options = computed<O[]>(() =>\n  isGroups(optionsOrGroups)\n    ? optionsOrGroups.flatMap((group) => group.options)\n    : optionsOrGroups,\n)\n\n/** An list of all groups */\nconst groups = computed<G[]>(\n  () =>\n    isGroups(optionsOrGroups)\n      ? optionsOrGroups // G extends OptionGroup<O>\n      : /*\n          We know G is an unextended OptionGroup<O> here because of the\n          structure of the component props so we can cast it to G\n        */\n        [{ label: '', options: optionsOrGroups } as G], // G is OptionGroup<O>\n)\n\n/** The search query, exposed so callers can search the options themselves */\nconst query = defineModel<string>('query', { default: '' })\n/** The filtered list of options */\nconst filtered = computed<O[]>(() =>\n  filterFn(query.value, options.value, groups.value),\n)\n\n/** The list of filtered options with the \"Add a new option\" option */\nconst withAdd = computed<Option[]>(() =>\n  slots.add ? [...filtered.value, addOption] : filtered.value,\n)\n\n/**\n * The selected option when it is in the list, otherwise the top option.\n *\n * With async search the selected option is often not in the loaded results (e.g. a branch\n * past the first page), and pointing at a row that does not exist would let Enter select nothing.\n */\nconst getInitialActive = (): Option | undefined => {\n  const selected = model.value[0]\n  return selected && withAdd.value.some((option) => option.id === selected.id)\n    ? selected\n    : withAdd.value[0]\n}\n\nconst activeRef = ref<Option | undefined>(getInitialActive())\n\n// Clear the query on open and close\nonMounted(() => {\n  // Clear the query\n  query.value = ''\n\n  // Set the active option to the selected option or the first option\n  activeRef.value = getInitialActive()\n\n  // Scroll to the selected option\n  const selected = model.value[0]\n  if (selected) {\n    setTimeout(() => {\n      const value = model.value[0]\n      if (!value) {\n        return\n      }\n\n      document\n        ?.getElementById(getOptionId(value))\n        ?.scrollIntoView({ block: 'nearest' })\n    }, 10)\n  }\n})\n\n/**\n * Whether the query changed since the options last updated. Async results arrive after the\n * query changes, so the top hit of the new results should become active even when the\n * previously active option is still somewhere in the list.\n */\nlet queryChanged = false\n\n// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => {\n    activeRef.value = withAdd.value[0]\n    queryChanged = true\n  },\n)\n\n/**\n * Async options arrive after the query has changed, so the active option can point at a row\n * that no longer exists or is no longer the top hit. Move it back to the top when that happens.\n */\nwatch(withAdd, (list) => {\n  if (\n    queryChanged ||\n    !list.some((option) => option.id === activeRef.value?.id)\n  ) {\n    activeRef.value = list[0]\n  }\n  queryChanged = false\n})\n\n/** Whether the options are still loading */\nconst isLoading = computed<boolean>(() => Boolean(loader?.isLoading))\n\n/** Show placeholder rows while loading with nothing to show yet */\nconst showSkeleton = computed<boolean>(\n  () => isLoading.value && !filtered.value.length,\n)\n\n/** Show the loader in the search input, unless the skeleton already says it is loading */\nconst showLoader = computed<boolean>(\n  () => Boolean(loader?.isActive) && !showSkeleton.value,\n)\n\n/** Whether there is anything to show at the end of the search input */\nconst showSearchEnd = computed<boolean>(() =>\n  Boolean(slots['search-end'] || showLoader.value),\n)\n\n/** Whether the listbox has anything to show */\nconst showList = computed<boolean>(() =>\n  Boolean(\n    filtered.value.length ||\n    slots.add ||\n    showSkeleton.value ||\n    (noResults && !isLoading.value),\n  ),\n)\n\nfunction toggleSelected(option: Option | undefined) {\n  if (!option) {\n    return\n  }\n\n  if (option.id === addOption.id) {\n    addNew()\n    return\n  }\n\n  // Remove from selection list in multiselect mode\n  if (multiselect && model.value.some((o) => o.id === option.id)) {\n    model.value = model.value.filter((o) => o.id !== option.id)\n    return\n  }\n\n  // The active option can be stale while async options load, so never select a missing one\n  const match = options.value.find((o) => o.id === option.id)\n  if (!match) {\n    return\n  }\n\n  // Add to the selection in multiselect mode, replace it in single select mode\n  model.value = multiselect ? [...model.value, match] : [match]\n}\n\nfunction moveActive(dir: 1 | -1) {\n  const list = withAdd.value\n\n  // Find active index\n  const activeIdx = list.findIndex(\n    (option) => option.id === activeRef.value?.id,\n  )\n\n  // Calculate next index and exit if it's out of bounds\n  const nextIdx = activeIdx + dir\n\n  if (nextIdx < 0 || nextIdx > list.length - 1) {\n    return\n  }\n\n  activeRef.value = list[nextIdx]! // We know it's in bounds from the check above\n\n  if (!activeRef.value) {\n    return\n  }\n\n  // Scroll to the active option\n  document?.getElementById(getOptionId(activeRef.value))?.scrollIntoView({\n    behavior: 'smooth',\n    block: 'nearest',\n  })\n}\n\nfunction addNew() {\n  emit('add')\n  query.value = ''\n}\n\n/**\n * Space toggles the active option in multiselect mode while the search box is empty.\n *\n * The options look like checkboxes, so keyboard users press Space to toggle them. Without this\n * handler Space types a leading space into the query, which filters out every option whose label\n * has no space and hides the whole list without any feedback (found by an accessibility audit).\n * Once a query has been typed, Space keeps inserting a character so multi-word labels stay\n * searchable. Key auto-repeat is ignored so holding Space after opening the popover with it does\n * not toggle the option repeatedly, and IME composition is left alone.\n */\nconst handleSpace = (event: KeyboardEvent): void => {\n  if (!multiselect || query.value !== '' || event.isComposing) {\n    return\n  }\n  // Suppress repeated spaces too, so holding the key does not start filtering.\n  event.preventDefault()\n  if (!event.repeat) {\n    toggleSelected(activeRef.value)\n  }\n}\n\n// Manual autofocus for the input\nconst input = ref<HTMLInputElement | null>(null)\n\n// This must be a setTimeout to ensure there is no scroll jump. nextTick does not work here.\nonMounted(() => setTimeout(() => input.value?.focus(), 0))\n</script>\n<template>\n  <!-- Inset to line up with the options below -->\n  <div class=\"relative flex items-center m-1 mb-0.75\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-1.75 top-1/2 -translate-y-1/2 text-c-3 size-4\" />\n    <input\n      ref=\"input\"\n      v-model=\"query\"\n      :aria-activedescendant=\"activeRef ? getOptionId(activeRef) : undefined\"\n      aria-autocomplete=\"list\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"showList\"\n      :aria-label=\"inputLabel\"\n      class=\"min-w-0 flex-1 rounded-md border-0 py-1.5 pl-7.25 leading-none text-c-1\"\n      :class=\"showSearchEnd ? 'pr-7.25' : 'pr-1.75'\"\n      data-1p-ignore\n      :placeholder\n      role=\"combobox\"\n      tabindex=\"0\"\n      type=\"text\"\n      @keydown.down.prevent=\"moveActive(1)\"\n      @keydown.enter.prevent=\"activeRef && toggleSelected(activeRef)\"\n      @keydown.esc.prevent=\"close?.()\"\n      @keydown.space=\"handleSpace\"\n      @keydown.up.prevent=\"moveActive(-1)\" />\n    <div\n      v-if=\"showSearchEnd\"\n      class=\"absolute right-1.75 top-1/2 flex -translate-y-1/2 items-center\">\n      <slot\n        :loader\n        name=\"search-end\">\n        <ScalarLoading\n          v-if=\"showLoader\"\n          :loader\n          size=\"md\" />\n      </slot>\n    </div>\n  </div>\n  <ul\n    v-show=\"showList\"\n    :id=\"id\"\n    :aria-busy=\"isLoading\"\n    :aria-multiselectable=\"multiselect\"\n    class=\"border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <template v-if=\"showSkeleton\">\n      <li\n        v-for=\"idx in 3\"\n        :key=\"idx\"\n        aria-hidden=\"true\"\n        class=\"flex px-2 py-1.5\"\n        role=\"presentation\">\n        <div\n          class=\"h-lh rounded-md bg-b-3 animate-pulse\"\n          :class=\"idx === 3 ? 'w-2/3' : 'w-full'\" />\n      </li>\n    </template>\n    <li\n      v-else-if=\"!filtered.length && !slots.add && noResults && !isLoading\"\n      class=\"text-c-3 px-2.5 py-2\"\n      role=\"status\">\n      {{ noResults }}\n    </li>\n    <ComboboxOptionGroup\n      v-for=\"(group, i) in groups\"\n      :id=\"`${id}-group-${i}`\"\n      :key=\"i\"\n      :hidden=\"\n        // Only show the group label if there are some results\n        !group.options.some((o) => filtered.some((f) => f.id === o.id)) ||\n        // And it has a label\n        !group.label\n      \">\n      <template #label>\n        <slot\n          v-if=\"$slots.group\"\n          :group\n          name=\"group\" />\n        <template v-else>\n          {{ group.label }}\n        </template>\n      </template>\n      <template\n        v-for=\"option in filtered\"\n        :key=\"option.id\">\n        <ComboboxOption\n          v-if=\"group.options.some((o) => o.id === option.id)\"\n          :id=\"getOptionId(option)\"\n          v-slot=\"{ active, selected }\"\n          :active=\"activeRef?.id === option.id\"\n          :selected=\"model.some((o) => o.id === option.id)\"\n          @click=\"toggleSelected(option)\"\n          @mousedown.prevent\n          @mouseenter=\"activeRef = option\">\n          <slot\n            v-if=\"$slots.option\"\n            :active\n            name=\"option\"\n            :option\n            :selected />\n          <template v-else>\n            <ScalarListboxCheckbox\n              :multiselect\n              :selected=\"model.some((o) => o.id === option.id)\" />\n            <span class=\"inline-block min-w-0 flex-1 truncate text-c-1\">\n              {{ option.label }}\n            </span>\n          </template>\n        </ComboboxOption>\n      </template>\n    </ComboboxOptionGroup>\n    <ComboboxOption\n      v-if=\"slots.add\"\n      :id=\"getOptionId(addOption)\"\n      v-slot=\"{ active }\"\n      :active=\"activeRef?.id === addOption.id\"\n      @click=\"addNew\"\n      @mousedown.prevent\n      @mouseenter=\"activeRef = addOption\">\n      <ScalarIconPlus class=\"size-4 p-px\" />\n      <slot\n        :active\n        name=\"add\" />\n    </ComboboxOption>\n  </ul>\n</template>\n"],"mappings":"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"}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js

@@ -1,63 +0,0 @@
-import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
-var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarComboboxPopover",
-	props: {
-		placement: {},
-		offset: { type: [
-			Number,
-			Object,
-			Function
-		] },
-		resize: { type: Boolean },
-		target: {},
-		middleware: {},
-		teleport: { type: [Boolean, String] }
-	},
-	setup(__props, { expose: __expose }) {
-		const { cx } = useBindCx();
-		/** Expose the popover button so we can close the popup */
-		const popoverButtonRef = ref(null);
-		/** Open the popover of the up or down arrows are pressed */
-		const handleKeydown = (e) => {
-			if (!["ArrowUp", "ArrowDown"].includes(e.key)) return;
-			e.preventDefault();
-			e.target?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-		};
-		__expose({ popoverButtonRef });
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Popover), { as: "template" }, {
-				default: withCtx(({ open }) => [createVNode(unref(ScalarFloating_default), normalizeProps(guardReactiveProps(_ctx.$props)), createSlots({
-					default: withCtx(() => [createVNode(unref(PopoverButton), {
-						ref_key: "popoverButtonRef",
-						ref: popoverButtonRef,
-						as: "template",
-						onKeydown: handleKeydown
-					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open })]),
-						_: 2
-					}, 1536)]),
-					_: 2
-				}, [open ? {
-					name: "floating",
-					fn: withCtx(({ width }) => [createVNode(unref(PopoverPanel), mergeProps({ style: { width } }, unref(cx)("relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border")), {
-						default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
-							close,
-							open
-						})]),
-						_: 2
-					}, 1040, ["style"])]),
-					key: "0"
-				} : void 0]), 1040)]),
-				_: 3
-			});
-		};
-	}
-});
-//#endregion
-export { ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarComboboxPopover.vue.script.js.map

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n *   <button>Toggle</button>\n *   <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,mBAAmB,IAAiC,IAAI;;EAG9D,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,CAAC,CAAC,WAAW,WAAW,CAAC,CAAC,SAAS,EAAE,GAAG,GAC1C;GAEF,EAAE,eAAe;GACjB,EAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;EACxE;EAEA,SAAa,EAAE,iBAAiB,CAAC;;uBAG/B,YA4BU,MAAA,OAAA,GAAA,EA1BR,IAAG,WAAU,GAAA;sBAyBI,EA1BP,WAAI,CAEd,YAwBiB,MAAA,sBAAA,GAAA,eAAA,mBAxBOA,KAAAA,MAAM,CAAA,GAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,aAAA,GAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAac,EAbF,YAAK,CAClB,YAYe,MAAA,YAAA,GAZf,WAYe,EAVZ,OAAK,EAAI,MAAK,EAAA,GACM,MAAA,EAAA,CAAE,CAAA,mHAAA,CAAA,GAAA;wBAQb,EAVA,YAAK,CAOf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA"}