@scalar/components 0.20.11 → 0.21.0

package/dist/components/ScalarCopy/ScalarCopyButton.vue.script.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 py-1.5 mask-y-from-[calc(100%-8px)] mask-y-to-100%"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "whitespace-nowrap px-1.5"
+};
+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: "bg-inherit rounded-[inherit] absolute inset-0 -z-1" }, null, -1)),
+				createElementVNode("div", { class: normalizeClass(["group/copy-label absolute flex items-center -inset-y-0.5 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(["whitespace-nowrap px-1.5", { "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.script.js.map

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

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

package/dist/components/ScalarCopy/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ScalarCopy } from './ScalarCopy.vue';
-export { default as ScalarCopyBackdrop } from './ScalarCopyBackdrop.vue';
-export { default as ScalarCopyButton } from './ScalarCopyButton.vue';
+export { default as ScalarCopy } from './ScalarCopy.vue.js';
+export { default as ScalarCopyBackdrop } from './ScalarCopyBackdrop.vue.js';
+export { default as ScalarCopyButton } from './ScalarCopyButton.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,7 @@
+import ScalarDropdown_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdown.vue.script.js";
+//#region src/components/ScalarDropdown/ScalarDropdown.vue
+var ScalarDropdown_default = ScalarDropdown_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarDropdown_default as default };
+
+//# sourceMappingURL=ScalarDropdown.vue.js.map

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

@@ -0,0 +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  if (open.value) menuRef.value?.focus()\n}\n\n/** Handle keydown events on the target */\nasync function handleTargetKeydown(event: KeyboardEvent) {\n  // Only handle the keys that are relevant to the dropdown\n  if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key))\n    event.preventDefault()\n  else return\n\n  // Open the dropdown if it's not open\n  if (!open.value) open.value = true\n\n  // Move the active item if the key is an arrow key or space or enter\n  await nextTick()\n\n  // Focus the menu\n  menuRef.value?.focus()\n\n  // Move the active item if the key is an arrow key or space or enter\n  if (['ArrowDown', ' ', 'Enter'].includes(event.key)) moveActive(1)\n  else if (event.key === 'ArrowUp') moveActive(-1)\n}\n\n/** Watch the target reference for changes */\nwatch(\n  () => floatingRef.value?.targetRef,\n  (newTarget, oldTarget) => {\n    if (newTarget) {\n      // Create an id for the target if it doesn't have one\n      if (newTarget.id) targetId.value = newTarget.id\n      else {\n        targetId.value = fallbackTargetId\n        newTarget.setAttribute('id', targetId.value)\n      }\n      // Set the aria attributes\n      newTarget.setAttribute('aria-haspopup', 'menu')\n      newTarget.setAttribute('aria-expanded', `${open.value}`)\n      if (open.value) newTarget.setAttribute('aria-controls', menuId)\n      // Add the event listeners\n      newTarget.addEventListener('click', handleTargetClick)\n      newTarget.addEventListener('keydown', handleTargetKeydown)\n    }\n    if (oldTarget && oldTarget !== newTarget) {\n      // Remove the id if it's using the fallback id\n      if (oldTarget.id === fallbackTargetId) oldTarget.removeAttribute('id')\n      // Remove the aria attributes\n      oldTarget.removeAttribute('aria-controls')\n      oldTarget.removeAttribute('aria-haspopup')\n      oldTarget.removeAttribute('aria-expanded')\n      // Remove the event listeners\n      oldTarget.removeEventListener('click', handleTargetClick)\n      oldTarget.removeEventListener('keydown', handleTargetKeydown)\n    }\n  },\n  { immediate: true },\n)\n\n/** Watch the open state for changes */\nwatch(\n  open,\n  (o) => {\n    const target = floatingRef.value?.targetRef\n    if (!target) return\n    // Update the aria-expanded attribute on the target\n    target.setAttribute('aria-expanded', `${o}`)\n    if (o) target.setAttribute('aria-controls', menuId)\n    else target.removeAttribute('aria-controls')\n  },\n  { immediate: true },\n)\n\nasync function handleClose() {\n  // Move focus back to the target\n  floatingRef.value?.targetRef?.focus()\n  // Close the dropdown\n  open.value = false\n}\n\nfunction handleSelected() {\n  if (!active.value || !menuRef.value) return\n\n  const button = menuRef.value.querySelector<HTMLElement>(\n    `#${active.value}[role=\"menuitem\"]:not([aria-disabled=\"true\"])`,\n  )\n\n  if (!button) return\n\n  button.click()\n\n  handleClose()\n}\n\n/** Move the active item in the dropdown */\nfunction moveActive(dir: 1 | -1) {\n  if (!open.value || !menuRef.value) return\n\n  // Get all menu items, filtering out disabled ones\n  const list = Array.from(\n    menuRef.value.querySelectorAll<HTMLElement>(\n      '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n    ),\n  )\n\n  if (list.length === 0) return\n\n  // Find the current active item's index\n  const activeIdx = list.findIndex((item) => item.id === active.value)\n\n  if (activeIdx === -1) {\n    // If there is no active item, activate the first or last item\n    const targetItem = list[dir > 0 ? 0 : list.length - 1]\n    if (targetItem?.id) active.value = targetItem.id\n    return\n  }\n\n  // Calculate next index and exit if it's out of bounds\n  const nextIdx = activeIdx + dir\n\n  if (nextIdx < 0 || nextIdx > list.length - 1) {\n    return\n  }\n\n  const nextItem = list[nextIdx]\n\n  if (nextItem?.id) active.value = nextItem.id\n}\n\n/** Close the dropdown if the user clicks outside of the menu and button */\nonClickOutside(menuRef, handleClose, {\n  ignore: [computed(() => floatingRef.value?.targetRef)],\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarFloating\n    ref=\"floatingRef\"\n    v-bind=\"$props\"\n    :placement=\"placement ?? 'bottom-start'\">\n    <slot :open />\n    <template\n      v-if=\"open\"\n      #floating=\"{ width }\">\n      <!-- Background container -->\n      <ScalarDropdownMenu\n        :style=\"{ width }\"\n        v-bind=\"cx('max-h-[inherit] max-w-[inherit]')\">\n        <template #menu>\n          <div\n            :id=\"menuId\"\n            ref=\"menuRef\"\n            :aria-activedescendant=\"active\"\n            :aria-labelledby=\"targetId\"\n            class=\"flex flex-col p-0.75 outline-none\"\n            role=\"menu\"\n            tabindex=\"-1\"\n            @click.stop=\"handleClose\"\n            @keydown.down.prevent.stop=\"moveActive(1)\"\n            @keydown.enter.prevent.stop=\"handleSelected\"\n            @keydown.escape.prevent.stop=\"handleClose\"\n            @keydown.space.prevent.stop=\"handleSelected\"\n            @keydown.tab.prevent.stop=\"handleClose\"\n            @keydown.up.prevent.stop=\"moveActive(-1)\">\n            <slot\n              name=\"items\"\n              :open />\n          </div>\n        </template>\n      </ScalarDropdownMenu>\n    </template>\n  </ScalarFloating>\n</template>\n"],"mappings":""}

package/dist/components/ScalarDropdown/ScalarDropdown.vue.script.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();
+		}
+		/** 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();
+			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.script.js.map

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

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

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

@@ -0,0 +1,9 @@
+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                                   */
+//#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-6660bbc5"]]);
+//#endregion
+export { ScalarDropdownButton_default as default };
+
+//# sourceMappingURL=ScalarDropdownButton.vue.js.map

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

@@ -0,0 +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 px-2.5 py-1.5 text-left',\n    // Text / background style\n    'truncate  no-underline text-sm text-c-1',\n    // Interaction\n    'cursor-pointer hover: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  filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.script.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 px-2.5 py-1.5 text-left",
+				"truncate  no-underline text-sm text-c-1",
+				"cursor-pointer hover: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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownButton.vue.script.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 px-2.5 py-1.5 text-left',\n    // Text / background style\n    'truncate  no-underline text-sm text-c-1',\n    // Interaction\n    'cursor-pointer hover: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  filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAEA;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,gCAAgC;IAClD,QAAQ,EAAE,MAAM,IAAI;IACrB;GACD,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;IAAU,CAAC;GACvE,CAAA;;uBAGC,YAOY,wBANL,QAAA,GAAE,EAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,GAAE,CAAA,wBAAyB,MAAA,SAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}

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

@@ -0,0 +1,13 @@
+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 { createElementBlock, openBlock } from "vue";
+//#region src/components/ScalarDropdown/ScalarDropdownDivider.vue
+var _hoisted_1 = { class: "-mx-0.75 my-0.75 h-border bg-border" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1);
+}
+var ScalarDropdownDivider_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarDropdownDivider_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+//#endregion
+export { ScalarDropdownDivider_default as default };
+
+//# sourceMappingURL=ScalarDropdownDivider.vue.js.map

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

