@scalar/components 0.32.0 → 0.32.1

package/dist/components/ScalarCard/ScalarCardHeader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"names":[],"mappings":"AA8DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAsEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAQzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarCardHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"names":[],"mappings":"AA+DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAqEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAQzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCard/ScalarCardHeader.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-1 truncate\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCardHeader.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardHeader.vue.script.js

@@ -16,10 +16,10 @@ var ScalarCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const id = useId();
 		useCardHeading(id);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-header leading-[22px] font-medium py-[6.75px] px-3 shrink-0"))), {
+			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0"))), {
 				default: withCtx(() => [createElementVNode("div", {
 					id: unref(id),
-					class: "scalar-card-header-title min-w-0 flex-1 truncate"
+					class: "scalar-card-header-title min-w-0 flex-auto"
 				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)]),
 				_: 3
 			}, 16);

package/dist/components/ScalarCard/ScalarCardHeader.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardHeader.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-1 truncate\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAyBA,MAAM,EAAE,OAAO,UAAU;EAGzB,MAAM,KAAK,MAAM;EAGjB,eAAe,EAAE;;uBAGf,YAgBoB,2BAAA,eAAA,mBAfH,MAAA,EAAA,CAAE,CAAA,yEAAA,CAAA,CAAA,GAAA;2BASX,CAJN,mBAIM,OAAA;KAHH,IAAI,MAAA,EAAA;KACL,OAAM;QACN,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAGFA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarCardHeader.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAyBA,MAAM,EAAE,OAAO,UAAU;EAGzB,MAAM,KAAK,MAAM;EAGjB,eAAe,EAAE;;uBAGf,YAiBoB,2BAAA,eAAA,mBAhBH,MAAA,EAAA,CAAE,CAAA,2FAAA,CAAA,CAAA,GAAA;2BAUX,CAJN,mBAIM,OAAA;KAHH,IAAI,MAAA,EAAA;KACL,OAAM;QACN,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAGFA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AA8OA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAK9E;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAiLlB,0CAA0C;WACjC,OAAO;;;;IADhB,0CAA0C;WACjC,OAAO;;;;IA7Kd,kEAAkE;oBAClD;QACd,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;IACX,iCAAiC;kBACnB;QACZ,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;EAoST,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AA+OA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAK9E;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAkLlB,0CAA0C;WACjC,OAAO;;;;IADhB,0CAA0C;WACjC,OAAO;;;;IA9Kd,kEAAkE;oBAClD;QACd,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;IACX,iCAAiC;kBACnB;QACZ,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;EAqST,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/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  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":""}
+{"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":""}

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

@@ -46,7 +46,7 @@ var ScalarDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		async function handleTargetClick() {
 			open.value = !open.value;
 			await nextTick();
-			if (open.value) menuRef.value?.focus();
+			if (open.value) menuRef.value?.focus({ preventScroll: true });
 		}
 		/** Handle keydown events on the target */
 		async function handleTargetKeydown(event) {
@@ -59,7 +59,7 @@ var ScalarDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			else return;
 			if (!open.value) open.value = true;
 			await nextTick();
-			menuRef.value?.focus();
+			menuRef.value?.focus({ preventScroll: true });
 			if ([
 				"ArrowDown",
 				" ",

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

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

@@ -1458,6 +1458,10 @@
   flex: 1;
 }
 
+.scalar-app .flex-auto {
+  flex: auto;
+}
+
 .scalar-app .flex-shrink, .scalar-app .shrink {
   flex-shrink: 1;
 }
@@ -1692,6 +1696,10 @@
   column-gap: 16px;
 }
 
+.scalar-app .gap-y-1 {
+  row-gap: 4px;
+}
+
 .scalar-app .gap-y-8 {
   row-gap: 32px;
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.32.0",
+  "version": "0.32.1",
   "engines": {
     "node": ">=22"
   },