@scalar/components 0.21.0 → 0.21.2

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":"AAmSA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EAErB,MAAM,SAAS,CAAA;AAEhB,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;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,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;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<!-- 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.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"sourcesContent":["<!-- 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

@@ -1,7 +1,20 @@
 import { type ScalarFloatingOptions } from '../ScalarFloating';
 import type { ScalarPopoverSlots } from '../ScalarPopover';
-type __VLS_Slots = ScalarPopoverSlots;
-declare const __VLS_base: import("vue").DefineComponent<ScalarFloatingOptions, {
+/**
+ * Scalar Combobox Popover component
+ *
+ * Wraps combobox content in a floating popover panel.
+ * Handles open/close behavior and keyboard interactions.
+ *
+ * @example
+ * <ScalarComboboxPopover>
+ *   <button>Toggle</button>
+ *   <template #popover="{ close }">Content</template>
+ * </ScalarComboboxPopover>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScalarFloatingOptions, {
     popoverButtonRef: import("vue").Ref<import("vue").DefineComponent<{
         as: {
             type: (ObjectConstructor | StringConstructor)[];
@@ -67,10 +80,7 @@ declare const __VLS_base: import("vue").DefineComponent<ScalarFloatingOptions, {
         as: string | Record<string, any>;
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScalarPopoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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":"AAsEA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAK1D,KAAK,WAAW,GAAG,kBAAkB,CAAC;AA4JtC,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8PAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAqKd,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.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<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":""}
+{"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"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":""}

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

@@ -3,7 +3,6 @@ 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";
-//#region src/components/ScalarCombobox/ScalarComboboxPopover.vue?vue&type=script&setup=true&lang.ts
 var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarComboboxPopover",

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 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":";;;;;;;;;;;;;;;;;;;;;;EAiBA,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,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"}

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

@@ -1,11 +1,19 @@
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+/**
+ * Scalar Error Boundary component
+ *
+ * Catches errors thrown by child components and displays
+ * a fallback error message instead of crashing the entire app.
+ *
+ * @example
+ * <ScalarErrorBoundary>
+ *   <SomeComponent />
+ * </ScalarErrorBoundary>
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"names":[],"mappings":"AAgGA,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"names":[],"mappings":"AAkDA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAgEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQxC,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/ScalarErrorBoundary/ScalarErrorBoundary.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarErrorBoundary.vue.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n  console.error('[ERROR]', err, info)\n\n  hasError.value = true\n  error.value = err\n\n  // Prevent the error from propagating further up\n  return false\n})\n</script>\n\n<template>\n  <slot v-if=\"!hasError\" />\n  <div\n    v-else\n    class=\"rounded border bg-b-2 p-3 text-sm\">\n    <div class=\"p-2\">Oops, something went wrong here.</div>\n    <div\n      v-if=\"error\"\n      class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n      {{ error?.name }}: {{ error?.message }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarErrorBoundary.vue.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Error Boundary component\n *\n * Catches errors thrown by child components and displays\n * a fallback error message instead of crashing the entire app.\n *\n * @example\n * <ScalarErrorBoundary>\n *   <SomeComponent />\n * </ScalarErrorBoundary>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n  console.error('[ERROR]', err, info)\n\n  hasError.value = true\n  error.value = err\n\n  // Prevent the error from propagating further up\n  return false\n})\n</script>\n\n<template>\n  <slot v-if=\"!hasError\" />\n  <div\n    v-else\n    class=\"rounded border bg-b-2 p-3 text-sm\">\n    <div class=\"p-2\">Oops, something went wrong here.</div>\n    <div\n      v-if=\"error\"\n      class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n      {{ error?.name }}: {{ error?.message }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarErrorBoundary.vue.script.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n  console.error('[ERROR]', err, info)\n\n  hasError.value = true\n  error.value = err\n\n  // Prevent the error from propagating further up\n  return false\n})\n</script>\n\n<template>\n  <slot v-if=\"!hasError\" />\n  <div\n    v-else\n    class=\"rounded border bg-b-2 p-3 text-sm\">\n    <div class=\"p-2\">Oops, something went wrong here.</div>\n    <div\n      v-if=\"error\"\n      class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n      {{ error?.name }}: {{ error?.message }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,MAAM,WAAW,IAAa,MAAK;EACnC,MAAM,QAAQ,KAAW;AAEzB,mBAAiB,KAAK,GAAG,SAAS;AAChC,WAAQ,MAAM,WAAW,KAAK,KAAI;AAElC,YAAS,QAAQ;AACjB,SAAM,QAAQ;AAGd,UAAO;IACR;;WAIc,SAAA,QAAb,WAAyB,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,IAAA,WAAA,EACzB,mBASM,OATN,YASM,CAAA,OAAA,OAAA,OAAA,KANJ,mBAAuD,OAAA,EAAlD,OAAM,OAAK,EAAC,oCAAgC,GAAA,GAEzC,MAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAIM,gBADD,MAAA,OAAO,KAAI,GAAG,OAAE,gBAAG,MAAA,OAAO,QAAO,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarErrorBoundary.vue.script.js","names":[],"sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Error Boundary component\n *\n * Catches errors thrown by child components and displays\n * a fallback error message instead of crashing the entire app.\n *\n * @example\n * <ScalarErrorBoundary>\n *   <SomeComponent />\n * </ScalarErrorBoundary>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref<boolean>(false)\nconst error = ref<Error>()\n\nonErrorCaptured((err, _, info) => {\n  console.error('[ERROR]', err, info)\n\n  hasError.value = true\n  error.value = err\n\n  // Prevent the error from propagating further up\n  return false\n})\n</script>\n\n<template>\n  <slot v-if=\"!hasError\" />\n  <div\n    v-else\n    class=\"rounded border bg-b-2 p-3 text-sm\">\n    <div class=\"p-2\">Oops, something went wrong here.</div>\n    <div\n      v-if=\"error\"\n      class=\"mt-2 rounded border bg-b-1 p-2 font-code text-c-2\">\n      {{ error?.name }}: {{ error?.message }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAiBA,MAAM,WAAW,IAAa,MAAK;EACnC,MAAM,QAAQ,KAAW;AAEzB,mBAAiB,KAAK,GAAG,SAAS;AAChC,WAAQ,MAAM,WAAW,KAAK,KAAI;AAElC,YAAS,QAAQ;AACjB,SAAM,QAAQ;AAGd,UAAO;IACR;;WAIc,SAAA,QAAb,WAAyB,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,IAAA,WAAA,EACzB,mBASM,OATN,YASM,CAAA,OAAA,OAAA,OAAA,KANJ,mBAAuD,OAAA,EAAlD,OAAM,OAAK,EAAC,oCAAgC,GAAA,GAEzC,MAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAIM,gBADD,MAAA,OAAO,KAAI,GAAG,OAAE,gBAAG,MAAA,OAAO,QAAO,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

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

@@ -1,6 +1,23 @@
 import { type MiddlewareData } from '@floating-ui/vue';
 import type { FloatingOptions } from './types';
-type __VLS_Slots = {
+/**
+ * Scalar Floating component
+ *
+ * Positions a floating element relative to a reference element
+ * using Floating UI. Handles placement, offset, flipping, and resizing.
+ *
+ * @example
+ * <ScalarFloating placement="bottom">
+ *   <button>Reference</button>
+ *   <template #floating>Floating content</template>
+ * </ScalarFloating>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FloatingOptions, {
+    /** The resolved target element */
+    targetRef: import("vue").ComputedRef<HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The reference element for the element in the #floating slot */
     default(): unknown;
     /** The floating element */
@@ -12,14 +29,7 @@ type __VLS_Slots = {
         /** The middleware data return by Floating UI */
         data?: MiddlewareData;
     }): unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<FloatingOptions, {
-    /** The resolved target element */
-    targetRef: import("vue").ComputedRef<HTMLElement | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAyIA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAc9C,KAAK,WAAW,GAAG;IACjB,kEAAkE;IAClE,OAAO,IAAI,OAAO,CAAA;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,CAAC,KAAK,EAAE;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO,CAAA;CACZ,CAAC;AA0IF,QAAA,MAAM,UAAU;IApEd,kCAAkC;;wPAuElC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAwJA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI9C;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IA8FhB,kCAAkC;;;IAjFlC,kEAAkE;eACvD,OAAO;IAClB,2BAA2B;qBACV;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO;EAgJT,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/ScalarFloating/ScalarFloating.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip(),\n    shift({ padding: 10 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip(),\n    shift({ padding: 10 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}

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

@@ -3,7 +3,6 @@ import { useResizeWithTarget } from "./useResizeWithTarget.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { getSideAxis } from "@floating-ui/utils";
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/vue";
-//#region src/components/ScalarFloating/ScalarFloating.vue?vue&type=script&setup=true&lang.ts
 var ScalarFloating_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarFloating",

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip(),\n    shift({ padding: 10 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,cAAuC,IAAI,KAAI;EACrD,MAAM,aAAsC,IAAI,KAAI;EAEpD,MAAM,YAAY,eAAwC;AACxD,OAAI,OAAO,WAAW,eAAe,WAAW,OAAO;AAErD,QAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,OAAM;AACxC,SAAI,EACF,QAAO;AAET,aAAQ,KAAK,mCAAmC,QAAA,OAAO,aAAY;eAG5D,QAAA,kBAAkB,YACzB,QAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;AAC/C,QAAI,sBAAsB,YACxB,QAAO;AAET,WAAO,WAAW;;IAIrB;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,OAAO,EAChC,CAAA;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,MAAM,QACjB,KAAA,EACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,OAAO,QAClB,KAAA,EACN;EACA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,SAAS;GAChD,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,OAAO;IACxB,MAAM;IACN,MAAM,EAAE,SAAS,IAAI,CAAC;IACtB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;AAGnD,YAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,eAAe,GAAG,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,gBAAgB,GAAG,GAAG;MACjD,CAAA;OAEJ,CAAC;IACF,GAAG,QAAA;IACJ,CAAC;GACH,CAAA;AAED,WAAa,EAEX,WACD,CAAA;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGFA,KAAAA,OAAO,YAAA,WAAA,EADf,YAciB,MAAA,uBAAA,EAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,eAAc,CAAA;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,eAAc;KACpB,QAAQ,aAAA;KAER,OAAO,YAAA"}
+{"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip(),\n    shift({ padding: 10 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 20}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 20}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,cAAuC,IAAI,KAAI;EACrD,MAAM,aAAsC,IAAI,KAAI;EAEpD,MAAM,YAAY,eAAwC;AACxD,OAAI,OAAO,WAAW,eAAe,WAAW,OAAO;AAErD,QAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,OAAM;AACxC,SAAI,EACF,QAAO;AAET,aAAQ,KAAK,mCAAmC,QAAA,OAAO,aAAY;eAG5D,QAAA,kBAAkB,YACzB,QAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;AAC/C,QAAI,sBAAsB,YACxB,QAAO;AAET,WAAO,WAAW;;IAIrB;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,OAAO,EAChC,CAAA;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,MAAM,QACjB,KAAA,EACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,SAAS,KAAK,MACnC,WAAW,OAAO,QAClB,KAAA,EACN;EACA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,SAAS;GAChD,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,OAAO;IACxB,MAAM;IACN,MAAM,EAAE,SAAS,IAAI,CAAC;IACtB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;AAGnD,YAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,eAAe,GAAG,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,gBAAgB,GAAG,GAAG;MACjD,CAAA;OAEJ,CAAC;IACF,GAAG,QAAA;IACJ,CAAC;GACH,CAAA;AAED,WAAa,EAEX,WACD,CAAA;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGFA,KAAAA,OAAO,YAAA,WAAA,EADf,YAciB,MAAA,uBAAA,EAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,eAAc,CAAA;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,eAAc;KACpB,QAAQ,aAAA;KAER,OAAO,YAAA"}

package/dist/components/ScalarForm/ScalarFormError.vue.d.ts

@@ -1,18 +1,27 @@
 import { type Component } from 'vue';
-type __VLS_Props = {
+/**
+ * Scalar Form Error component
+ *
+ * Displays an error or warning message with an icon.
+ *
+ * @example
+ * <ScalarFormError variant="error">Something went wrong</ScalarFormError>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The variant of the error */
-    variant?: 'error' | 'warning';
+    variant?: "error" | "warning";
     /** Whether to show the icon */
     icon?: Component | undefined;
-};
-declare var __VLS_6: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The variant of the error */
+    variant?: "error" | "warning";
+    /** Whether to show the icon */
+    icon?: Component | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/ScalarForm/ScalarFormError.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"names":[],"mappings":"AAgDA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAE9C,KAAK,WAAW,GAAG;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAC7B,CAAC;AA+DF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarFormError.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"names":[],"mappings":"AA2DA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAG9C;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;IAH5B,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;cAkEhB,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,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/ScalarForm/ScalarFormError.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFormError.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarFormError.vue.script.js

@@ -1,7 +1,6 @@
 import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
 import { computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref } from "vue";
 import { ScalarIconWarning, ScalarIconWarningCircle } from "@scalar/icons";
-//#region src/components/ScalarForm/ScalarFormError.vue?vue&type=script&setup=true&lang.ts
 var ScalarFormError_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarFormError",

package/dist/components/ScalarForm/ScalarFormError.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.script.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAYA,MAAM,SAAS,eAAe;AAC5B,OAAI,QAAA,KACF,QAAO,QAAA;AAET,UAAO,QAAA,YAAY,UAAU,0BAA0B;IACxD;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,SAAS;IACP,OAAO;IACP,SAAS;IACV,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAQM,OARN,WAQM,EAPJ,MAAK,SAAO,EACJ,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,SAAG,QAAA,SAAO,CAAA,CAAA,CAAA,EAAA,EAAA,WAAA,EAC7B,YAGkB,wBAFX,OAAA,MAAM,EAAA;IACX,OAAM;IACN,QAAO;QACT,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarFormError.vue.script.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAuBA,MAAM,SAAS,eAAe;AAC5B,OAAI,QAAA,KACF,QAAO,QAAA;AAET,UAAO,QAAA,YAAY,UAAU,0BAA0B;IACxD;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,SAAS;IACP,OAAO;IACP,SAAS;IACV,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAQM,OARN,WAQM,EAPJ,MAAK,SAAO,EACJ,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,SAAG,QAAA,SAAO,CAAA,CAAA,CAAA,EAAA,EAAA,WAAA,EAC7B,YAGkB,wBAFX,OAAA,MAAM,EAAA;IACX,OAAM;IACN,QAAO;QACT,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

@@ -1,9 +1,19 @@
 import type { HotKeyModifier } from './types';
-type __VLS_Props = {
-    hotkey: string;
-    modifier?: HotKeyModifier[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/**
+ * Scalar Hotkey component
+ *
+ * Displays a keyboard shortcut as styled key caps.
+ *
+ * @example
+ * <ScalarHotkey hotkey="k" :modifier="['Meta']" />
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    hotkey: string;
+    modifier?: HotKeyModifier[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    hotkey: string;
+    modifier?: HotKeyModifier[];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=ScalarHotkey.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkey.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC5B,CAAC;AAyDF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarHotkey.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,MAAM;eACH,cAAc,EAAE;;YADnB,MAAM;eACH,cAAc,EAAE;iGA6DzB,CAAC"}

package/dist/components/ScalarHotkey/ScalarHotkey.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkey.vue.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHotkey.vue.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Hotkey component\n *\n * Displays a keyboard shortcut as styled key caps.\n *\n * @example\n * <ScalarHotkey hotkey=\"k\" :modifier=\"['Meta']\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkey.vue.script.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,MAAM,EAAE,OAAO,WAAU;EAGzB,MAAM,cAAc,eAAe,oBAAoB,QAAA,QAAQ,QAAA,SAAS,CAAA;;uBAGtE,mBAkBM,OAAA,eAAA,mBAjBW,MAAA,GAAE,CAAA,8IAAA,CAAA,CAAA,EAAA,EAAA,UAAA,KAAA,EAKjB,mBAWM,UAAA,MAAA,WAVgB,YAAA,QAAZ,MAAM,MAAC;wBADjB,mBAWM,OAAA,EATH,KAAK,GAAC,EAAA,CACP,mBAIO,QAJP,YAIO,gBADF,KAAI,EAAA,EAAA,EAET,mBAEO,QAFP,YAEO,gBADF,MAAA,YAAW,CAAC,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarHotkey.vue.script.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Hotkey component\n *\n * Displays a keyboard shortcut as styled key caps.\n *\n * @example\n * <ScalarHotkey hotkey=\"k\" :modifier=\"['Meta']\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;EAGzB,MAAM,cAAc,eAAe,oBAAoB,QAAA,QAAQ,QAAA,SAAS,CAAA;;uBAGtE,mBAkBM,OAAA,eAAA,mBAjBW,MAAA,GAAE,CAAA,8IAAA,CAAA,CAAA,EAAA,EAAA,UAAA,KAAA,EAKjB,mBAWM,UAAA,MAAA,WAVgB,YAAA,QAAZ,MAAM,MAAC;wBADjB,mBAWM,OAAA,EATH,KAAK,GAAC,EAAA,CACP,mBAIO,QAJP,YAIO,gBADF,KAAI,EAAA,EAAA,EAET,mBAEO,QAFP,YAEO,gBADF,MAAA,YAAW,CAAC,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/ScalarIcon/IconList.vue.d.ts

@@ -1,7 +1,18 @@
-type __VLS_Props = {
-    thickness?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/**
+ * Icon List component
+ *
+ * Displays all available icons in a grid for browsing and selection.
+ * Clicking an icon copies its name to the clipboard.
+ * Used internally in Storybook for icon discovery.
+ *
+ * @example
+ * <IconList />
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    thickness?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    thickness?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=IconList.vue.d.ts.map

package/dist/components/ScalarIcon/IconList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/IconList.vue"],"names":[],"mappings":"AAoDA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAyHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"IconList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/IconList.vue"],"names":[],"mappings":"AAkEA;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;gBAEJ,MAAM;;gBAAN,MAAM;iGA6HhB,CAAC"}