@scalar/components 0.27.10 → 0.27.11

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts

@@ -463,7 +463,7 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
     slots: ComboboxSlots<O, G>;
     emit: ((evt: "add") => void) & ((event: "update:modelValue", value: O[]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAM,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC3F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAmLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAjLpD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;WAIG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;qBAyBtB,CAAC,EAAE;;;;KA+I2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;UAEJ,2EAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAM,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC3F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAoLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAlLpD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;WAIG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;qBAyBtB,CAAC,EAAE;;;;KAgJ2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;UAEJ,2EAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.js","names":[],"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 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     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ 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\"\n        v-model=\"model\"\n        :filterFn\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\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":""}
+{"version":3,"file":"ScalarComboboxMultiselect.vue.js","names":[],"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 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     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ 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\"\n        v-model=\"model\"\n        :filterFn\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\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":""}

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

@@ -1,9 +1,9 @@
 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({
+var ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarComboboxMultiselect",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		placeholder: {},
 		filterFn: { type: Function },
@@ -18,10 +18,10 @@ var ScalarComboboxMultiselect_vue_vue_type_script_setup_true_lang_default = /* @
 		middleware: {},
 		teleport: { type: [Boolean, String] }
 	}, {
-		"modelValue": { default: [] },
+		"modelValue": { default: () => [] },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["add"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");

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

@@ -1 +1 @@
-{"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 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     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ 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\"\n        v-model=\"model\"\n        :filterFn\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\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":";;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAgB,SAAA,aAAgB;;EAK9C,MAAM,qBAAqB,IAAmC,KAAI;AAElE,WAAa,EAAE,oBAAoB,CAAA;;uBAGjC,YA6CkB,+BAAA;aA5CZ;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,MAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SAgCE,EAhCE,WAAI,CAEhB,QAAA,SAAS,UAAA,WAAA,EADjB,YA+BkB,+BAAA;;iBA7BP,MAAA;wEAAK,QAAA;KACb,UAAA,QAAA;KACD,aAAA;KACC;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,OAAG,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;KAGFA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,MAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,MAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,MAAK,CAAA,CAAA,CAAA,CAAA"}
+{"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 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     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O[]>({ 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\"\n        v-model=\"model\"\n        :filterFn\n        multiselect\n        :open\n        :options\n        :placeholder\n        @add=\"emit('add')\">\n        <!-- Pass through the combobox slots -->\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":";;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAgB,SAAA,YAAsB;;EAKpD,MAAM,qBAAqB,IAAmC,IAAI;EAElE,SAAa,EAAE,mBAAmB,CAAC;;uBAGjC,YA6CkB,+BAAA;aA5CZ;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,SAgCE,EAhCE,WAAI,CAEhB,QAAA,SAAS,UAAA,UAAA,GADjB,YA+BkB,+BAAA;;iBA7BP,MAAA;wEAAK,QAAA;KACb,UAAA,QAAA;KACD,aAAA;KACC;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,OAAG,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,KAAA;;KAGFA,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

@@ -2,7 +2,7 @@ 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({
+var ScalarComboboxOption_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarComboboxOption",
 	props: {
 		active: { type: Boolean },

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

@@ -1 +1 @@
-{"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 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;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,YAAY;IAC9B,QAAQ,EAAE,MAAM,UAAU;IAC3B;GACF,CAAA;;uBAGC,mBAQK,MAAA;IAPF,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA;IACtC,MAAK;IACL,UAAS;OACT,WAEc,KAAA,QAAA,WAAA;IADX,QAAA,QAAA;IACA,UAAA,QAAA"}
+{"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 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

@@ -6,7 +6,7 @@ var _hoisted_1 = [
 	"role"
 ];
 var _hoisted_2 = ["id"];
-var ScalarComboboxOptionGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarComboboxOptionGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarComboboxOptionGroup",
 	props: {
 		id: { default: () => useId() },

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

@@ -1 +1 @@
-{"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,WAAA,EADT,mBAKM,OAAA;;IAHH,IAAE,GAAK,QAAA,GAAE;IACV,OAAM;OACN,WAAqB,KAAA,QAAA,QAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAEvB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}
+{"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.d.ts

@@ -38,7 +38,7 @@ declare const __VLS_export: <O extends Option = Option, G extends OptionGroup<O>
     slots: Omit<ComboboxSlots<O, G>, "default">;
     emit: ((evt: "add") => void) & ((event: "update:modelValue", value: O[]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAgTA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EAErB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA+dO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA7dtD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;;WAKG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,qEAAqE;sBACvD,OAAO;;qBAqKV,CAAC,EAAE;;;;KA4S2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;UAEJ,2EAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAgTA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EAErB,MAAM,SAAS,CAAA;AAGhB;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAueO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAretD,6CAA6C;iBACpC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9B,sDAAsD;sBACxC,MAAM;QACpB;;;;;WAKG;mBACQ,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,qEAAqE;sBACvD,OAAO;;qBAqKV,CAAC,EAAE;;;;KAoT2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;UAEJ,2EAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.js","names":[],"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 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  filterFn = filterByOptionLabel,\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  /**\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   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\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\nconst query = ref<string>('')\nconst activeRef = ref<Option | undefined>(model.value?.[0] ?? options.value[0])\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 = model.value?.[0] ?? options.value[0]\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// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => (activeRef.value = withAdd.value[0]),\n)\n\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\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  if (multiselect) {\n    // Remove from selection list\n    if (model.value.some((o) => o.id === option.id)) {\n      model.value = model.value.filter((o) => o.id !== option.id)\n    }\n    // Add to selection list\n    else {\n      model.value = [\n        ...model.value,\n        options.value.find((o) => o.id === option.id)!,\n      ]\n    }\n  } else {\n    // Set selection for single select mode\n    model.value = [options.value.find((o) => o.id === option.id)!]\n  }\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// 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  <div class=\"relative flex\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-2.5 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      class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1\"\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.up.prevent=\"moveActive(-1)\" />\n  </div>\n  <ul\n    v-show=\"filtered.length || slots.add\"\n    :id=\"id\"\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    <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":""}
+{"version":3,"file":"ScalarComboboxOptions.vue.js","names":[],"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 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  filterFn = filterByOptionLabel,\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  /**\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   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\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\nconst query = ref<string>('')\nconst activeRef = ref<Option | undefined>(model.value?.[0] ?? options.value[0])\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 = model.value?.[0] ?? options.value[0]\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// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => (activeRef.value = withAdd.value[0]),\n)\n\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\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  if (multiselect) {\n    // Remove from selection list\n    if (model.value.some((o) => o.id === option.id)) {\n      model.value = model.value.filter((o) => o.id !== option.id)\n    }\n    // Add to selection list\n    else {\n      model.value = [\n        ...model.value,\n        options.value.find((o) => o.id === option.id)!,\n      ]\n    }\n  } else {\n    // Set selection for single select mode\n    model.value = [options.value.find((o) => o.id === option.id)!]\n  }\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// 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  <div class=\"relative flex\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-2.5 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      class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1\"\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.up.prevent=\"moveActive(-1)\" />\n  </div>\n  <ul\n    v-show=\"filtered.length || slots.add\"\n    :id=\"id\"\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    <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":""}

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

@@ -10,10 +10,10 @@ var _hoisted_1 = { class: "relative flex" };
 var _hoisted_2 = ["aria-activedescendant", "placeholder"];
 var _hoisted_3 = ["aria-multiselectable"];
 var _hoisted_4 = { class: "inline-block min-w-0 flex-1 truncate text-c-1" };
-var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarComboboxOptions",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		placeholder: {},
 		filterFn: {
@@ -22,10 +22,10 @@ var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		},
 		multiselect: { type: Boolean }
 	}, {
-		"modelValue": { default: [] },
+		"modelValue": { default: () => [] },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["add"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
@@ -122,10 +122,7 @@ var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /* @__PU
 					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", {
-						key: 0,
-						group
-					}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(group.label), 1)], 64))]),
+					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,
@@ -137,11 +134,10 @@ var ScalarComboboxOptions_vue_vue_type_script_setup_true_lang_default = /* @__PU
 							onMouseenter: ($event) => activeRef.value = option
 						}, {
 							default: withCtx(({ active, selected }) => [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
-								key: 0,
 								active,
 								option,
 								selected
-							}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(ScalarListboxCheckbox_default), {
+							}, 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_4, toDisplayString(option.label), 1)], 64))]),

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

@@ -1 +1 @@
-{"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 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  filterFn = filterByOptionLabel,\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  /**\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   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\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\nconst query = ref<string>('')\nconst activeRef = ref<Option | undefined>(model.value?.[0] ?? options.value[0])\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 = model.value?.[0] ?? options.value[0]\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// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => (activeRef.value = withAdd.value[0]),\n)\n\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\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  if (multiselect) {\n    // Remove from selection list\n    if (model.value.some((o) => o.id === option.id)) {\n      model.value = model.value.filter((o) => o.id !== option.id)\n    }\n    // Add to selection list\n    else {\n      model.value = [\n        ...model.value,\n        options.value.find((o) => o.id === option.id)!,\n      ]\n    }\n  } else {\n    // Set selection for single select mode\n    model.value = [options.value.find((o) => o.id === option.id)!]\n  }\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// 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  <div class=\"relative flex\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-2.5 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      class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1\"\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.up.prevent=\"moveActive(-1)\" />\n  </div>\n  <ul\n    v-show=\"filtered.length || slots.add\"\n    :id=\"id\"\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    <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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"}
+{"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 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  filterFn = filterByOptionLabel,\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  /**\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   * @see {@link FilterFunction} for more information\n   */\n  filterFn?: FilterFunction<O, G>\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\nconst query = ref<string>('')\nconst activeRef = ref<Option | undefined>(model.value?.[0] ?? options.value[0])\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 = model.value?.[0] ?? options.value[0]\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// Set the top option as active when searching\nwatch(\n  () => query.value,\n  () => (activeRef.value = withAdd.value[0]),\n)\n\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\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  if (multiselect) {\n    // Remove from selection list\n    if (model.value.some((o) => o.id === option.id)) {\n      model.value = model.value.filter((o) => o.id !== option.id)\n    }\n    // Add to selection list\n    else {\n      model.value = [\n        ...model.value,\n        options.value.find((o) => o.id === option.id)!,\n      ]\n    }\n  } else {\n    // Set selection for single select mode\n    model.value = [options.value.find((o) => o.id === option.id)!]\n  }\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// 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  <div class=\"relative flex\">\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none absolute left-2.5 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      class=\"min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1\"\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.up.prevent=\"moveActive(-1)\" />\n  </div>\n  <ul\n    v-show=\"filtered.length || slots.add\"\n    :id=\"id\"\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    <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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAsFA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAqKd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAsFA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAsKd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -3,7 +3,7 @@ import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBack
 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({
+var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarComboboxPopover",
 	props: {

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

@@ -1 +1 @@
-{"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 {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} 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('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n          <ScalarFloatingBackdrop />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,mBAAmB,IAAiC,KAAI;;EAG9D,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,CAAC,CAAC,WAAW,YAAY,CAAC,SAAS,EAAE,IAAI,CAC3C;AAEF,KAAE,gBAAe;AACjB,KAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,SAAS,CAAC,CAAA;;AAGxE,WAAa,EAAE,kBAAkB,CAAA;;uBAG/B,YA2BU,MAAA,QAAA,EAAA,EAzBR,IAAG,YAAU,EAAA;sBAwBI,EAzBP,WAAI,CAEd,YAuBiB,MAAA,uBAAA,EAAA,eAAA,mBAvBOA,KAAAA,OAAM,CAAA,EAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,cAAA,EAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,MAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAYc,EAZF,YAAK,CAClB,YAWe,MAAA,aAAA,EAXf,WAWe,EATZ,OAAK,EAAI,OAAK,EAAA,EACM,MAAA,GAAE,CAAA,8DAAA,CAAA,EAAA;wBAMb,EARA,YAAK,CAKf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA;UACH,YAA0B,MAAA,+BAAA,CAAA,CAAA,CAAA"}
+{"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 {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} 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('relative flex flex-col max-h-[inherit] w-40 rounded text-sm')\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n          <ScalarFloatingBackdrop />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiCA,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,YA2BU,MAAA,OAAA,GAAA,EAzBR,IAAG,WAAU,GAAA;sBAwBI,EAzBP,WAAI,CAEd,YAuBiB,MAAA,sBAAA,GAAA,eAAA,mBAvBOA,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;kBAYc,EAZF,YAAK,CAClB,YAWe,MAAA,YAAA,GAXf,WAWe,EATZ,OAAK,EAAI,MAAK,EAAA,GACM,MAAA,EAAA,CAAE,CAAA,6DAAA,CAAA,GAAA;wBAMb,EARA,YAAK,CAKf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA;UACH,YAA0B,MAAA,8BAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCombobox/filter-by-option-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-by-option-label.js","names":[],"sources":["../../../src/components/ScalarCombobox/filter-by-option-label.ts"],"sourcesContent":["import type { FilterFunction } from '@/components/ScalarCombobox/types'\nimport type { Option } from '@/components/ScalarListbox/types'\n\nexport const filterByOptionLabel = (<O extends Option>(query: string, options: O[]): O[] => {\n  return query === ''\n    ? options\n    : options.filter((option) => {\n        return option.label.toLowerCase().includes(query.toLowerCase())\n      })\n}) satisfies FilterFunction\n"],"mappings":";AAGA,IAAa,wBAA0C,OAAe,YAAsB;AAC1F,QAAO,UAAU,KACb,UACA,QAAQ,QAAQ,WAAW;AACzB,SAAO,OAAO,MAAM,aAAa,CAAC,SAAS,MAAM,aAAa,CAAC;GAC/D"}
+{"version":3,"file":"filter-by-option-label.js","names":[],"sources":["../../../src/components/ScalarCombobox/filter-by-option-label.ts"],"sourcesContent":["import type { FilterFunction } from '@/components/ScalarCombobox/types'\nimport type { Option } from '@/components/ScalarListbox/types'\n\nexport const filterByOptionLabel = (<O extends Option>(query: string, options: O[]): O[] => {\n  return query === ''\n    ? options\n    : options.filter((option) => {\n        return option.label.toLowerCase().includes(query.toLowerCase())\n      })\n}) satisfies FilterFunction\n"],"mappings":";AAGA,IAAa,wBAA0C,OAAe,YAAsB;CAC1F,OAAO,UAAU,KACb,UACA,QAAQ,QAAQ,WAAW;EACzB,OAAO,OAAO,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,YAAY,CAAC;CAChE,CAAC;AACP"}

package/dist/components/ScalarCombobox/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/ScalarCombobox/types.ts"],"sourcesContent":["export type Option = {\n  id: string\n  label: string\n}\n\nexport type OptionGroup<O extends Option = Option> = {\n  label: string\n  options: O[]\n}\n\nexport type OptionsOrGroups<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = O[] | G[]\n\n/**\n * Filters which options appear while searching. The combobox passes the\n * current query, a flat list of every option (including those inside groups),\n * and the group objects when the list is grouped (otherwise an empty array).\n *\n * @example Match option labels, case-insensitive (similar to the default combobox filter):\n * ```ts\n * const filterByLabel = ((query, options) =>\n *   query === ''\n *     ? options\n *     : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n * ) satisfies FilterFunction\n * ```\n */\nexport type FilterFunction<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = (\n  query: string,\n  /* All of the (flattened) options, if there are groups this will be all of the options from all of the groups */\n  options: O[],\n  /* If there are no groups this array will be empty, if there are groups this will be all of the groups including their options */\n  groups: G[],\n) => O[]\n\n/** Type guard to check if an option is a group */\nfunction isGroup(option: Option | OptionGroup | undefined): option is OptionGroup {\n  return (option as OptionGroup | undefined)?.options !== undefined\n}\n\n/** Type guard to check if an array of options is an array of groups */\nexport function isGroups(options: Option[] | OptionGroup[]): options is OptionGroup[] {\n  if (!options[0]) {\n    return false // No options to test, so we assume it's not a group\n  }\n  return isGroup(options[0])\n}\n\n/** Available events emitted by the combobox */\nexport type ComboboxEmits = {\n  /** Emitted when the \"Add a new option\" button is clicked */\n  add: []\n}\n\n/** Available slots for the combobox */\nexport type ComboboxSlots<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = {\n  /** The reference element / trigger for the combobox */\n  default(props: { open: boolean }): unknown\n  /** A template to override the option label */\n  option?(props: { option: O; active: boolean; selected: boolean }): unknown\n  /** A template to override the group label */\n  group?(props: { group: G }): unknown\n  /** Creates an \"Add a new option\" button after the options list*/\n  add?(props: { active: boolean }): unknown\n}\n"],"mappings":";;AAmCA,SAAS,QAAQ,QAAiE;AAChF,QAAQ,QAAoC,YAAY,KAAA;;;AAI1D,SAAgB,SAAS,SAA6D;AACpF,KAAI,CAAC,QAAQ,GACX,QAAO;AAET,QAAO,QAAQ,QAAQ,GAAG"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/ScalarCombobox/types.ts"],"sourcesContent":["export type Option = {\n  id: string\n  label: string\n}\n\nexport type OptionGroup<O extends Option = Option> = {\n  label: string\n  options: O[]\n}\n\nexport type OptionsOrGroups<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = O[] | G[]\n\n/**\n * Filters which options appear while searching. The combobox passes the\n * current query, a flat list of every option (including those inside groups),\n * and the group objects when the list is grouped (otherwise an empty array).\n *\n * @example Match option labels, case-insensitive (similar to the default combobox filter):\n * ```ts\n * const filterByLabel = ((query, options) =>\n *   query === ''\n *     ? options\n *     : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n * ) satisfies FilterFunction\n * ```\n */\nexport type FilterFunction<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = (\n  query: string,\n  /* All of the (flattened) options, if there are groups this will be all of the options from all of the groups */\n  options: O[],\n  /* If there are no groups this array will be empty, if there are groups this will be all of the groups including their options */\n  groups: G[],\n) => O[]\n\n/** Type guard to check if an option is a group */\nfunction isGroup(option: Option | OptionGroup | undefined): option is OptionGroup {\n  return (option as OptionGroup | undefined)?.options !== undefined\n}\n\n/** Type guard to check if an array of options is an array of groups */\nexport function isGroups(options: Option[] | OptionGroup[]): options is OptionGroup[] {\n  if (!options[0]) {\n    return false // No options to test, so we assume it's not a group\n  }\n  return isGroup(options[0])\n}\n\n/** Available events emitted by the combobox */\nexport type ComboboxEmits = {\n  /** Emitted when the \"Add a new option\" button is clicked */\n  add: []\n}\n\n/** Available slots for the combobox */\nexport type ComboboxSlots<O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>> = {\n  /** The reference element / trigger for the combobox */\n  default(props: { open: boolean }): unknown\n  /** A template to override the option label */\n  option?(props: { option: O; active: boolean; selected: boolean }): unknown\n  /** A template to override the group label */\n  group?(props: { group: G }): unknown\n  /** Creates an \"Add a new option\" button after the options list*/\n  add?(props: { active: boolean }): unknown\n}\n"],"mappings":";;AAmCA,SAAS,QAAQ,QAAiE;CAChF,OAAQ,QAAoC,YAAY,KAAA;AAC1D;;AAGA,SAAgB,SAAS,SAA6D;CACpF,IAAI,CAAC,QAAQ,IACX,OAAO;CAET,OAAO,QAAQ,QAAQ,EAAE;AAC3B"}

package/dist/components/ScalarCopy/ScalarCopy.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG/D;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aA+BP,OAAO;;;;aAAP,OAAO;;;oGA0Fd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG/D;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aA+BP,OAAO;;;;aAAP,OAAO;;;oGA2Fd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCopy/ScalarCopy.vue.script.js

@@ -1,9 +1,9 @@
 import ScalarCopyButton_default from "./ScalarCopyButton.vue.js";
 import { createBlock, createSlots, defineComponent, mergeModels, onMounted, openBlock, renderSlot, unref, useModel, watch, withCtx } from "vue";
 import { useClipboard } from "@vueuse/core";
-var ScalarCopy_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarCopy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarCopy",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		content: { default: "" },
 		placement: {},
 		showLabel: { type: Boolean },

package/dist/components/ScalarCopy/ScalarCopy.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCopy.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy component\n *\n * Provides a copy button and copies content to the clipboard.\n *\n * @example\n *   <ScalarCopy>\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport ScalarCopyButton from './ScalarCopyButton.vue'\nimport type { ScalarCopyProps, ScalarCopySlots } from './types'\n\nconst {\n  content = '',\n  duration = 1500,\n  immediate,\n} = defineProps<ScalarCopyProps>()\n\ndefineSlots<ScalarCopySlots>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nonMounted(() => {\n  if (immediate) copy(content)\n})\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarCopyButton\n    :copied=\"copied || clipboardCopied\"\n    :placement\n    :showLabel\n    @click=\"copy(content)\">\n    <template\n      v-if=\"$slots.copy\"\n      #copy>\n      <slot name=\"copy\" />\n    </template>\n    <template\n      v-if=\"$slots.copied\"\n      #copied>\n      <slot name=\"copied\" />\n    </template>\n    <template\n      v-if=\"$slots.backdrop\"\n      #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopyButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,SAAoB,SAAC,SAA4B;AAEhE,kBAAgB;AACd,OAAI,QAAA,UAAW,MAAK,QAAA,QAAO;IAC5B;EAED,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;GACf,CAAA;;AAGD,QAAM,kBAAkB,MAAO,OAAO,QAAQ,EAAE;;uBAG9C,YAoBmB,0BAAA;IAnBhB,QAAQ,OAAA,SAAU,MAAA,gBAAe;IACjC,WAAA,QAAA;IACA,WAAA,QAAA;IACA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,KAAI,CAAC,QAAA,QAAO;;IAEZA,KAAAA,OAAO,OAAA;WACZ;uBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;IAGdA,KAAAA,OAAO,SAAA;WACZ;uBACqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA;;;IAGhBA,KAAAA,OAAO,WAAA;WACZ;uBACuB,CAAxB,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarCopy.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy component\n *\n * Provides a copy button and copies content to the clipboard.\n *\n * @example\n *   <ScalarCopy>\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport ScalarCopyButton from './ScalarCopyButton.vue'\nimport type { ScalarCopyProps, ScalarCopySlots } from './types'\n\nconst {\n  content = '',\n  duration = 1500,\n  immediate,\n} = defineProps<ScalarCopyProps>()\n\ndefineSlots<ScalarCopySlots>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nonMounted(() => {\n  if (immediate) copy(content)\n})\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarCopyButton\n    :copied=\"copied || clipboardCopied\"\n    :placement\n    :showLabel\n    @click=\"copy(content)\">\n    <template\n      v-if=\"$slots.copy\"\n      #copy>\n      <slot name=\"copy\" />\n    </template>\n    <template\n      v-if=\"$slots.copied\"\n      #copied>\n      <slot name=\"copied\" />\n    </template>\n    <template\n      v-if=\"$slots.backdrop\"\n      #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopyButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,SAAoB,SAAC,QAA4B;EAEhE,gBAAgB;GACd,IAAI,QAAA,WAAW,KAAK,QAAA,OAAO;EAC7B,CAAC;EAED,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;EAChB,CAAC;;EAGD,MAAM,kBAAkB,MAAO,OAAO,QAAQ,CAAE;;uBAG9C,YAoBmB,0BAAA;IAnBhB,QAAQ,OAAA,SAAU,MAAA,eAAA;IAClB,WAAA,QAAA;IACA,WAAA,QAAA;IACA,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAA,CAAI,CAAC,QAAA,OAAO;;IAEZA,KAAAA,OAAO,OAAA;WACZ;uBACmB,CAApB,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA;;;IAGdA,KAAAA,OAAO,SAAA;WACZ;uBACqB,CAAtB,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA;;;IAGhBA,KAAAA,OAAO,WAAA;WACZ;uBACuB,CAAxB,WAAwB,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/ScalarCopy/ScalarCopyBackdrop.vue.script.js

@@ -1,6 +1,6 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, unref } from "vue";
-var ScalarCopyBackdrop_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarCopyBackdrop_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarCopyBackdrop",
 	setup(__props) {

package/dist/components/ScalarCopy/ScalarCopyBackdrop.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCopyBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Backdrop component\n *\n * A backdrop for the copy button label, this component can be\n * used to override the default backdrop with a custom one.\n *\n * @example\n * <ScalarCopy>\n *   <template #backdrop>\n *     <ScalarCopyBackdrop class=\"bg-b-2\" />\n *   </template>\n * </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('absolute inset-y-0.5 -z-2 left-0 right-0 bg-b-1 rounded')\" />\n</template>\n"],"mappings":";;;;;;EAoBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAA8E,OAAA,eAAA,mBAAjE,MAAA,GAAE,CAAA,0DAAA,CAAA,CAAA,EAAA,MAAA,GAAA"}
+{"version":3,"file":"ScalarCopyBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Backdrop component\n *\n * A backdrop for the copy button label, this component can be\n * used to override the default backdrop with a custom one.\n *\n * @example\n * <ScalarCopy>\n *   <template #backdrop>\n *     <ScalarCopyBackdrop class=\"bg-b-2\" />\n *   </template>\n * </ScalarCopy>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('absolute inset-y-0.5 -z-2 left-0 right-0 bg-b-1 rounded')\" />\n</template>\n"],"mappings":";;;;;;EAoBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAA8E,OAAA,eAAA,mBAAjE,MAAA,EAAA,CAAE,CAAA,yDAAA,CAAA,CAAA,GAAA,MAAA,EAAA"}

package/dist/components/ScalarCopy/ScalarCopyButton.vue.script.js

@@ -20,10 +20,10 @@ var _hoisted_4 = {
 	key: 1,
 	class: "sr-only"
 };
-var ScalarCopyButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarCopyButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarCopyButton",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		showLabel: { type: Boolean },
 		placement: { default: "right" }
 	}, {

package/dist/components/ScalarCopy/ScalarCopyButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCopyButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Button component\n *\n * A dumb button with copy animations.\n *\n * If you're looking for a button that copies content to the clipboard,\n * use the ScalarCopy component instead.\n *\n * @example\n *   <ScalarCopyButton @click=\"handleCopy\">\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopyButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconCopy } from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport ScalarCopyBackdrop from './ScalarCopyBackdrop.vue'\nimport type { ScalarCopyPlacement, ScalarCopySlots } from './types'\n\nconst { placement = 'right' } = defineProps<{\n  /** Whether the label should be shown on hover or always */\n  showLabel?: boolean\n  /** The placement of the copy button */\n  placement?: ScalarCopyPlacement\n}>()\n\ndefineSlots<ScalarCopySlots>()\n\n/** Whether the copy button has been clicked */\nconst copied = defineModel<boolean>('copied', { default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst icon = computed<ScalarIconComponent>(() => {\n  return copied.value ? ScalarIconCheck : ScalarIconCopy\n})\n</script>\n<template>\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/copy-button relative z-0 flex items-center justify-center',\n        'size-6 p-1.25 -m-1 rounded text-xs bg-b-2',\n        copied ? 'text-c-1' : 'text-c-2 hover:text-c-1',\n      )\n    \">\n    <Transition\n      enterActiveClass=\"transition-transform\"\n      enterFromClass=\"scale-0\"\n      enterToClass=\"scale-100\"\n      leaveActiveClass=\"transition-transform\"\n      leaveFromClass=\"scale-100\"\n      leaveToClass=\"scale-0\"\n      mode=\"out-in\">\n      <component\n        :is=\"icon\"\n        class=\"size-full\" />\n    </Transition>\n    <div class=\"bg-inherit rounded-[inherit] absolute inset-0 -z-1\" />\n    <div\n      class=\"group/copy-label absolute flex items-center -inset-y-0.5 rounded\"\n      :class=\"{\n        'left-0 pl-[100%]': placement === 'right',\n        'right-0 pr-[100%]': placement === 'left',\n      }\">\n      <div\n        aria-hidden=\"true\"\n        class=\"flex items-center py-1.5 mask-y-from-[calc(100%-8px)] mask-y-to-100%\">\n        <Transition\n          enterActiveClass=\"transition-transform ease-out\"\n          enterFromClass=\"translate-y-1.5\"\n          enterToClass=\"translate-y-0\"\n          leaveActiveClass=\"transition-transform ease-in\"\n          leaveFromClass=\"translate-y-0\"\n          leaveToClass=\"-translate-y-1.5\"\n          mode=\"out-in\">\n          <div\n            v-if=\"copied\"\n            class=\"whitespace-nowrap px-1.5\">\n            <slot name=\"copied\">Copied</slot>\n          </div>\n          <div\n            v-else\n            class=\"whitespace-nowrap px-1.5\"\n            :class=\"{\n              'group-hocus/copy-button:block hidden': !showLabel && !copied,\n            }\">\n            <slot name=\"copy\">Copy</slot>\n          </div>\n        </Transition>\n      </div>\n      <div\n        v-if=\"copied\"\n        class=\"sr-only\"\n        role=\"alert\">\n        <slot name=\"copied\">Copied</slot>\n      </div>\n      <div\n        v-else\n        class=\"sr-only\">\n        <slot name=\"copy\">Copy</slot>\n      </div>\n      <slot name=\"backdrop\">\n        <ScalarCopyBackdrop />\n      </slot>\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,SAAS,SAAoB,SAAC,SAA4B;EAGhE,MAAM,EAAE,OAAO,WAAU;EAEzB,MAAM,OAAO,eAAoC;AAC/C,UAAO,OAAO,QAAQ,kBAAkB;IACzC;;uBAGC,mBAqES,UArET,WAqES,EApEP,MAAK,UAAQ,EACE,MAAA,GAAE,CAAA,mEAAA,6CAA0I,OAAA,QAAM,aAAA,0BAAA,CAAA,EAAA;IAOjK,YAWa,YAAA;KAVX,kBAAiB;KACjB,gBAAe;KACf,cAAa;KACb,kBAAiB;KACjB,gBAAe;KACf,cAAa;KACb,MAAK;;4BAGiB,EAAA,WAAA,EAFtB,YAEsB,wBADf,KAAA,MAAI,EAAA,EACT,OAAM,aAAW,CAAA,EAAA,CAAA;;;8BAErB,mBAAkE,OAAA,EAA7D,OAAM,sDAAoD,EAAA,MAAA,GAAA;IAC/D,mBA8CM,OAAA,EA7CJ,OAAK,eAAA,CAAC,oEAAkE;yBAClC,QAAA,cAAS;0BAA2C,QAAA,cAAS;;KAInG,mBAyBM,OAzBN,YAyBM,CAtBJ,YAqBa,YAAA;MApBX,kBAAiB;MACjB,gBAAe;MACf,cAAa;MACb,kBAAiB;MACjB,gBAAe;MACf,cAAa;MACb,MAAK;;6BAKC,CAHE,OAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAIM,CADJ,WAAiC,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAb,UAAM,GAAA,EAAA,CAAA,CAAA,CAAA,KAAA,WAAA,EAE5B,mBAOM,OAAA;;OALJ,OAAK,eAAA,CAAC,4BAA0B,EAAA,wCAAA,CACiC,QAAA,aAAS,CAAK,OAAA,OAAA,CAAA,CAAA;UAG/E,WAA6B,KAAA,QAAA,QAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,GAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA;;;KAKpB,OAAA,SAAA,WAAA,EADR,mBAKM,OALN,YAKM,CADJ,WAAiC,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAb,UAAM,GAAA,EAAA,CAAA,CAAA,CAAA,KAAA,WAAA,EAE5B,mBAIM,OAJN,YAIM,CADJ,WAA6B,KAAA,QAAA,QAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,GAAA,EAAA,CAAA,CAAA,CAAA;KAExB,WAEO,KAAA,QAAA,YAAA,EAAA,QAAA,CADL,YAAsB,2BAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarCopyButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarCopy/ScalarCopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Button component\n *\n * A dumb button with copy animations.\n *\n * If you're looking for a button that copies content to the clipboard,\n * use the ScalarCopy component instead.\n *\n * @example\n *   <ScalarCopyButton @click=\"handleCopy\">\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopyButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconCopy } from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport ScalarCopyBackdrop from './ScalarCopyBackdrop.vue'\nimport type { ScalarCopyPlacement, ScalarCopySlots } from './types'\n\nconst { placement = 'right' } = defineProps<{\n  /** Whether the label should be shown on hover or always */\n  showLabel?: boolean\n  /** The placement of the copy button */\n  placement?: ScalarCopyPlacement\n}>()\n\ndefineSlots<ScalarCopySlots>()\n\n/** Whether the copy button has been clicked */\nconst copied = defineModel<boolean>('copied', { default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst icon = computed<ScalarIconComponent>(() => {\n  return copied.value ? ScalarIconCheck : ScalarIconCopy\n})\n</script>\n<template>\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/copy-button relative z-0 flex items-center justify-center',\n        'size-6 p-1.25 -m-1 rounded text-xs bg-b-2',\n        copied ? 'text-c-1' : 'text-c-2 hover:text-c-1',\n      )\n    \">\n    <Transition\n      enterActiveClass=\"transition-transform\"\n      enterFromClass=\"scale-0\"\n      enterToClass=\"scale-100\"\n      leaveActiveClass=\"transition-transform\"\n      leaveFromClass=\"scale-100\"\n      leaveToClass=\"scale-0\"\n      mode=\"out-in\">\n      <component\n        :is=\"icon\"\n        class=\"size-full\" />\n    </Transition>\n    <div class=\"bg-inherit rounded-[inherit] absolute inset-0 -z-1\" />\n    <div\n      class=\"group/copy-label absolute flex items-center -inset-y-0.5 rounded\"\n      :class=\"{\n        'left-0 pl-[100%]': placement === 'right',\n        'right-0 pr-[100%]': placement === 'left',\n      }\">\n      <div\n        aria-hidden=\"true\"\n        class=\"flex items-center py-1.5 mask-y-from-[calc(100%-8px)] mask-y-to-100%\">\n        <Transition\n          enterActiveClass=\"transition-transform ease-out\"\n          enterFromClass=\"translate-y-1.5\"\n          enterToClass=\"translate-y-0\"\n          leaveActiveClass=\"transition-transform ease-in\"\n          leaveFromClass=\"translate-y-0\"\n          leaveToClass=\"-translate-y-1.5\"\n          mode=\"out-in\">\n          <div\n            v-if=\"copied\"\n            class=\"whitespace-nowrap px-1.5\">\n            <slot name=\"copied\">Copied</slot>\n          </div>\n          <div\n            v-else\n            class=\"whitespace-nowrap px-1.5\"\n            :class=\"{\n              'group-hocus/copy-button:block hidden': !showLabel && !copied,\n            }\">\n            <slot name=\"copy\">Copy</slot>\n          </div>\n        </Transition>\n      </div>\n      <div\n        v-if=\"copied\"\n        class=\"sr-only\"\n        role=\"alert\">\n        <slot name=\"copied\">Copied</slot>\n      </div>\n      <div\n        v-else\n        class=\"sr-only\">\n        <slot name=\"copy\">Copy</slot>\n      </div>\n      <slot name=\"backdrop\">\n        <ScalarCopyBackdrop />\n      </slot>\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,SAAS,SAAoB,SAAC,QAA4B;EAGhE,MAAM,EAAE,OAAO,UAAU;EAEzB,MAAM,OAAO,eAAoC;GAC/C,OAAO,OAAO,QAAQ,kBAAkB;EAC1C,CAAC;;uBAGC,mBAqES,UArET,WAqES,EApEP,MAAK,SAAQ,GACE,MAAA,EAAA,CAAE,CAAA,mEAAA,6CAA0I,OAAA,QAAM,aAAA,yBAAA,CAAA,GAAA;IAOjK,YAWa,YAAA;KAVX,kBAAiB;KACjB,gBAAe;KACf,cAAa;KACb,kBAAiB;KACjB,gBAAe;KACf,cAAa;KACb,MAAK;;4BAGiB,EAAA,UAAA,GAFtB,YAEsB,wBADf,KAAA,KAAI,GAAA,EACT,OAAM,YAAW,CAAA,EAAA,CAAA;;;8BAErB,mBAAkE,OAAA,EAA7D,OAAM,qDAAoD,GAAA,MAAA,EAAA;IAC/D,mBA8CM,OAAA,EA7CJ,OAAK,eAAA,CAAC,oEAAkE;yBAClC,QAAA,cAAS;0BAA2C,QAAA,cAAS;;KAInG,mBAyBM,OAzBN,YAyBM,CAtBJ,YAqBa,YAAA;MApBX,kBAAiB;MACjB,gBAAe;MACf,cAAa;MACb,kBAAiB;MACjB,gBAAe;MACf,cAAa;MACb,MAAK;;6BAKC,CAHE,OAAA,SAAA,UAAA,GADR,mBAIM,OAJN,YAIM,CADJ,WAAiC,KAAA,QAAA,UAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAb,UAAM,EAAA,EAAA,CAAA,CAAA,CAAA,MAAA,UAAA,GAE5B,mBAOM,OAAA;;OALJ,OAAK,eAAA,CAAC,4BAA0B,EAAA,wCAAA,CACiC,QAAA,aAAS,CAAK,OAAA,MAAA,CAAA,CAAA;UAG/E,WAA6B,KAAA,QAAA,QAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,EAAA,EAAA,CAAA,CAAA,GAAA,CAAA,EAAA,CAAA;;;KAKpB,OAAA,SAAA,UAAA,GADR,mBAKM,OALN,YAKM,CADJ,WAAiC,KAAA,QAAA,UAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAb,UAAM,EAAA,EAAA,CAAA,CAAA,CAAA,MAAA,UAAA,GAE5B,mBAIM,OAJN,YAIM,CADJ,WAA6B,KAAA,QAAA,QAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,EAAA,EAAA,CAAA,CAAA,CAAA;KAExB,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADL,YAAsB,0BAAA,CAAA,CAAA"}

package/dist/components/ScalarDropdown/ScalarDropdown.vue.script.js

@@ -11,10 +11,10 @@ var _hoisted_1 = [
 	"aria-labelledby",
 	"onKeydown"
 ];
-var ScalarDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarDropdown",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		placement: {},
 		offset: { type: [
 			Number,

package/dist/components/ScalarDropdown/ScalarDropdown.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdown.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown component\n *\n * @example\n * <ScalarDropdown>\n *   <ScalarButton>Click Me</ScalarButton>\n *   <template #items>\n *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarDropdownMenu from './ScalarDropdownMenu.vue'\nimport { useDropdown } from './useDropdown'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default?(props: {\n    /** Whether or not the dropdown is open */\n    open: boolean\n  }): unknown\n  /** The list of dropdown items */\n  items?(props: {\n    /** Whether or not the dropdown is open */\n    open: boolean\n  }): unknown\n}>()\n\ntype ScalarFloatingType = InstanceType<typeof ScalarFloating>\nconst floatingRef = ref<ScalarFloatingType>()\n\nconst menuRef = ref<HTMLUListElement>()\n\n/** Whether or not the dropdown is open */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst { active } = useDropdown()\n\nconst fallbackTargetId = useId()\nconst targetId = ref<string>(fallbackTargetId)\nconst menuId = useId()\n\n/** Handle click events on the target */\nasync function handleTargetClick() {\n  open.value = !open.value\n  await nextTick()\n  if (open.value) menuRef.value?.focus()\n}\n\n/** Handle keydown events on the target */\nasync function handleTargetKeydown(event: KeyboardEvent) {\n  // Only handle the keys that are relevant to the dropdown\n  if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key))\n    event.preventDefault()\n  else return\n\n  // Open the dropdown if it's not open\n  if (!open.value) open.value = true\n\n  // Move the active item if the key is an arrow key or space or enter\n  await nextTick()\n\n  // Focus the menu\n  menuRef.value?.focus()\n\n  // Move the active item if the key is an arrow key or space or enter\n  if (['ArrowDown', ' ', 'Enter'].includes(event.key)) moveActive(1)\n  else if (event.key === 'ArrowUp') moveActive(-1)\n}\n\n/** Watch the target reference for changes */\nwatch(\n  () => floatingRef.value?.targetRef,\n  (newTarget, oldTarget) => {\n    if (newTarget) {\n      // Create an id for the target if it doesn't have one\n      if (newTarget.id) targetId.value = newTarget.id\n      else {\n        targetId.value = fallbackTargetId\n        newTarget.setAttribute('id', targetId.value)\n      }\n      // Set the aria attributes\n      newTarget.setAttribute('aria-haspopup', 'menu')\n      newTarget.setAttribute('aria-expanded', `${open.value}`)\n      if (open.value) newTarget.setAttribute('aria-controls', menuId)\n      // Add the event listeners\n      newTarget.addEventListener('click', handleTargetClick)\n      newTarget.addEventListener('keydown', handleTargetKeydown)\n    }\n    if (oldTarget && oldTarget !== newTarget) {\n      // Remove the id if it's using the fallback id\n      if (oldTarget.id === fallbackTargetId) oldTarget.removeAttribute('id')\n      // Remove the aria attributes\n      oldTarget.removeAttribute('aria-controls')\n      oldTarget.removeAttribute('aria-haspopup')\n      oldTarget.removeAttribute('aria-expanded')\n      // Remove the event listeners\n      oldTarget.removeEventListener('click', handleTargetClick)\n      oldTarget.removeEventListener('keydown', handleTargetKeydown)\n    }\n  },\n  { immediate: true },\n)\n\n/** Watch the open state for changes */\nwatch(\n  open,\n  (o) => {\n    const target = floatingRef.value?.targetRef\n    if (!target) return\n    // Update the aria-expanded attribute on the target\n    target.setAttribute('aria-expanded', `${o}`)\n    if (o) target.setAttribute('aria-controls', menuId)\n    else target.removeAttribute('aria-controls')\n  },\n  { immediate: true },\n)\n\nasync function handleClose() {\n  // Move focus back to the target\n  floatingRef.value?.targetRef?.focus()\n  // Close the dropdown\n  open.value = false\n}\n\nfunction handleSelected() {\n  if (!active.value || !menuRef.value) return\n\n  const button = menuRef.value.querySelector<HTMLElement>(\n    `#${active.value}[role=\"menuitem\"]:not([aria-disabled=\"true\"])`,\n  )\n\n  if (!button) return\n\n  button.click()\n\n  handleClose()\n}\n\n/** Move the active item in the dropdown */\nfunction moveActive(dir: 1 | -1) {\n  if (!open.value || !menuRef.value) return\n\n  // Get all menu items, filtering out disabled ones\n  const list = Array.from(\n    menuRef.value.querySelectorAll<HTMLElement>(\n      '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n    ),\n  )\n\n  if (list.length === 0) return\n\n  // Find the current active item's index\n  const activeIdx = list.findIndex((item) => item.id === active.value)\n\n  if (activeIdx === -1) {\n    // If there is no active item, activate the first or last item\n    const targetItem = list[dir > 0 ? 0 : list.length - 1]\n    if (targetItem?.id) active.value = targetItem.id\n    return\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  const nextItem = list[nextIdx]\n\n  if (nextItem?.id) active.value = nextItem.id\n}\n\n/** Close the dropdown if the user clicks outside of the menu and button */\nonClickOutside(menuRef, handleClose, {\n  ignore: [computed(() => floatingRef.value?.targetRef)],\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarFloating\n    ref=\"floatingRef\"\n    v-bind=\"$props\"\n    :placement=\"placement ?? 'bottom-start'\">\n    <slot :open />\n    <template\n      v-if=\"open\"\n      #floating=\"{ width }\">\n      <!-- Background container -->\n      <ScalarDropdownMenu\n        :style=\"{ width }\"\n        v-bind=\"cx('max-h-[inherit] max-w-[inherit]')\">\n        <template #menu>\n          <div\n            :id=\"menuId\"\n            ref=\"menuRef\"\n            :aria-activedescendant=\"active\"\n            :aria-labelledby=\"targetId\"\n            class=\"flex flex-col p-0.75 outline-none\"\n            role=\"menu\"\n            tabindex=\"-1\"\n            @click.stop=\"handleClose\"\n            @keydown.down.prevent.stop=\"moveActive(1)\"\n            @keydown.enter.prevent.stop=\"handleSelected\"\n            @keydown.escape.prevent.stop=\"handleClose\"\n            @keydown.space.prevent.stop=\"handleSelected\"\n            @keydown.tab.prevent.stop=\"handleClose\"\n            @keydown.up.prevent.stop=\"moveActive(-1)\">\n            <slot\n              name=\"items\"\n              :open />\n          </div>\n        </template>\n      </ScalarDropdownMenu>\n    </template>\n  </ScalarFloating>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"ScalarDropdown.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown component\n *\n * @example\n * <ScalarDropdown>\n *   <ScalarButton>Click Me</ScalarButton>\n *   <template #items>\n *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarDropdownMenu from './ScalarDropdownMenu.vue'\nimport { useDropdown } from './useDropdown'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default?(props: {\n    /** Whether or not the dropdown is open */\n    open: boolean\n  }): unknown\n  /** The list of dropdown items */\n  items?(props: {\n    /** Whether or not the dropdown is open */\n    open: boolean\n  }): unknown\n}>()\n\ntype ScalarFloatingType = InstanceType<typeof ScalarFloating>\nconst floatingRef = ref<ScalarFloatingType>()\n\nconst menuRef = ref<HTMLUListElement>()\n\n/** Whether or not the dropdown is open */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst { active } = useDropdown()\n\nconst fallbackTargetId = useId()\nconst targetId = ref<string>(fallbackTargetId)\nconst menuId = useId()\n\n/** Handle click events on the target */\nasync function handleTargetClick() {\n  open.value = !open.value\n  await nextTick()\n  if (open.value) menuRef.value?.focus()\n}\n\n/** Handle keydown events on the target */\nasync function handleTargetKeydown(event: KeyboardEvent) {\n  // Only handle the keys that are relevant to the dropdown\n  if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key))\n    event.preventDefault()\n  else return\n\n  // Open the dropdown if it's not open\n  if (!open.value) open.value = true\n\n  // Move the active item if the key is an arrow key or space or enter\n  await nextTick()\n\n  // Focus the menu\n  menuRef.value?.focus()\n\n  // Move the active item if the key is an arrow key or space or enter\n  if (['ArrowDown', ' ', 'Enter'].includes(event.key)) moveActive(1)\n  else if (event.key === 'ArrowUp') moveActive(-1)\n}\n\n/** Watch the target reference for changes */\nwatch(\n  () => floatingRef.value?.targetRef,\n  (newTarget, oldTarget) => {\n    if (newTarget) {\n      // Create an id for the target if it doesn't have one\n      if (newTarget.id) targetId.value = newTarget.id\n      else {\n        targetId.value = fallbackTargetId\n        newTarget.setAttribute('id', targetId.value)\n      }\n      // Set the aria attributes\n      newTarget.setAttribute('aria-haspopup', 'menu')\n      newTarget.setAttribute('aria-expanded', `${open.value}`)\n      if (open.value) newTarget.setAttribute('aria-controls', menuId)\n      // Add the event listeners\n      newTarget.addEventListener('click', handleTargetClick)\n      newTarget.addEventListener('keydown', handleTargetKeydown)\n    }\n    if (oldTarget && oldTarget !== newTarget) {\n      // Remove the id if it's using the fallback id\n      if (oldTarget.id === fallbackTargetId) oldTarget.removeAttribute('id')\n      // Remove the aria attributes\n      oldTarget.removeAttribute('aria-controls')\n      oldTarget.removeAttribute('aria-haspopup')\n      oldTarget.removeAttribute('aria-expanded')\n      // Remove the event listeners\n      oldTarget.removeEventListener('click', handleTargetClick)\n      oldTarget.removeEventListener('keydown', handleTargetKeydown)\n    }\n  },\n  { immediate: true },\n)\n\n/** Watch the open state for changes */\nwatch(\n  open,\n  (o) => {\n    const target = floatingRef.value?.targetRef\n    if (!target) return\n    // Update the aria-expanded attribute on the target\n    target.setAttribute('aria-expanded', `${o}`)\n    if (o) target.setAttribute('aria-controls', menuId)\n    else target.removeAttribute('aria-controls')\n  },\n  { immediate: true },\n)\n\nasync function handleClose() {\n  // Move focus back to the target\n  floatingRef.value?.targetRef?.focus()\n  // Close the dropdown\n  open.value = false\n}\n\nfunction handleSelected() {\n  if (!active.value || !menuRef.value) return\n\n  const button = menuRef.value.querySelector<HTMLElement>(\n    `#${active.value}[role=\"menuitem\"]:not([aria-disabled=\"true\"])`,\n  )\n\n  if (!button) return\n\n  button.click()\n\n  handleClose()\n}\n\n/** Move the active item in the dropdown */\nfunction moveActive(dir: 1 | -1) {\n  if (!open.value || !menuRef.value) return\n\n  // Get all menu items, filtering out disabled ones\n  const list = Array.from(\n    menuRef.value.querySelectorAll<HTMLElement>(\n      '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n    ),\n  )\n\n  if (list.length === 0) return\n\n  // Find the current active item's index\n  const activeIdx = list.findIndex((item) => item.id === active.value)\n\n  if (activeIdx === -1) {\n    // If there is no active item, activate the first or last item\n    const targetItem = list[dir > 0 ? 0 : list.length - 1]\n    if (targetItem?.id) active.value = targetItem.id\n    return\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  const nextItem = list[nextIdx]\n\n  if (nextItem?.id) active.value = nextItem.id\n}\n\n/** Close the dropdown if the user clicks outside of the menu and button */\nonClickOutside(menuRef, handleClose, {\n  ignore: [computed(() => floatingRef.value?.targetRef)],\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarFloating\n    ref=\"floatingRef\"\n    v-bind=\"$props\"\n    :placement=\"placement ?? 'bottom-start'\">\n    <slot :open />\n    <template\n      v-if=\"open\"\n      #floating=\"{ width }\">\n      <!-- Background container -->\n      <ScalarDropdownMenu\n        :style=\"{ width }\"\n        v-bind=\"cx('max-h-[inherit] max-w-[inherit]')\">\n        <template #menu>\n          <div\n            :id=\"menuId\"\n            ref=\"menuRef\"\n            :aria-activedescendant=\"active\"\n            :aria-labelledby=\"targetId\"\n            class=\"flex flex-col p-0.75 outline-none\"\n            role=\"menu\"\n            tabindex=\"-1\"\n            @click.stop=\"handleClose\"\n            @keydown.down.prevent.stop=\"moveActive(1)\"\n            @keydown.enter.prevent.stop=\"handleSelected\"\n            @keydown.escape.prevent.stop=\"handleClose\"\n            @keydown.space.prevent.stop=\"handleSelected\"\n            @keydown.tab.prevent.stop=\"handleClose\"\n            @keydown.up.prevent.stop=\"moveActive(-1)\">\n            <slot\n              name=\"items\"\n              :open />\n          </div>\n        </template>\n      </ScalarDropdownMenu>\n    </template>\n  </ScalarFloating>\n</template>\n"],"mappings":"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"}

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownButton.vue.script.js";
 /* empty css                                   */
 //#region src/components/ScalarDropdown/ScalarDropdownButton.vue
-var ScalarDropdownButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f5e0d3d8"]]);
+var ScalarDropdownButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f5e0d3d8"]]);
 //#endregion
 export { ScalarDropdownButton_default as default };