@scalar/components 0.32.1 → 0.33.1

package/dist/components/ScalarCopy/ScalarCopyButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,88 @@
+import ScalarCopyBackdrop_default from "./ScalarCopyBackdrop.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { Transition, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useModel, withCtx } from "vue";
+import { ScalarIconCheck, ScalarIconCopy } from "@scalar/icons";
+//#region src/components/ScalarCopy/ScalarCopyButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"aria-hidden": "true",
+	class: "flex items-center mask-y-from-[calc(100%-8px)] mask-y-to-100% py-1.5"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "px-1.5 whitespace-nowrap"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "sr-only",
+	role: "alert"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "sr-only"
+};
+var ScalarCopyButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCopyButton",
+	props: /*@__PURE__*/ mergeModels({
+		showLabel: { type: Boolean },
+		placement: { default: "right" }
+	}, {
+		"copied": {
+			type: Boolean,
+			default: false
+		},
+		"copiedModifiers": {}
+	}),
+	emits: ["update:copied"],
+	setup(__props) {
+		/** Whether the copy button has been clicked */
+		const copied = useModel(__props, "copied");
+		const { cx } = useBindCx();
+		const icon = computed(() => {
+			return copied.value ? ScalarIconCheck : ScalarIconCopy;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({ type: "button" }, unref(cx)("group/copy-button relative z-0 flex items-center justify-center", "size-6 p-1.25 -m-1 rounded text-xs bg-b-2", copied.value ? "text-c-1" : "text-c-2 hover:text-c-1")), [
+				createVNode(Transition, {
+					enterActiveClass: "transition-transform",
+					enterFromClass: "scale-0",
+					enterToClass: "scale-100",
+					leaveActiveClass: "transition-transform",
+					leaveFromClass: "scale-100",
+					leaveToClass: "scale-0",
+					mode: "out-in"
+				}, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(icon.value), { class: "size-full" }))]),
+					_: 1
+				}),
+				_cache[4] || (_cache[4] = createElementVNode("div", { class: "absolute inset-0 -z-1 rounded-[inherit] bg-inherit" }, null, -1)),
+				createElementVNode("div", { class: normalizeClass(["group/copy-label absolute -inset-y-0.5 flex items-center rounded", {
+					"left-0 pl-[100%]": __props.placement === "right",
+					"right-0 pr-[100%]": __props.placement === "left"
+				}]) }, [
+					createElementVNode("div", _hoisted_1, [createVNode(Transition, {
+						enterActiveClass: "transition-transform ease-out",
+						enterFromClass: "translate-y-1.5",
+						enterToClass: "translate-y-0",
+						leaveActiveClass: "transition-transform ease-in",
+						leaveFromClass: "translate-y-0",
+						leaveToClass: "-translate-y-1.5",
+						mode: "out-in"
+					}, {
+						default: withCtx(() => [copied.value ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "copied", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Copied", -1))])])) : (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(["px-1.5 whitespace-nowrap", { "group-hocus/copy-button:block hidden": !__props.showLabel && !copied.value }])
+						}, [renderSlot(_ctx.$slots, "copy", {}, () => [_cache[1] || (_cache[1] = createTextVNode("Copy", -1))])], 2))]),
+						_: 3
+					})]),
+					copied.value ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "copied", {}, () => [_cache[2] || (_cache[2] = createTextVNode("Copied", -1))])])) : (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "copy", {}, () => [_cache[3] || (_cache[3] = createTextVNode("Copy", -1))])])),
+					renderSlot(_ctx.$slots, "backdrop", {}, () => [createVNode(ScalarCopyBackdrop_default)])
+				], 2)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCopyButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCopyButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarCopy/ScalarCopyButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCopyButton.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","_Transition","_withCtx","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_renderSlot","_createTextVNode","ScalarCopyBackdrop"],"sources":["../../../src/components/ScalarCopy/ScalarCopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Copy Button component\n *\n * A dumb button with copy animations.\n *\n * If you're looking for a button that copies content to the clipboard,\n * use the ScalarCopy component instead.\n *\n * @example\n *   <ScalarCopyButton @click=\"handleCopy\">\n *     <template #copy>Button label</template>\n *     <template #copied>Copied label</template>\n *   </ScalarCopyButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconCopy } from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport ScalarCopyBackdrop from './ScalarCopyBackdrop.vue'\nimport type { ScalarCopyPlacement, ScalarCopySlots } from './types'\n\nconst { placement = 'right' } = defineProps<{\n  /** Whether the label should be shown on hover or always */\n  showLabel?: boolean\n  /** The placement of the copy button */\n  placement?: ScalarCopyPlacement\n}>()\n\ndefineSlots<ScalarCopySlots>()\n\n/** Whether the copy button has been clicked */\nconst copied = defineModel<boolean>('copied', { default: false })\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst icon = computed<ScalarIconComponent>(() => {\n  return copied.value ? ScalarIconCheck : ScalarIconCopy\n})\n</script>\n<template>\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/copy-button relative z-0 flex items-center justify-center',\n        'size-6 p-1.25 -m-1 rounded text-xs bg-b-2',\n        copied ? 'text-c-1' : 'text-c-2 hover:text-c-1',\n      )\n    \">\n    <Transition\n      enterActiveClass=\"transition-transform\"\n      enterFromClass=\"scale-0\"\n      enterToClass=\"scale-100\"\n      leaveActiveClass=\"transition-transform\"\n      leaveFromClass=\"scale-100\"\n      leaveToClass=\"scale-0\"\n      mode=\"out-in\">\n      <component\n        :is=\"icon\"\n        class=\"size-full\" />\n    </Transition>\n    <div class=\"absolute inset-0 -z-1 rounded-[inherit] bg-inherit\" />\n    <div\n      class=\"group/copy-label absolute -inset-y-0.5 flex items-center rounded\"\n      :class=\"{\n        'left-0 pl-[100%]': placement === 'right',\n        'right-0 pr-[100%]': placement === 'left',\n      }\">\n      <div\n        aria-hidden=\"true\"\n        class=\"flex items-center mask-y-from-[calc(100%-8px)] mask-y-to-100% py-1.5\">\n        <Transition\n          enterActiveClass=\"transition-transform ease-out\"\n          enterFromClass=\"translate-y-1.5\"\n          enterToClass=\"translate-y-0\"\n          leaveActiveClass=\"transition-transform ease-in\"\n          leaveFromClass=\"translate-y-0\"\n          leaveToClass=\"-translate-y-1.5\"\n          mode=\"out-in\">\n          <div\n            v-if=\"copied\"\n            class=\"px-1.5 whitespace-nowrap\">\n            <slot name=\"copied\">Copied</slot>\n          </div>\n          <div\n            v-else\n            class=\"px-1.5 whitespace-nowrap\"\n            :class=\"{\n              'group-hocus/copy-button:block hidden': !showLabel && !copied,\n            }\">\n            <slot name=\"copy\">Copy</slot>\n          </div>\n        </Transition>\n      </div>\n      <div\n        v-if=\"copied\"\n        class=\"sr-only\"\n        role=\"alert\">\n        <slot name=\"copied\">Copied</slot>\n      </div>\n      <div\n        v-else\n        class=\"sr-only\">\n        <slot name=\"copy\">Copy</slot>\n      </div>\n      <slot name=\"backdrop\">\n        <ScalarCopyBackdrop />\n      </slot>\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,SAASA,SAAoB,SAAC,QAA4B;EAGhE,MAAM,EAAE,OAAO,UAAU;EAEzB,MAAM,OAAO,eAAoC;GAC/C,OAAO,OAAO,QAAQ,kBAAkB;EAC1C,CAAC;;GAGC,OAAAC,UAAA,GAAAC,mBAqES,UArETC,WAqES,EApEP,MAAK,SAAQ,GACEC,MAAA,EAAA,CAAE,C,gHAA0I,OAAA,QAAM,aAAA,yB;IAOjKC,YAWaC,YAAA;KAVX,kBAAiB;KACjB,gBAAe;KACf,cAAa;KACb,kBAAiB;KACjB,gBAAe;KACf,cAAa;KACb,MAAK;;KACL,SAAAC,cAEsB,EAFtBN,UAAA,GAAAO,YAEsBC,wBADf,KAAA,KAAI,GAAA,EACT,OAAM,YAAW,CAAA,E;;;IAErB,OAAA,OAAA,OAAA,KAAAC,mBAAkE,OAAA,EAA7D,OAAM,qDAAoD,GAAA,MAAA,EAAA;IAC/DA,mBA8CM,OAAA,EA7CJ,OAAKC,eAAA,CAAC,oEAAkE;KAClC,oBAAA,QAAA,cAAS;KAA2C,qBAAA,QAAA,cAAS;;KAInGD,mBAyBM,OAzBN,YAyBM,CAtBJL,YAqBaC,YAAA;MApBX,kBAAiB;MACjB,gBAAe;MACf,cAAa;MACb,kBAAiB;MACjB,gBAAe;MACf,cAAa;MACb,MAAK;;MACL,SAAAC,cAIM,CAHE,OAAA,SADRN,UAAA,GAAAC,mBAIM,OAJN,YAIM,CADJU,WAAiC,KAAA,QAAA,UAAA,CAAA,SAAA,CAAb,OAAA,OAAA,OAAA,KAAAC,gBAAA,UAAM,EAAA,E,SAE5BZ,UAAA,GAAAC,mBAOM,OAAA;;OALJ,OAAKS,eAAA,CAAC,4BAA0B,EACiC,wCAAA,CAAA,QAAA,aAAS,CAAK,OAAA,M;M,IAG/EC,WAA6B,KAAA,QAAA,QAAA,CAAA,SAAA,CAAX,OAAA,OAAA,OAAA,KAAAC,gBAAA,QAAI,EAAA,E;;;KAKpB,OAAA,SADRZ,UAAA,GAAAC,mBAKM,OALN,YAKM,CADJU,WAAiC,KAAA,QAAA,UAAA,CAAA,SAAA,CAAb,OAAA,OAAA,OAAA,KAAAC,gBAAA,UAAM,EAAA,E,SAE5BZ,UAAA,GAAAC,mBAIM,OAJN,YAIM,CADJU,WAA6B,KAAA,QAAA,QAAA,CAAA,SAAA,CAAX,OAAA,OAAA,OAAA,KAAAC,gBAAA,QAAI,EAAA,E;KAExBD,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADLP,YAAsBS,0BAAA,C"}

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