@@ -0,0 +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,uCAAqC;;qBAAhD,mBAAmD,OAAnD,WAAmD"}

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue.script.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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownDivider.vue.script.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":";;;;;;;;;;;;;;;;;AAiBA,IAAA,yDAAe,EAAC"}

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

@@ -0,0 +1,9 @@
+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                                 */
+//#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
+export { ScalarDropdownItem_default as default };
+
+//# sourceMappingURL=ScalarDropdownItem.vue.js.map

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

@@ -0,0 +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":""}

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.script.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.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownItem.vue.script.js","names":["$emit"],"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,iBAAgB;;uBAGjC,YASuB,8BAAA;IARpB,IAAA,QAAA;IACA,QAAQ,MAAA,OAAM,KAAK,QAAA;IACnB,UAAA,QAAA;IACD,MAAK;IACL,UAAS;IACR,SAAK,OAAA,OAAA,OAAA,MAAG,MAAkBA,KAAAA,MAAK,SAAU,EAAC;IAC1C,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAS,QAAA;;2BACd,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownMenu.vue.script.js";
+//#region src/components/ScalarDropdown/ScalarDropdownMenu.vue
+var ScalarDropdownMenu_default = ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarDropdownMenu_default as default };
+
+//# sourceMappingURL=ScalarDropdownMenu.vue.js.map

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