@@ -1,4 +1,4 @@
-import ScalarDropdown_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdown.vue.script.js";
+import ScalarDropdown_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdown.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarDropdown/ScalarDropdown.vue
 var ScalarDropdown_default = ScalarDropdown_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

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

package/dist/components/ScalarDropdown/ScalarDropdown.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,170 @@
+import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
+import ScalarDropdownMenu_default from "./ScalarDropdownMenu.vue.js";
+import { useDropdown } from "./useDropdown.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, nextTick, openBlock, ref, renderSlot, unref, useId, useModel, watch, withCtx, withKeys, withModifiers } from "vue";
+import { onClickOutside } from "@vueuse/core";
+//#region src/components/ScalarDropdown/ScalarDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-activedescendant",
+	"aria-labelledby",
+	"onKeydown"
+];
+var ScalarDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarDropdown",
+	props: /*@__PURE__*/ mergeModels({
+		placement: {},
+		offset: { type: [
+			Number,
+			Object,
+			Function
+		] },
+		resize: { type: Boolean },
+		target: {},
+		middleware: {},
+		teleport: { type: [Boolean, String] }
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props) {
+		const floatingRef = ref();
+		const menuRef = ref();
+		/** Whether or not the dropdown is open */
+		const open = useModel(__props, "open");
+		const { active } = useDropdown();
+		const fallbackTargetId = useId();
+		const targetId = ref(fallbackTargetId);
+		const menuId = useId();
+		/** Handle click events on the target */
+		async function handleTargetClick() {
+			open.value = !open.value;
+			await nextTick();
+			if (open.value) menuRef.value?.focus({ preventScroll: true });
+		}
+		/** Handle keydown events on the target */
+		async function handleTargetKeydown(event) {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				" ",
+				"Enter"
+			].includes(event.key)) event.preventDefault();
+			else return;
+			if (!open.value) open.value = true;
+			await nextTick();
+			menuRef.value?.focus({ preventScroll: true });
+			if ([
+				"ArrowDown",
+				" ",
+				"Enter"
+			].includes(event.key)) moveActive(1);
+			else if (event.key === "ArrowUp") moveActive(-1);
+		}
+		/** Watch the target reference for changes */
+		watch(() => floatingRef.value?.targetRef, (newTarget, oldTarget) => {
+			if (newTarget) {
+				if (newTarget.id) targetId.value = newTarget.id;
+				else {
+					targetId.value = fallbackTargetId;
+					newTarget.setAttribute("id", targetId.value);
+				}
+				newTarget.setAttribute("aria-haspopup", "menu");
+				newTarget.setAttribute("aria-expanded", `${open.value}`);
+				if (open.value) newTarget.setAttribute("aria-controls", menuId);
+				newTarget.addEventListener("click", handleTargetClick);
+				newTarget.addEventListener("keydown", handleTargetKeydown);
+			}
+			if (oldTarget && oldTarget !== newTarget) {
+				if (oldTarget.id === fallbackTargetId) oldTarget.removeAttribute("id");
+				oldTarget.removeAttribute("aria-controls");
+				oldTarget.removeAttribute("aria-haspopup");
+				oldTarget.removeAttribute("aria-expanded");
+				oldTarget.removeEventListener("click", handleTargetClick);
+				oldTarget.removeEventListener("keydown", handleTargetKeydown);
+			}
+		}, { immediate: true });
+		/** Watch the open state for changes */
+		watch(open, (o) => {
+			const target = floatingRef.value?.targetRef;
+			if (!target) return;
+			target.setAttribute("aria-expanded", `${o}`);
+			if (o) target.setAttribute("aria-controls", menuId);
+			else target.removeAttribute("aria-controls");
+		}, { immediate: true });
+		async function handleClose() {
+			floatingRef.value?.targetRef?.focus();
+			open.value = false;
+		}
+		function handleSelected() {
+			if (!active.value || !menuRef.value) return;
+			const button = menuRef.value.querySelector(`#${active.value}[role="menuitem"]:not([aria-disabled="true"])`);
+			if (!button) return;
+			button.click();
+			handleClose();
+		}
+		/** Move the active item in the dropdown */
+		function moveActive(dir) {
+			if (!open.value || !menuRef.value) return;
+			const list = Array.from(menuRef.value.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"));
+			if (list.length === 0) return;
+			const activeIdx = list.findIndex((item) => item.id === active.value);
+			if (activeIdx === -1) {
+				const targetItem = list[dir > 0 ? 0 : list.length - 1];
+				if (targetItem?.id) active.value = targetItem.id;
+				return;
+			}
+			const nextIdx = activeIdx + dir;
+			if (nextIdx < 0 || nextIdx > list.length - 1) return;
+			const nextItem = list[nextIdx];
+			if (nextItem?.id) active.value = nextItem.id;
+		}
+		/** Close the dropdown if the user clicks outside of the menu and button */
+		onClickOutside(menuRef, handleClose, { ignore: [computed(() => floatingRef.value?.targetRef)] });
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFloating_default), mergeProps({
+				ref_key: "floatingRef",
+				ref: floatingRef
+			}, _ctx.$props, { placement: __props.placement ?? "bottom-start" }), createSlots({
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open: open.value })]),
+				_: 2
+			}, [open.value ? {
+				name: "floating",
+				fn: withCtx(({ width }) => [createVNode(ScalarDropdownMenu_default, mergeProps({ style: { width } }, unref(cx)("max-h-[inherit] max-w-[inherit]")), {
+					menu: withCtx(() => [createElementVNode("div", {
+						id: unref(menuId),
+						ref_key: "menuRef",
+						ref: menuRef,
+						"aria-activedescendant": unref(active),
+						"aria-labelledby": targetId.value,
+						class: "flex flex-col p-0.75 outline-none",
+						role: "menu",
+						tabindex: "-1",
+						onClick: withModifiers(handleClose, ["stop"]),
+						onKeydown: [
+							_cache[0] || (_cache[0] = withKeys(withModifiers(($event) => moveActive(1), ["prevent", "stop"]), ["down"])),
+							withKeys(withModifiers(handleSelected, ["prevent", "stop"]), ["enter"]),
+							withKeys(withModifiers(handleClose, ["prevent", "stop"]), ["escape"]),
+							withKeys(withModifiers(handleSelected, ["prevent", "stop"]), ["space"]),
+							withKeys(withModifiers(handleClose, ["prevent", "stop"]), ["tab"]),
+							_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => moveActive(-1), ["prevent", "stop"]), ["up"]))
+						]
+					}, [renderSlot(_ctx.$slots, "items", { open: open.value })], 40, _hoisted_1)]),
+					_: 3
+				}, 16, ["style"])]),
+				key: "0"
+			} : void 0]), 1040, ["placement"]);
+		};
+	}
+});
+//#endregion
+export { ScalarDropdown_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarDropdown.vue_vue_type_script_setup_true_lang.js.map

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

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

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

@@ -1,6 +1,6 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownButton.vue.script.js";
-/* empty css                                   */
+import ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownButton.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                         */
 //#region src/components/ScalarDropdown/ScalarDropdownButton.vue
 var ScalarDropdownButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-128eed00"]]);
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownButton.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n *   Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  active?: boolean\n  disabled?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left',\n    // Text / background style\n    'truncate  no-underline text-sm text-c-1',\n    // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n    // Radix keyboard navigation and mouse-hover within Radix menu items\n    'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarDropdownButton.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n *   Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  active?: boolean\n  disabled?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left',\n    // Text / background style\n    'truncate  no-underline text-sm text-c-1',\n    // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n    // Radix keyboard navigation and mouse-hover within Radix menu items\n    'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,49 @@
+import { cva, cx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+var ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarDropdownButton",
+	props: {
+		is: { default: "button" },
+		active: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	setup(__props) {
+		const variants = cva({
+			base: [
+				"block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left",
+				"truncate  no-underline text-sm text-c-1",
+				"cursor-pointer hover:bg-b-2 highlighted:bg-b-2"
+			],
+			variants: {
+				disabled: { true: "pointer-events-none text-c-3" },
+				active: { true: "" }
+			},
+			compoundVariants: [{
+				disabled: false,
+				active: true,
+				class: "bg-b-2"
+			}]
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), {
+				"aria-disabled": __props.disabled,
+				class: normalizeClass(["item", unref(cx)("scalar-dropdown-item", unref(variants)({
+					active: __props.active,
+					disabled: __props.disabled
+				}))]),
+				type: __props.is === "button" ? "button" : void 0
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, [
+				"aria-disabled",
+				"class",
+				"type"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarDropdownButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_unref","_withCtx","_renderSlot"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n *   Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  active?: boolean\n  disabled?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left',\n    // Text / background style\n    'truncate  no-underline text-sm text-c-1',\n    // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n    // Radix keyboard navigation and mouse-hover within Radix menu items\n    'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAGA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,+BAA+B;IACjD,QAAQ,EAAE,MAAM,GAAG;GACrB;GACA,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;GAAS,CAAC;EACvE,CAAC;;GAGC,OAAAA,UAAA,GAAAC,YAOYC,wBANL,QAAA,EAAE,GAAA;IACN,iBAAe,QAAA;IAChB,OAAKC,eAAA,CAAC,QACEC,MAAA,EAAA,CAAE,CAAA,wBAAyBA,MAAA,QAAA,CAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;IAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;IACpC,SAAAC,cAAQ,CAARC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,C"}

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

@@ -1,8 +1,8 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarDropdownDivider_vue_vue_type_script_lang_default from "./ScalarDropdownDivider.vue.script.js";
+import ScalarDropdownDivider_vue_vue_type_script_lang_default from "./ScalarDropdownDivider.vue_vue_type_script_lang.js";
 import { createElementBlock, openBlock } from "vue";
 //#region src/components/ScalarDropdown/ScalarDropdownDivider.vue
-var _hoisted_1 = { class: "-mx-0.75 my-0.75 h-border bg-border" };
+var _hoisted_1 = { class: "h-border bg-border -mx-0.75 my-0.75" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", _hoisted_1);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownDivider.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownDivider.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown divider component\n *\n * Used to create a divider between items in the ScalarDropdown component\n *\n * @example\n * <ScalarDropdown>\n *   ...\n *   <template #items>\n *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n *     <ScalarDropdownDivider />\n *     <ScalarDropdownItem>Item 3</ScalarDropdownItem>\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<template>\n  <div class=\"-mx-0.75 my-0.75 h-border bg-border\" />\n</template>\n"],"mappings":";;;;mBAoBO,OAAM,sCAAqC;;qBAAhD,mBAAmD,OAAnD,UAAmD"}
+{"version":3,"file":"ScalarDropdownDivider.vue.js","names":["_openBlock","_createElementBlock","_sfc_main"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownDivider.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown divider component\n *\n * Used to create a divider between items in the ScalarDropdown component\n *\n * @example\n * <ScalarDropdown>\n *   ...\n *   <template #items>\n *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n *     <ScalarDropdownDivider />\n *     <ScalarDropdownItem>Item 3</ScalarDropdownItem>\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<template>\n  <div class=\"h-border bg-border -mx-0.75 my-0.75\" />\n</template>\n"],"mappings":";;;;AAoBO,IAAA,aAAA,EAAA,OAAM,sCAAqC;;CAAhD,OAAAA,UAAA,GAAAC,mBAAmD,OAAnD,UAAmD"}

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue_vue_type_script_lang.js

@@ -0,0 +1,22 @@
+//#region src/components/ScalarDropdown/ScalarDropdownDivider.vue?vue&type=script&lang.ts
+/**
+* Scalar dropdown divider component
+*
+* Used to create a divider between items in the ScalarDropdown component
+*
+* @example
+* <ScalarDropdown>
+*   ...
+*   <template #items>
+*     <ScalarDropdownItem>Item 1</ScalarDropdownItem>
+*     <ScalarDropdownItem>Item 2</ScalarDropdownItem>
+*     <ScalarDropdownDivider />
+*     <ScalarDropdownItem>Item 3</ScalarDropdownItem>
+*   </template>
+* </ScalarDropdown>
+*/
+var ScalarDropdownDivider_vue_vue_type_script_lang_default = {};
+//#endregion
+export { ScalarDropdownDivider_vue_vue_type_script_lang_default as default };
+
+//# sourceMappingURL=ScalarDropdownDivider.vue_vue_type_script_lang.js.map

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownDivider.vue_vue_type_script_lang.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownDivider.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown divider component\n *\n * Used to create a divider between items in the ScalarDropdown component\n *\n * @example\n * <ScalarDropdown>\n *   ...\n *   <template #items>\n *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n *     <ScalarDropdownDivider />\n *     <ScalarDropdownItem>Item 3</ScalarDropdownItem>\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<template>\n  <div class=\"h-border bg-border -mx-0.75 my-0.75\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,IAAA,yDAAe,CAAC"}

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

@@ -1,6 +1,6 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarDropdownItem_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownItem.vue.script.js";
-/* empty css                                 */
+import ScalarDropdownItem_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownItem.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                       */
 //#region src/components/ScalarDropdown/ScalarDropdownItem.vue
 var ScalarDropdownItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarDropdownItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3402682d"]]);
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownItem.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown item component\n *\n * Used to create items for the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownItem ＠click=\"handleClick\">\n *   Label\n * </ScalarDropdownItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport ScalarDropdownButton from './ScalarDropdownButton.vue'\nimport { useDropdownItem } from './useDropdown'\n\nconst { id = useId(), disabled } = defineProps<{\n  id?: string\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click', event: MouseEvent): void\n}>()\n\nconst { active } = useDropdownItem()\n</script>\n<template>\n  <ScalarDropdownButton\n    :id\n    :active=\"active === id\"\n    :disabled\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    @click=\"(e: MouseEvent) => $emit('click', e)\"\n    @mouseenter=\"active = id\">\n    <slot />\n  </ScalarDropdownButton>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarDropdownItem.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown item component\n *\n * Used to create items for the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownItem ＠click=\"handleClick\">\n *   Label\n * </ScalarDropdownItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport ScalarDropdownButton from './ScalarDropdownButton.vue'\nimport { useDropdownItem } from './useDropdown'\n\nconst { id = useId(), disabled } = defineProps<{\n  id?: string\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click', event: MouseEvent): void\n}>()\n\nconst { active } = useDropdownItem()\n</script>\n<template>\n  <ScalarDropdownButton\n    :id\n    :active=\"active === id\"\n    :disabled\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    @click=\"(e: MouseEvent) => $emit('click', e)\"\n    @mouseenter=\"active = id\">\n    <slot />\n  </ScalarDropdownButton>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { useDropdownItem } from "./useDropdown.js";
+import ScalarDropdownButton_default from "./ScalarDropdownButton.vue.js";
+import { createBlock, defineComponent, openBlock, renderSlot, unref, useId, withCtx } from "vue";
+var ScalarDropdownItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarDropdownItem",
+	props: {
+		id: { default: () => useId() },
+		disabled: { type: Boolean }
+	},
+	emits: ["click"],
+	setup(__props) {
+		const { active } = useDropdownItem();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarDropdownButton_default, {
+				id: __props.id,
+				active: unref(active) === __props.id,
+				disabled: __props.disabled,
+				role: "menuitem",
+				tabindex: "-1",
+				onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("click", e)),
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => active.value = __props.id)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, [
+				"id",
+				"active",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarDropdownItem_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarDropdownItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownItem.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","ScalarDropdownButton","_unref","_withCtx","_renderSlot"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown item component\n *\n * Used to create items for the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownItem ＠click=\"handleClick\">\n *   Label\n * </ScalarDropdownItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport ScalarDropdownButton from './ScalarDropdownButton.vue'\nimport { useDropdownItem } from './useDropdown'\n\nconst { id = useId(), disabled } = defineProps<{\n  id?: string\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click', event: MouseEvent): void\n}>()\n\nconst { active } = useDropdownItem()\n</script>\n<template>\n  <ScalarDropdownButton\n    :id\n    :active=\"active === id\"\n    :disabled\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    @click=\"(e: MouseEvent) => $emit('click', e)\"\n    @mouseenter=\"active = id\">\n    <slot />\n  </ScalarDropdownButton>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA4BA,MAAM,EAAE,WAAW,gBAAgB;;GAGjC,OAAAC,UAAA,GAAAC,YASuBC,8BAAA;IARpB,IAAA,QAAA;IACA,QAAQC,MAAA,MAAA,MAAW,QAAA;IACnB,UAAA,QAAA;IACD,MAAK;IACL,UAAS;IACR,SAAK,OAAA,OAAA,OAAA,MAAG,MAAkBJ,KAAAA,MAAK,SAAU,CAAC;IAC1C,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAS,QAAA;;IACtB,SAAAK,cAAQ,CAARC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,C"}

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

@@ -1,4 +1,4 @@
-import ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownMenu.vue.script.js";
+import ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownMenu.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarDropdown/ScalarDropdownMenu.vue
 var ScalarDropdownMenu_default = ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"\n      cx(\n        'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarDropdownMenu.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"\n      cx(\n        'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,23 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+//#region src/components/ScalarDropdown/ScalarDropdownMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1 rounded-[inherit]" };
+var _hoisted_2 = { class: "flex flex-col p-0.75" };
+var ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarDropdownMenu",
+	props: { is: {} },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), normalizeProps(guardReactiveProps(unref(cx)("relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border"))), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])])])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarDropdownMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_createElementVNode","_renderSlot"],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"\n      cx(\n        'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,UAAU;;GAIvB,OAAAA,UAAA,GAAAC,YAgBYC,wBAfL,QAAA,MAAE,KAAA,GAAAC,eAAAC,mBACQC,MAAA,EAAA,CAAE,C;IAMjB,SAAAC,cAOM,CAPNC,mBAOM,OAPN,YAOM,CALJC,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHLD,mBAEM,OAFN,YAEM,CADJC,WAAQ,KAAA,QAAA,SAAA,C"}

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

@@ -1,4 +1,4 @@
-import ScalarErrorBoundary_vue_vue_type_script_setup_true_lang_default from "./ScalarErrorBoundary.vue.script.js";
+import ScalarErrorBoundary_vue_vue_type_script_setup_true_lang_default from "./ScalarErrorBoundary.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue
 var ScalarErrorBoundary_default = ScalarErrorBoundary_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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 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":""}
+{"version":3,"file":"ScalarErrorBoundary.vue.js","names":["_sfc_main"],"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=\"bg-b-2 rounded border p-3 text-sm\">\n    <div class=\"p-2\">Oops, something went wrong here.</div>\n    <div\n      v-if=\"error\"\n      class=\"bg-b-1 font-code text-c-2 mt-2 rounded border p-2\">\n      {{ error?.name }}: {{ error?.message }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}