@@ -0,0 +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\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\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  /** Overrides the backdrop for the dropdown */\n  backdrop?(): 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=\"cx('relative flex w-56')\">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n      <slot name=\"backdrop\">\n        <ScalarFloatingBackdrop />\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,24 @@
+import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, 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" };
+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"))), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])]), renderSlot(_ctx.$slots, "backdrop", {}, () => [createVNode(unref(ScalarFloatingBackdrop_default))])])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarDropdownMenu.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownMenu.vue.script.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\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\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  /** Overrides the backdrop for the dropdown */\n  backdrop?(): 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=\"cx('relative flex w-56')\">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n      <slot name=\"backdrop\">\n        <ScalarFloatingBackdrop />\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;EAuCA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,YAeY,wBAdL,QAAA,MAAE,MAAA,EAAA,eAAA,mBACC,MAAA,GAAE,CAAA,qBAAA,CAAA,CAAA,EAAA;2BAYJ,CAVN,mBAUM,OAVN,YAUM,CARJ,WAIO,KAAA,QAAA,QAAA,EAAA,QAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA,EAGZ,WAEO,KAAA,QAAA,YAAA,EAAA,QAAA,CADL,YAA0B,MAAA,+BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarDropdown/index.d.ts

@@ -1,6 +1,6 @@
-export { default as ScalarDropdown } from './ScalarDropdown.vue';
-export { default as ScalarDropdownButton } from './ScalarDropdownButton.vue';
-export { default as ScalarDropdownDivider } from './ScalarDropdownDivider.vue';
-export { default as ScalarDropdownItem } from './ScalarDropdownItem.vue';
-export { default as ScalarDropdownMenu } from './ScalarDropdownMenu.vue';
+export { default as ScalarDropdown } from './ScalarDropdown.vue.js';
+export { default as ScalarDropdownButton } from './ScalarDropdownButton.vue.js';
+export { default as ScalarDropdownDivider } from './ScalarDropdownDivider.vue.js';
+export { default as ScalarDropdownItem } from './ScalarDropdownItem.vue.js';
+export { default as ScalarDropdownMenu } from './ScalarDropdownMenu.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarDropdown/useDropdown.js

@@ -0,0 +1,20 @@
+import { inject, provide, ref } from "vue";
+//#region src/components/ScalarDropdown/useDropdown.ts
+/** The symbol for the dropdown context */
+var ACTIVE_SYMBOL = Symbol();
+/** Provides a ref for the currently active dropdown item */
+function useDropdown() {
+	const active = ref();
+	provide(ACTIVE_SYMBOL, active);
+	return { active };
+}
+/** Injects the ref for the currently active dropdown item */
+function useDropdownItem() {
+	const active = inject(ACTIVE_SYMBOL);
+	if (!active) console.warn("useDropdownItem must be used within a ScalarDropdown");
+	return { active };
+}
+//#endregion
+export { useDropdown, useDropdownItem };
+
+//# sourceMappingURL=useDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.js","names":[],"sources":["../../../src/components/ScalarDropdown/useDropdown.ts"],"sourcesContent":["import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'\n\n/** The symbol for the dropdown context */\nconst ACTIVE_SYMBOL = Symbol() as InjectionKey<Ref<string | undefined>>\n\n/** Provides a ref for the currently active dropdown item */\nexport function useDropdown() {\n  const active = ref<string>()\n  provide(ACTIVE_SYMBOL, active)\n\n  return { active }\n}\n\n/** Injects the ref for the currently active dropdown item */\nexport function useDropdownItem() {\n  const active = inject(ACTIVE_SYMBOL)\n  if (!active) {\n    console.warn('useDropdownItem must be used within a ScalarDropdown')\n  }\n  return { active }\n}\n"],"mappings":";;;AAGA,IAAM,gBAAgB,QAAQ;;AAG9B,SAAgB,cAAc;CAC5B,MAAM,SAAS,KAAa;AAC5B,SAAQ,eAAe,OAAO;AAE9B,QAAO,EAAE,QAAQ;;;AAInB,SAAgB,kBAAkB;CAChC,MAAM,SAAS,OAAO,cAAc;AACpC,KAAI,CAAC,OACH,SAAQ,KAAK,uDAAuD;AAEtE,QAAO,EAAE,QAAQ"}

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

@@ -0,0 +1,7 @@
+import ScalarErrorBoundary_vue_vue_type_script_setup_true_lang_default from "./ScalarErrorBoundary.vue.script.js";
+//#region src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue
+var ScalarErrorBoundary_default = ScalarErrorBoundary_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarErrorBoundary_default as default };
+
+//# sourceMappingURL=ScalarErrorBoundary.vue.js.map