@scalar/components 0.29.1 → 0.29.3

package/dist/components/ScalarCard/useCardHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCardHeading.js","names":[],"sources":["../../../src/components/ScalarCard/useCardHeading.ts"],"sourcesContent":["import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'\n\n/**\n * Tracks the region heading id for card accessibility\n */\nconst CARD_Heading_SYMBOL = Symbol() as InjectionKey<Ref<string | undefined>>\n\n/**\n * Set the region heading id for a ScalarCardHeader component.\n *\n * This should be called from ScalarCardHeader components.\n */\nexport const useCardHeading = (id: string) => {\n  const region = inject(CARD_Heading_SYMBOL, undefined)\n  if (region) {\n    region.value = id\n  }\n}\n\n/**\n * Get the region heading id if set.\n *\n * This should be called from ScalarCard components.\n */\nexport const useCardRegion = () => {\n  // Create a new ref for any child nested items to update\n  const id = ref<string>()\n  provide(CARD_Heading_SYMBOL, id)\n\n  return {\n    /** The region heading id ref */\n    id,\n  }\n}\n"],"mappings":";;;;;AAKA,IAAM,sBAAsB,OAAO;;;;;;AAOnC,IAAa,kBAAkB,OAAe;CAC5C,MAAM,SAAS,OAAO,qBAAqB,KAAA,CAAS;CACpD,IAAI,QACF,OAAO,QAAQ;AAEnB;;;;;;AAOA,IAAa,sBAAsB;CAEjC,MAAM,KAAK,IAAY;CACvB,QAAQ,qBAAqB,EAAE;CAE/B,OAAO;;AAEL,GACF;AACF"}
+{"version":3,"file":"useCardHeading.js","names":[],"sources":["../../../src/components/ScalarCard/useCardHeading.ts"],"sourcesContent":["import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'\n\n/**\n * Tracks the region heading id for card accessibility\n */\nconst CARD_Heading_SYMBOL: InjectionKey<Ref<string | undefined>> = Symbol()\n\n/**\n * Set the region heading id for a ScalarCardHeader component.\n *\n * This should be called from ScalarCardHeader components.\n */\nexport const useCardHeading = (id: string) => {\n  const region = inject(CARD_Heading_SYMBOL, undefined)\n  if (region) {\n    region.value = id\n  }\n}\n\n/**\n * Get the region heading id if set.\n *\n * This should be called from ScalarCard components.\n */\nexport const useCardRegion = () => {\n  // Create a new ref for any child nested items to update\n  const id = ref<string>()\n  provide(CARD_Heading_SYMBOL, id)\n\n  return {\n    /** The region heading id ref */\n    id,\n  }\n}\n"],"mappings":";;;;;AAKA,IAAM,sBAA6D,OAAO;;;;;;AAO1E,IAAa,kBAAkB,OAAe;CAC5C,MAAM,SAAS,OAAO,qBAAqB,KAAA,CAAS;CACpD,IAAI,QACF,OAAO,QAAQ;AAEnB;;;;;;AAOA,IAAa,sBAAsB;CAEjC,MAAM,KAAK,IAAY;CACvB,QAAQ,qBAAqB,EAAE;CAE/B,OAAO;;AAEL,GACF;AACF"}

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

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

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

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

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

@@ -10,7 +10,7 @@ var ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	setup(__props) {
 		const variants = cva({
 			base: [
-				"block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left",
+				"block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left",
 				"truncate  no-underline text-sm text-c-1",
 				"cursor-pointer hover:bg-b-2 highlighted:bg-b-2"
 			],

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

@@ -1 +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 — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n    // Radix keyboard navigation and mouse-hover within Radix menu items\n    'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAGA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,+BAA+B;IACjD,QAAQ,EAAE,MAAM,GAAG;GACrB;GACA,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;GAAS,CAAC;EACvE,CAAC;;uBAGC,YAOY,wBANL,QAAA,EAAE,GAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,EAAA,CAAE,CAAA,wBAAyB,MAAA,QAAA,CAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;IAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA"}
+{"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-md px-2.5 py-1.5 text-left',\n    // Text / background style\n    'truncate  no-underline text-sm text-c-1',\n    // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n    // Radix keyboard navigation and mouse-hover within Radix menu items\n    'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAGA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,+BAA+B;IACjD,QAAQ,EAAE,MAAM,GAAG;GACrB;GACA,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;GAAS,CAAC;EACvE,CAAC;;uBAGC,YAOY,wBANL,QAAA,EAAE,GAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,EAAA,CAAE,CAAA,wBAAyB,MAAA,QAAA,CAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;IAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AAgEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;IAChB,8CAA8C;iBACjC,OAAO;EAwElB,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":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AAgEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;IAChB,8CAA8C;iBACjC,OAAO;EA6ElB,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/ScalarDropdownMenu.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\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":""}
+{"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 class=\"rounded-xl border shadow-md\" />\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

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

@@ -12,7 +12,7 @@ var ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		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))])])]),
+				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), { class: "rounded-xl border shadow-md" })])])]),
 				_: 3
 			}, 16);
 		};

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

@@ -1 +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,UAAU;;uBAIvB,YAeY,wBAdL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACC,MAAA,EAAA,CAAE,CAAA,oBAAA,CAAA,CAAA,GAAA;2BAYJ,CAVN,mBAUM,OAVN,YAUM,CARJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,GAGZ,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADL,YAA0B,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"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 class=\"rounded-xl border shadow-md\" />\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;EAuCA,MAAM,EAAE,OAAO,UAAU;;uBAIvB,YAeY,wBAdL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACC,MAAA,EAAA,CAAE,CAAA,oBAAA,CAAA,CAAA,GAAA;2BAYJ,CAVN,mBAUM,OAVN,YAUM,CARJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,GAGZ,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADL,YAA8D,MAAA,8BAAA,GAAA,EAAtC,OAAM,8BAA6B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +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,OAAO;;AAG7B,SAAgB,cAAc;CAC5B,MAAM,SAAS,IAAY;CAC3B,QAAQ,eAAe,MAAM;CAE7B,OAAO,EAAE,OAAO;AAClB;;AAGA,SAAgB,kBAAkB;CAChC,MAAM,SAAS,OAAO,aAAa;CACnC,IAAI,CAAC,QACH,QAAQ,KAAK,sDAAsD;CAErE,OAAO,EAAE,OAAO;AAClB"}
+{"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: InjectionKey<Ref<string | undefined>> = Symbol()\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,gBAAuD,OAAO;;AAGpE,SAAgB,cAAc;CAC5B,MAAM,SAAS,IAAY;CAC3B,QAAQ,eAAe,MAAM;CAE7B,OAAO,EAAE,OAAO;AAClB;;AAGA,SAAgB,kBAAkB;CAChC,MAAM,SAAS,OAAO,aAAa;CACnC,IAAI,CAAC,QACH,QAAQ,KAAK,sDAAsD;CAErE,OAAO,EAAE,OAAO;AAClB"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFileUpload.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFileUpload/ScalarFileUpload.vue"],"names":[],"mappings":"AAmLA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAMpD,OAAO,EAAE,KAAK,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG7D;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,6CAA6C;eAClC,OAAO;IAClB;;;;OAIG;aACM,aAAa,GAAG,MAAM;IAC/B,yCAAyC;aAChC,YAAY;IACrB,yCAAyC;cAC/B,SAAS,GAAG,SAAS;;IAoFjC,yBAAyB;iBACZ,IAAI,EAAE;IACnB,wBAAwB;YACd,MAAM;;;;;;;IAlGd,6CAA6C;eAClC,OAAO;IAClB;;;;OAIG;aACM,aAAa,GAAG,MAAM;IAC/B,yCAAyC;aAChC,YAAY;IACrB,yCAAyC;cAC/B,SAAS,GAAG,SAAS;;IAoFjC,yBAAyB;iBACZ,IAAI,EAAE;IACnB,wBAAwB;YACd,MAAM;;;;;;IAvEd,gCAAgC;oBACd;QAChB,2CAA2C;QAC3C,IAAI,EAAE,MAAM,IAAI,CAAA;KACjB,GAAG,OAAO;IACX,yBAAyB;cACb,OAAO;IACnB,sCAAsC;sBACpB,OAAO;IACzB,qCAAqC;4BACb,OAAO;EAgO7B,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":"ScalarFileUpload.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFileUpload/ScalarFileUpload.vue"],"names":[],"mappings":"AAsLA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAMpD,OAAO,EAAE,KAAK,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG7D;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,6CAA6C;eAClC,OAAO;IAClB;;;;OAIG;aACM,aAAa,GAAG,MAAM;IAC/B,yCAAyC;aAChC,YAAY;IACrB,yCAAyC;cAC/B,SAAS,GAAG,SAAS;;IAuFjC,yBAAyB;iBACZ,IAAI,EAAE;IACnB,wBAAwB;YACd,MAAM;;;;;;;IArGd,6CAA6C;eAClC,OAAO;IAClB;;;;OAIG;aACM,aAAa,GAAG,MAAM;IAC/B,yCAAyC;aAChC,YAAY;IACrB,yCAAyC;cAC/B,SAAS,GAAG,SAAS;;IAuFjC,yBAAyB;iBACZ,IAAI,EAAE;IACnB,wBAAwB;YACd,MAAM;;;;;;IA1Ed,gCAAgC;oBACd;QAChB,2CAA2C;QAC3C,IAAI,EAAE,MAAM,IAAI,CAAA;KACjB,GAAG,OAAO;IACX,yBAAyB;cACb,OAAO;IACnB,sCAAsC;sBACpB,OAAO;IACzB,qCAAqC;4BACb,OAAO;EAmO7B,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/ScalarFileUpload/ScalarFileUpload.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFileUpload.vue.js","names":[],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUpload.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar File Upload component\n *\n * @example\n * <ScalarFileUpload @selected=\"handleSelected\" />\n *\n * @example\n * <ScalarFileUpload v-slot=\"{ open }\">\n *   <ScalarButton @click=\"open\">Select files</ScalarButton>\n * </ScalarFileUpload>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport type { LoadingState } from '../ScalarLoading'\nimport ScalarFileUploadDropTarget from './ScalarFileUploadDropTarget.vue'\nimport ScalarFileUploadError from './ScalarFileUploadError.vue'\nimport ScalarFileUploadInput from './ScalarFileUploadInput.vue'\nimport ScalarFileUploadInputCompact from './ScalarFileUploadInputCompact.vue'\nimport ScalarFileUploadLoading from './ScalarFileUploadLoading.vue'\nimport { type ExtensionList, isExtensionList } from './types'\n\nconst {\n  variant = 'default',\n  multiple,\n  accept = '*',\n} = defineProps<{\n  /** Whether multiple files can be uploaded */\n  multiple?: boolean\n  /**\n   * Accepted file types\n   * @default '*'\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   */\n  accept?: ExtensionList | string\n  /** Whether the file upload is loading */\n  loader?: LoadingState\n  /** Whether the file upload is compact */\n  variant?: 'compact' | 'default'\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the user selects files */\n  (e: 'selected', value: File[]): void\n}>()\n\ndefineSlots<{\n  /** Override the entire input */\n  'default'?(props: {\n    /** Open the file dialog to select files */\n    open: () => void\n  }): unknown\n  /** Override the label */\n  'label'?(): unknown\n  /** Override the entire drop target */\n  'drop-target'?(): unknown\n  /** Override the drop target label */\n  'drop-target-label'?(): unknown\n}>()\n\n/** The selected files */\nconst files = defineModel<File[]>()\n\n/** The error message */\nconst error = defineModel<string>('error')\n\n/** The hidden input element */\nconst input = ref<HTMLInputElement>()\n\n/** Whether the mouse is hovering over the file upload component */\nconst dragover = ref(false)\n\n/** Opens the file dialog to select files */\nfunction openFileDialog() {\n  input.value?.click()\n}\n\n/** Handles a list of files */\nfunction handleFileList(fileList?: FileList | null) {\n  error.value = undefined\n\n  // Use DataTransfer interface to access the file(s)\n  if (!fileList || fileList.length < 1) {\n    error.value = `No files found to upload`\n    return\n  }\n  const f = Array.from(fileList)\n\n  if (!multiple && f.length > 1) {\n    error.value = `Too many files selected`\n    return\n  }\n\n  files.value = f\n  emit('selected', f)\n}\n\n/** Handles the change event from the input */\nfunction handleChange(event: Event) {\n  const f = (event.target as HTMLInputElement).files\n  handleFileList(f)\n}\n\n/** Handles a drop of files from the dropzone  */\nfunction handleDrop(e: DragEvent) {\n  dragover.value = false\n  handleFileList(e.dataTransfer?.files)\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col relative border-dashed border-1 has-[input:focus-visible]:outline outline-offset-1 rounded',\n      )\n    \"\n    @dragenter=\"dragover = true\"\n    @dragover.prevent\n    @drop.prevent=\"handleDrop\">\n    <slot :open=\"openFileDialog\">\n      <component\n        :is=\"\n          variant === 'compact'\n            ? ScalarFileUploadInputCompact\n            : ScalarFileUploadInput\n        \"\n        :extensions=\"isExtensionList(accept) ? accept : undefined\"\n        @click=\"openFileDialog\">\n        <template\n          v-if=\"$slots.label\"\n          #default>\n          <slot name=\"label\" />\n        </template>\n        <template\n          v-if=\"error\"\n          #sublabel>\n          <ScalarFileUploadError>{{ error }}</ScalarFileUploadError>\n        </template>\n      </component>\n    </slot>\n    <div\n      v-if=\"dragover\"\n      class=\"absolute inset-0\"\n      @dragleave=\"dragover = false\">\n      <slot name=\"drop-target\">\n        <ScalarFileUploadDropTarget>\n          <template\n            v-if=\"$slots['drop-target-label']\"\n            #default>\n            <slot name=\"drop-target-label\" />\n          </template>\n        </ScalarFileUploadDropTarget>\n      </slot>\n    </div>\n    <ScalarFileUploadLoading\n      v-if=\"loader?.isActive\"\n      :loader />\n    <input\n      ref=\"input\"\n      :accept=\"isExtensionList(accept) ? accept.join(',') : accept\"\n      class=\"sr-only\"\n      :multiple=\"multiple\"\n      type=\"file\"\n      @change=\"handleChange\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFileUpload.vue.js","names":[],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUpload.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar File Upload component\n *\n * @example\n * <ScalarFileUpload @selected=\"handleSelected\" />\n *\n * @example\n * <ScalarFileUpload v-slot=\"{ open }\">\n *   <ScalarButton @click=\"open\">Select files</ScalarButton>\n * </ScalarFileUpload>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport type { LoadingState } from '../ScalarLoading'\nimport ScalarFileUploadDropTarget from './ScalarFileUploadDropTarget.vue'\nimport ScalarFileUploadError from './ScalarFileUploadError.vue'\nimport ScalarFileUploadInput from './ScalarFileUploadInput.vue'\nimport ScalarFileUploadInputCompact from './ScalarFileUploadInputCompact.vue'\nimport ScalarFileUploadLoading from './ScalarFileUploadLoading.vue'\nimport { type ExtensionList, isExtensionList } from './types'\n\nconst {\n  variant = 'default',\n  multiple,\n  accept = '*',\n} = defineProps<{\n  /** Whether multiple files can be uploaded */\n  multiple?: boolean\n  /**\n   * Accepted file types\n   * @default '*'\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   */\n  accept?: ExtensionList | string\n  /** Whether the file upload is loading */\n  loader?: LoadingState\n  /** Whether the file upload is compact */\n  variant?: 'compact' | 'default'\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the user selects files */\n  (e: 'selected', value: File[]): void\n}>()\n\ndefineSlots<{\n  /** Override the entire input */\n  'default'?(props: {\n    /** Open the file dialog to select files */\n    open: () => void\n  }): unknown\n  /** Override the label */\n  'label'?(): unknown\n  /** Override the entire drop target */\n  'drop-target'?(): unknown\n  /** Override the drop target label */\n  'drop-target-label'?(): unknown\n}>()\n\n/** The selected files */\nconst files = defineModel<File[]>()\n\n/** The error message */\nconst error = defineModel<string>('error')\n\n/** The hidden input element */\nconst input = ref<HTMLInputElement>()\n\n/** Whether the mouse is hovering over the file upload component */\nconst dragover = ref(false)\n\n/** Opens the file dialog to select files */\nfunction openFileDialog() {\n  input.value?.click()\n}\n\n/** Handles a list of files */\nfunction handleFileList(fileList?: FileList | null) {\n  error.value = undefined\n\n  // Use DataTransfer interface to access the file(s)\n  if (!fileList || fileList.length < 1) {\n    error.value = `No files found to upload`\n    return\n  }\n  const f = Array.from(fileList)\n\n  if (!multiple && f.length > 1) {\n    error.value = `Too many files selected`\n    return\n  }\n\n  files.value = f\n  emit('selected', f)\n}\n\n/** Handles the change event from the input */\nfunction handleChange(event: Event) {\n  if (!(event.target instanceof HTMLInputElement)) {\n    return\n  }\n  const f = event.target.files\n  handleFileList(f)\n}\n\n/** Handles a drop of files from the dropzone  */\nfunction handleDrop(e: DragEvent) {\n  dragover.value = false\n  handleFileList(e.dataTransfer?.files)\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col relative border-dashed border-1 has-[input:focus-visible]:outline outline-offset-1 rounded',\n      )\n    \"\n    @dragenter=\"dragover = true\"\n    @dragover.prevent\n    @drop.prevent=\"handleDrop\">\n    <slot :open=\"openFileDialog\">\n      <component\n        :is=\"\n          variant === 'compact'\n            ? ScalarFileUploadInputCompact\n            : ScalarFileUploadInput\n        \"\n        :extensions=\"isExtensionList(accept) ? accept : undefined\"\n        @click=\"openFileDialog\">\n        <template\n          v-if=\"$slots.label\"\n          #default>\n          <slot name=\"label\" />\n        </template>\n        <template\n          v-if=\"error\"\n          #sublabel>\n          <ScalarFileUploadError>{{ error }}</ScalarFileUploadError>\n        </template>\n      </component>\n    </slot>\n    <div\n      v-if=\"dragover\"\n      class=\"absolute inset-0\"\n      @dragleave=\"dragover = false\">\n      <slot name=\"drop-target\">\n        <ScalarFileUploadDropTarget>\n          <template\n            v-if=\"$slots['drop-target-label']\"\n            #default>\n            <slot name=\"drop-target-label\" />\n          </template>\n        </ScalarFileUploadDropTarget>\n      </slot>\n    </div>\n    <ScalarFileUploadLoading\n      v-if=\"loader?.isActive\"\n      :loader />\n    <input\n      ref=\"input\"\n      :accept=\"isExtensionList(accept) ? accept.join(',') : accept\"\n      class=\"sr-only\"\n      :multiple=\"multiple\"\n      type=\"file\"\n      @change=\"handleChange\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -54,6 +54,7 @@ var ScalarFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		}
 		/** Handles the change event from the input */
 		function handleChange(event) {
+			if (!(event.target instanceof HTMLInputElement)) return;
 			const f = event.target.files;
 			handleFileList(f);
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFileUpload.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUpload.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar File Upload component\n *\n * @example\n * <ScalarFileUpload @selected=\"handleSelected\" />\n *\n * @example\n * <ScalarFileUpload v-slot=\"{ open }\">\n *   <ScalarButton @click=\"open\">Select files</ScalarButton>\n * </ScalarFileUpload>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport type { LoadingState } from '../ScalarLoading'\nimport ScalarFileUploadDropTarget from './ScalarFileUploadDropTarget.vue'\nimport ScalarFileUploadError from './ScalarFileUploadError.vue'\nimport ScalarFileUploadInput from './ScalarFileUploadInput.vue'\nimport ScalarFileUploadInputCompact from './ScalarFileUploadInputCompact.vue'\nimport ScalarFileUploadLoading from './ScalarFileUploadLoading.vue'\nimport { type ExtensionList, isExtensionList } from './types'\n\nconst {\n  variant = 'default',\n  multiple,\n  accept = '*',\n} = defineProps<{\n  /** Whether multiple files can be uploaded */\n  multiple?: boolean\n  /**\n   * Accepted file types\n   * @default '*'\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   */\n  accept?: ExtensionList | string\n  /** Whether the file upload is loading */\n  loader?: LoadingState\n  /** Whether the file upload is compact */\n  variant?: 'compact' | 'default'\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the user selects files */\n  (e: 'selected', value: File[]): void\n}>()\n\ndefineSlots<{\n  /** Override the entire input */\n  'default'?(props: {\n    /** Open the file dialog to select files */\n    open: () => void\n  }): unknown\n  /** Override the label */\n  'label'?(): unknown\n  /** Override the entire drop target */\n  'drop-target'?(): unknown\n  /** Override the drop target label */\n  'drop-target-label'?(): unknown\n}>()\n\n/** The selected files */\nconst files = defineModel<File[]>()\n\n/** The error message */\nconst error = defineModel<string>('error')\n\n/** The hidden input element */\nconst input = ref<HTMLInputElement>()\n\n/** Whether the mouse is hovering over the file upload component */\nconst dragover = ref(false)\n\n/** Opens the file dialog to select files */\nfunction openFileDialog() {\n  input.value?.click()\n}\n\n/** Handles a list of files */\nfunction handleFileList(fileList?: FileList | null) {\n  error.value = undefined\n\n  // Use DataTransfer interface to access the file(s)\n  if (!fileList || fileList.length < 1) {\n    error.value = `No files found to upload`\n    return\n  }\n  const f = Array.from(fileList)\n\n  if (!multiple && f.length > 1) {\n    error.value = `Too many files selected`\n    return\n  }\n\n  files.value = f\n  emit('selected', f)\n}\n\n/** Handles the change event from the input */\nfunction handleChange(event: Event) {\n  const f = (event.target as HTMLInputElement).files\n  handleFileList(f)\n}\n\n/** Handles a drop of files from the dropzone  */\nfunction handleDrop(e: DragEvent) {\n  dragover.value = false\n  handleFileList(e.dataTransfer?.files)\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col relative border-dashed border-1 has-[input:focus-visible]:outline outline-offset-1 rounded',\n      )\n    \"\n    @dragenter=\"dragover = true\"\n    @dragover.prevent\n    @drop.prevent=\"handleDrop\">\n    <slot :open=\"openFileDialog\">\n      <component\n        :is=\"\n          variant === 'compact'\n            ? ScalarFileUploadInputCompact\n            : ScalarFileUploadInput\n        \"\n        :extensions=\"isExtensionList(accept) ? accept : undefined\"\n        @click=\"openFileDialog\">\n        <template\n          v-if=\"$slots.label\"\n          #default>\n          <slot name=\"label\" />\n        </template>\n        <template\n          v-if=\"error\"\n          #sublabel>\n          <ScalarFileUploadError>{{ error }}</ScalarFileUploadError>\n        </template>\n      </component>\n    </slot>\n    <div\n      v-if=\"dragover\"\n      class=\"absolute inset-0\"\n      @dragleave=\"dragover = false\">\n      <slot name=\"drop-target\">\n        <ScalarFileUploadDropTarget>\n          <template\n            v-if=\"$slots['drop-target-label']\"\n            #default>\n            <slot name=\"drop-target-label\" />\n          </template>\n        </ScalarFileUploadDropTarget>\n      </slot>\n    </div>\n    <ScalarFileUploadLoading\n      v-if=\"loader?.isActive\"\n      :loader />\n    <input\n      ref=\"input\"\n      :accept=\"isExtensionList(accept) ? accept.join(',') : accept\"\n      class=\"sr-only\"\n      :multiple=\"multiple\"\n      type=\"file\"\n      @change=\"handleChange\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,OAAO;;EAoBb,MAAM,QAAQ,SAAmB,SAAA,YAAC;;EAGlC,MAAM,QAAQ,SAAmB,SAAC,OAAO;;EAGzC,MAAM,QAAQ,IAAsB;;EAGpC,MAAM,WAAW,IAAI,KAAK;;EAG1B,SAAS,iBAAiB;GACxB,MAAM,OAAO,MAAM;EACrB;;EAGA,SAAS,eAAe,UAA4B;GAClD,MAAM,QAAQ,KAAA;GAGd,IAAI,CAAC,YAAY,SAAS,SAAS,GAAG;IACpC,MAAM,QAAQ;IACd;GACF;GACA,MAAM,IAAI,MAAM,KAAK,QAAQ;GAE7B,IAAI,CAAC,QAAA,YAAY,EAAE,SAAS,GAAG;IAC7B,MAAM,QAAQ;IACd;GACF;GAEA,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;EACpB;;EAGA,SAAS,aAAa,OAAc;GAClC,MAAM,IAAK,MAAM,OAA4B;GAC7C,eAAe,CAAC;EAClB;;EAGA,SAAS,WAAW,GAAc;GAChC,SAAS,QAAQ;GACjB,eAAe,EAAE,cAAc,KAAK;EACtC;EAGA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAsDM,OAtDN,WACiB,MAAA,EAAA,CAAE,CAAA,0GAAA,GAAA;IAKhB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IACnB,YAAQ,OAAA,OAAA,OAAA,KAAA,oBAAT,CAAA,GAAiB,CAAA,SAAA,CAAA;IAChB,QAAI,cAAU,YAAU,CAAA,SAAA,CAAA;;IACzB,WAoBO,KAAA,QAAA,WAAA,EApBA,MAAM,eAAc,SAoBpB,EAAA,UAAA,GAnBL,YAkBY,wBAjBM,QAAA,YAAO,YAA6B,uCAA2C,6BAAA,GAAA;KAK9F,YAAY,MAAA,eAAA,CAAe,CAAC,QAAA,MAAM,IAAI,QAAA,SAAS,KAAA;KAC/C,SAAO;8BAEAA,KAAAA,OAAO,QAAA;WACZ;uBACoB,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;gBAGf,MAAA,QAAA;WACL;uBACyD,CAA1D,YAA0D,+BAAA,MAAA;6BAAxB,CAAA,gBAAA,gBAAR,MAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;IAK7B,SAAA,SAAA,UAAA,GADR,mBAaM,OAAA;;KAXJ,OAAM;KACL,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;QACpB,WAQO,KAAA,QAAA,eAAA,CAAA,SAAA,CAPL,YAM6B,oCAAA,MAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAJnBA,KAAAA,OAAM,uBAAA;WACX;uBACgC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAMjC,QAAA,QAAQ,YAAA,UAAA,GADhB,YAEY,iCAAA;;KAAT,QAAA,QAAA;;IACH,mBAM2B,SAAA;cALrB;KAAJ,KAAI;KACH,QAAQ,MAAA,eAAA,CAAe,CAAC,QAAA,MAAM,IAAI,QAAA,OAAO,KAAI,GAAA,IAAQ,QAAA;KACtD,OAAM;KACL,UAAU,QAAA;KACX,MAAK;KACJ,UAAQ"}
+{"version":3,"file":"ScalarFileUpload.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFileUpload/ScalarFileUpload.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar File Upload component\n *\n * @example\n * <ScalarFileUpload @selected=\"handleSelected\" />\n *\n * @example\n * <ScalarFileUpload v-slot=\"{ open }\">\n *   <ScalarButton @click=\"open\">Select files</ScalarButton>\n * </ScalarFileUpload>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport type { LoadingState } from '../ScalarLoading'\nimport ScalarFileUploadDropTarget from './ScalarFileUploadDropTarget.vue'\nimport ScalarFileUploadError from './ScalarFileUploadError.vue'\nimport ScalarFileUploadInput from './ScalarFileUploadInput.vue'\nimport ScalarFileUploadInputCompact from './ScalarFileUploadInputCompact.vue'\nimport ScalarFileUploadLoading from './ScalarFileUploadLoading.vue'\nimport { type ExtensionList, isExtensionList } from './types'\n\nconst {\n  variant = 'default',\n  multiple,\n  accept = '*',\n} = defineProps<{\n  /** Whether multiple files can be uploaded */\n  multiple?: boolean\n  /**\n   * Accepted file types\n   * @default '*'\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   */\n  accept?: ExtensionList | string\n  /** Whether the file upload is loading */\n  loader?: LoadingState\n  /** Whether the file upload is compact */\n  variant?: 'compact' | 'default'\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the user selects files */\n  (e: 'selected', value: File[]): void\n}>()\n\ndefineSlots<{\n  /** Override the entire input */\n  'default'?(props: {\n    /** Open the file dialog to select files */\n    open: () => void\n  }): unknown\n  /** Override the label */\n  'label'?(): unknown\n  /** Override the entire drop target */\n  'drop-target'?(): unknown\n  /** Override the drop target label */\n  'drop-target-label'?(): unknown\n}>()\n\n/** The selected files */\nconst files = defineModel<File[]>()\n\n/** The error message */\nconst error = defineModel<string>('error')\n\n/** The hidden input element */\nconst input = ref<HTMLInputElement>()\n\n/** Whether the mouse is hovering over the file upload component */\nconst dragover = ref(false)\n\n/** Opens the file dialog to select files */\nfunction openFileDialog() {\n  input.value?.click()\n}\n\n/** Handles a list of files */\nfunction handleFileList(fileList?: FileList | null) {\n  error.value = undefined\n\n  // Use DataTransfer interface to access the file(s)\n  if (!fileList || fileList.length < 1) {\n    error.value = `No files found to upload`\n    return\n  }\n  const f = Array.from(fileList)\n\n  if (!multiple && f.length > 1) {\n    error.value = `Too many files selected`\n    return\n  }\n\n  files.value = f\n  emit('selected', f)\n}\n\n/** Handles the change event from the input */\nfunction handleChange(event: Event) {\n  if (!(event.target instanceof HTMLInputElement)) {\n    return\n  }\n  const f = event.target.files\n  handleFileList(f)\n}\n\n/** Handles a drop of files from the dropzone  */\nfunction handleDrop(e: DragEvent) {\n  dragover.value = false\n  handleFileList(e.dataTransfer?.files)\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col relative border-dashed border-1 has-[input:focus-visible]:outline outline-offset-1 rounded',\n      )\n    \"\n    @dragenter=\"dragover = true\"\n    @dragover.prevent\n    @drop.prevent=\"handleDrop\">\n    <slot :open=\"openFileDialog\">\n      <component\n        :is=\"\n          variant === 'compact'\n            ? ScalarFileUploadInputCompact\n            : ScalarFileUploadInput\n        \"\n        :extensions=\"isExtensionList(accept) ? accept : undefined\"\n        @click=\"openFileDialog\">\n        <template\n          v-if=\"$slots.label\"\n          #default>\n          <slot name=\"label\" />\n        </template>\n        <template\n          v-if=\"error\"\n          #sublabel>\n          <ScalarFileUploadError>{{ error }}</ScalarFileUploadError>\n        </template>\n      </component>\n    </slot>\n    <div\n      v-if=\"dragover\"\n      class=\"absolute inset-0\"\n      @dragleave=\"dragover = false\">\n      <slot name=\"drop-target\">\n        <ScalarFileUploadDropTarget>\n          <template\n            v-if=\"$slots['drop-target-label']\"\n            #default>\n            <slot name=\"drop-target-label\" />\n          </template>\n        </ScalarFileUploadDropTarget>\n      </slot>\n    </div>\n    <ScalarFileUploadLoading\n      v-if=\"loader?.isActive\"\n      :loader />\n    <input\n      ref=\"input\"\n      :accept=\"isExtensionList(accept) ? accept.join(',') : accept\"\n      class=\"sr-only\"\n      :multiple=\"multiple\"\n      type=\"file\"\n      @change=\"handleChange\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,OAAO;;EAoBb,MAAM,QAAQ,SAAmB,SAAA,YAAC;;EAGlC,MAAM,QAAQ,SAAmB,SAAC,OAAO;;EAGzC,MAAM,QAAQ,IAAsB;;EAGpC,MAAM,WAAW,IAAI,KAAK;;EAG1B,SAAS,iBAAiB;GACxB,MAAM,OAAO,MAAM;EACrB;;EAGA,SAAS,eAAe,UAA4B;GAClD,MAAM,QAAQ,KAAA;GAGd,IAAI,CAAC,YAAY,SAAS,SAAS,GAAG;IACpC,MAAM,QAAQ;IACd;GACF;GACA,MAAM,IAAI,MAAM,KAAK,QAAQ;GAE7B,IAAI,CAAC,QAAA,YAAY,EAAE,SAAS,GAAG;IAC7B,MAAM,QAAQ;IACd;GACF;GAEA,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;EACpB;;EAGA,SAAS,aAAa,OAAc;GAClC,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;GAEF,MAAM,IAAI,MAAM,OAAO;GACvB,eAAe,CAAC;EAClB;;EAGA,SAAS,WAAW,GAAc;GAChC,SAAS,QAAQ;GACjB,eAAe,EAAE,cAAc,KAAK;EACtC;EAGA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAsDM,OAtDN,WACiB,MAAA,EAAA,CAAE,CAAA,0GAAA,GAAA;IAKhB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IACnB,YAAQ,OAAA,OAAA,OAAA,KAAA,oBAAT,CAAA,GAAiB,CAAA,SAAA,CAAA;IAChB,QAAI,cAAU,YAAU,CAAA,SAAA,CAAA;;IACzB,WAoBO,KAAA,QAAA,WAAA,EApBA,MAAM,eAAc,SAoBpB,EAAA,UAAA,GAnBL,YAkBY,wBAjBM,QAAA,YAAO,YAA6B,uCAA2C,6BAAA,GAAA;KAK9F,YAAY,MAAA,eAAA,CAAe,CAAC,QAAA,MAAM,IAAI,QAAA,SAAS,KAAA;KAC/C,SAAO;8BAEAA,KAAAA,OAAO,QAAA;WACZ;uBACoB,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;gBAGf,MAAA,QAAA;WACL;uBACyD,CAA1D,YAA0D,+BAAA,MAAA;6BAAxB,CAAA,gBAAA,gBAAR,MAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;IAK7B,SAAA,SAAA,UAAA,GADR,mBAaM,OAAA;;KAXJ,OAAM;KACL,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;QACpB,WAQO,KAAA,QAAA,eAAA,CAAA,SAAA,CAPL,YAM6B,oCAAA,MAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAJnBA,KAAAA,OAAM,uBAAA;WACX;uBACgC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAMjC,QAAA,QAAQ,YAAA,UAAA,GADhB,YAEY,iCAAA;;KAAT,QAAA,QAAA;;IACH,mBAM2B,SAAA;cALrB;KAAJ,KAAI;KACH,QAAQ,MAAA,eAAA,CAAe,CAAC,QAAA,MAAM,IAAI,QAAA,OAAO,KAAI,GAAA,IAAQ,QAAA;KACtD,OAAM;KACL,UAAU,QAAA;KACX,MAAK;KACJ,UAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAwJA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI9C;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IA8FhB,kCAAkC;;;IAjFlC,kEAAkE;eACvD,OAAO;IAClB,2BAA2B;qBACV;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO;EAgJT,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AA4LA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI9C;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAkIhB,kCAAkC;;;IArHlC,kEAAkE;eACvD,OAAO;IAClB,2BAA2B;qBACV;QACf,4FAA4F;QAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,6FAA6F;QAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gDAAgD;QAChD,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,OAAO;EAoLT,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFloating.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, nextTick, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\n\n/**\n * Starts Floating UI's `autoUpdate` one tick after both elements exist.\n *\n * `useFloating` attaches `autoUpdate` from a synchronous watch the moment the\n * template refs resolve, and `autoUpdate` positions the element right away.\n * Template refs resolve in the post-render phase of a flush, so that first\n * `computePosition` reads layout while the same flush is still mounting other\n * components: every floating element mounted together (for example the closed\n * listboxes of a schema with many compositions) forces its own style recalc and\n * layout on a tree that was dirtied again in between. Waiting for `nextTick`\n * runs every first positioning back-to-back once the flush has settled, so the\n * browser recalculates the tree once for all of them. The tick resolves before\n * the next paint, so an element that mounts open is positioned in the same task.\n */\nconst deferredAutoUpdate: typeof autoUpdate = (\n  reference,\n  floating,\n  update,\n  options,\n) => {\n  let cleanup: (() => void) | undefined\n  let disposed = false\n\n  void nextTick(() => {\n    if (!disposed) {\n      cleanup = autoUpdate(reference, floating, update, options)\n    }\n  })\n\n  return () => {\n    disposed = true\n    cleanup?.()\n  }\n}\n\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: deferredAutoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import ScalarTeleport_default from "../ScalarTeleport/ScalarTeleport.vue.js";
 import { useResizeWithTarget } from "./useResizeWithTarget.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { getSideAxis } from "@floating-ui/utils";
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/vue";
 var ScalarFloating_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -42,9 +42,34 @@ var ScalarFloating_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const targetSize = useResizeWithTarget(targetRef, { enabled: computed(() => __props.resize) });
 		const targetWidth = computed(() => getSideAxis(__props.placement ?? "bottom") === "y" ? targetSize.width.value : void 0);
 		const targetHeight = computed(() => getSideAxis(__props.placement ?? "bottom") === "x" ? targetSize.height.value : void 0);
+		/**
+		* Starts Floating UI's `autoUpdate` one tick after both elements exist.
+		*
+		* `useFloating` attaches `autoUpdate` from a synchronous watch the moment the
+		* template refs resolve, and `autoUpdate` positions the element right away.
+		* Template refs resolve in the post-render phase of a flush, so that first
+		* `computePosition` reads layout while the same flush is still mounting other
+		* components: every floating element mounted together (for example the closed
+		* listboxes of a schema with many compositions) forces its own style recalc and
+		* layout on a tree that was dirtied again in between. Waiting for `nextTick`
+		* runs every first positioning back-to-back once the flush has settled, so the
+		* browser recalculates the tree once for all of them. The tick resolves before
+		* the next paint, so an element that mounts open is positioned in the same task.
+		*/
+		const deferredAutoUpdate = (reference, floating, update, options) => {
+			let cleanup;
+			let disposed = false;
+			nextTick(() => {
+				if (!disposed) cleanup = autoUpdate(reference, floating, update, options);
+			});
+			return () => {
+				disposed = true;
+				cleanup?.();
+			};
+		};
 		const { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {
 			placement: computed(() => __props.placement ?? "bottom"),
-			whileElementsMounted: autoUpdate,
+			whileElementsMounted: deferredAutoUpdate,
 			middleware: computed(() => [
 				offset(__props.offset),
 				flip({ padding: 48 }),

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: autoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,cAAuC,IAAI,IAAI;EACrD,MAAM,aAAsC,IAAI,IAAI;EAEpD,MAAM,YAAY,eAAwC;GACxD,IAAI,OAAO,WAAW,eAAe,WAAW,OAAO;IAErD,IAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,MAAM;KACxC,IAAI,GACF,OAAO;KAET,QAAQ,KAAK,mCAAmC,QAAA,OAAO,YAAY;IACrE,OAEK,IAAI,QAAA,kBAAkB,aACzB,OAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;IAC/C,IAAI,sBAAsB,aACxB,OAAO;IAET,OAAO,WAAW;GACpB;EAGF,CAAC;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,MAAM,EAChC,CAAC;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,QAAQ,MAAM,MACnC,WAAW,MAAM,QACjB,KAAA,CACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,QAAQ,MAAM,MACnC,WAAW,OAAO,QAClB,KAAA,CACN;EACA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,QAAQ;GAC/C,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,MAAM;IACvB,KAAK,EAAE,SAAS,GAAG,CAAC;IACpB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;KAGnD,OAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,cAAc,IAAI,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,eAAe,IAAI,GAAG;KAClD,CAAC;IACH,EACF,CAAC;IACD,GAAG,QAAA;GACL,CAAC;EACH,CAAC;EAED,SAAa;;AAEX,UACF,CAAC;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAGFA,KAAAA,OAAO,YAAA,UAAA,GADf,YAciB,MAAA,sBAAA,GAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,cAAA,CAAc;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,cAAA;KACN,QAAQ,aAAA;KAER,OAAO,YAAA"}
+{"version":3,"file":"ScalarFloating.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Floating component\n *\n * Positions a floating element relative to a reference element\n * using Floating UI. Handles placement, offset, flipping, and resizing.\n *\n * @example\n * <ScalarFloating placement=\"bottom\">\n *   <button>Reference</button>\n *   <template #floating>Floating content</template>\n * </ScalarFloating>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { getSideAxis } from '@floating-ui/utils'\nimport {\n  type MiddlewareData,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { type Ref, computed, nextTick, ref } from 'vue'\n\nimport { ScalarTeleport } from '../ScalarTeleport'\nimport type { FloatingOptions } from './types'\nimport { useResizeWithTarget } from './useResizeWithTarget'\n\nconst {\n  placement,\n  offset = 5,\n  resize = false,\n  middleware = [],\n  target,\n  teleport,\n} = defineProps<FloatingOptions>()\n\ndefineSlots<{\n  /** The reference element for the element in the #floating slot */\n  default(): unknown\n  /** The floating element */\n  floating?(props: {\n    /** The width of the reference element if `resize` is true and placement is on the y axis */\n    width?: string\n    /** The height of the reference element if `resize` is true and placement is on the x axis */\n    height?: string\n    /** The middleware data return by Floating UI */\n    data?: MiddlewareData\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst floatingRef: Ref<HTMLElement | null> = ref(null)\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nconst targetRef = computed<HTMLElement | undefined>(() => {\n  if (typeof window !== 'undefined' && wrapperRef.value) {\n    // If target is a string (id), try to find it in the document\n    if (typeof target === 'string') {\n      const t = document.getElementById(target)\n      if (t) {\n        return t\n      }\n      console.warn(`ScalarFloating: Target with id=\"${target}\" not found`)\n    }\n    // If target is an HTMLElement, return it\n    else if (target instanceof HTMLElement) {\n      return target\n    }\n    // Fallback to div wrapper if no child element is provided\n    const firstChild = wrapperRef.value.children?.[0]\n    if (firstChild instanceof HTMLElement) {\n      return firstChild\n    }\n    return wrapperRef.value\n  }\n  // Return undefined if nothing is found\n  return undefined\n})\n\nconst targetSize = useResizeWithTarget(targetRef, {\n  enabled: computed(() => resize),\n})\n\nconst targetWidth = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'y'\n    ? targetSize.width.value\n    : undefined,\n)\n\nconst targetHeight = computed(() =>\n  getSideAxis(placement ?? 'bottom') === 'x'\n    ? targetSize.height.value\n    : undefined,\n)\n\n/**\n * Starts Floating UI's `autoUpdate` one tick after both elements exist.\n *\n * `useFloating` attaches `autoUpdate` from a synchronous watch the moment the\n * template refs resolve, and `autoUpdate` positions the element right away.\n * Template refs resolve in the post-render phase of a flush, so that first\n * `computePosition` reads layout while the same flush is still mounting other\n * components: every floating element mounted together (for example the closed\n * listboxes of a schema with many compositions) forces its own style recalc and\n * layout on a tree that was dirtied again in between. Waiting for `nextTick`\n * runs every first positioning back-to-back once the flush has settled, so the\n * browser recalculates the tree once for all of them. The tick resolves before\n * the next paint, so an element that mounts open is positioned in the same task.\n */\nconst deferredAutoUpdate: typeof autoUpdate = (\n  reference,\n  floating,\n  update,\n  options,\n) => {\n  let cleanup: (() => void) | undefined\n  let disposed = false\n\n  void nextTick(() => {\n    if (!disposed) {\n      cleanup = autoUpdate(reference, floating, update, options)\n    }\n  })\n\n  return () => {\n    disposed = true\n    cleanup?.()\n  }\n}\n\nconst { floatingStyles, middlewareData } = useFloating(targetRef, floatingRef, {\n  placement: computed(() => placement ?? 'bottom'),\n  whileElementsMounted: deferredAutoUpdate,\n  middleware: computed(() => [\n    offsetMiddleware(offset),\n    flip({ padding: 48 }),\n    shift({ padding: 8 }),\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        // Assign the max width and height to the floating element\n        // @see https://floating-ui.com/docs/size\n        Object.assign(elements.floating.style, {\n          maxWidth: `${Math.max(0, availableWidth) - 16}px`,\n          maxHeight: `${Math.max(0, availableHeight) - 16}px`,\n        })\n      },\n    }),\n    ...middleware,\n  ]),\n})\n\ndefineExpose({\n  /** The resolved target element */\n  targetRef,\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n  <ScalarTeleport\n    v-if=\"$slots.floating\"\n    :disabled=\"!teleport\"\n    :to=\"typeof teleport === 'string' ? teleport : undefined\">\n    <div\n      ref=\"floatingRef\"\n      class=\"relative z-context\"\n      :style=\"floatingStyles\">\n      <slot\n        :data=\"middlewareData\"\n        :height=\"targetHeight\"\n        name=\"floating\"\n        :width=\"targetWidth\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,cAAuC,IAAI,IAAI;EACrD,MAAM,aAAsC,IAAI,IAAI;EAEpD,MAAM,YAAY,eAAwC;GACxD,IAAI,OAAO,WAAW,eAAe,WAAW,OAAO;IAErD,IAAI,OAAO,QAAA,WAAW,UAAU;KAC9B,MAAM,IAAI,SAAS,eAAe,QAAA,MAAM;KACxC,IAAI,GACF,OAAO;KAET,QAAQ,KAAK,mCAAmC,QAAA,OAAO,YAAY;IACrE,OAEK,IAAI,QAAA,kBAAkB,aACzB,OAAO,QAAA;IAGT,MAAM,aAAa,WAAW,MAAM,WAAW;IAC/C,IAAI,sBAAsB,aACxB,OAAO;IAET,OAAO,WAAW;GACpB;EAGF,CAAC;EAED,MAAM,aAAa,oBAAoB,WAAW,EAChD,SAAS,eAAe,QAAA,MAAM,EAChC,CAAC;EAED,MAAM,cAAc,eAClB,YAAY,QAAA,aAAa,QAAQ,MAAM,MACnC,WAAW,MAAM,QACjB,KAAA,CACN;EAEA,MAAM,eAAe,eACnB,YAAY,QAAA,aAAa,QAAQ,MAAM,MACnC,WAAW,OAAO,QAClB,KAAA,CACN;;;;;;;;;;;;;;;EAgBA,MAAM,sBACJ,WACA,UACA,QACA,YACG;GACH,IAAI;GACJ,IAAI,WAAW;GAEf,eAAoB;IAClB,IAAI,CAAC,UACH,UAAU,WAAW,WAAW,UAAU,QAAQ,OAAO;GAE7D,CAAC;GAED,aAAa;IACX,WAAW;IACX,UAAU;GACZ;EACF;EAEA,MAAM,EAAE,gBAAgB,mBAAmB,YAAY,WAAW,aAAa;GAC7E,WAAW,eAAe,QAAA,aAAa,QAAQ;GAC/C,sBAAsB;GACtB,YAAY,eAAe;IACzB,OAAiB,QAAA,MAAM;IACvB,KAAK,EAAE,SAAS,GAAG,CAAC;IACpB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,EACH,MAAM,EAAE,gBAAgB,iBAAiB,YAAY;KAGnD,OAAO,OAAO,SAAS,SAAS,OAAO;MACrC,UAAU,GAAG,KAAK,IAAI,GAAG,cAAc,IAAI,GAAG;MAC9C,WAAW,GAAG,KAAK,IAAI,GAAG,eAAe,IAAI,GAAG;KAClD,CAAC;IACH,EACF,CAAC;IACD,GAAG,QAAA;GACL,CAAC;EACH,CAAC;EAED,SAAa;;AAEX,UACF,CAAC;;2DAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAGFA,KAAAA,OAAO,YAAA,UAAA,GADf,YAciB,MAAA,sBAAA,GAAA;;IAZd,UAAQ,CAAG,QAAA;IACX,IAAE,OAAS,QAAA,aAAQ,WAAgB,QAAA,WAAW,KAAA;;2BAUzC,CATN,mBASM,OAAA;cARA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,MAAA,cAAA,CAAc;QACtB,WAIyB,KAAA,QAAA,YAAA;KAHtB,MAAM,MAAA,cAAA;KACN,QAAQ,aAAA;KAER,OAAO,YAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarForm.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event as SubmitEvent)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarForm.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarForm.vue.script.js","names":["$emit"],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event as SubmitEvent)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":";;;;;;;EAwBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAIO,QAJP,WACU,MAGH,EAAA,CAHK,CAAA,eAAA,GAAA,EACT,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAUA,KAAAA,MAAK,UAAW,MAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,GAAA,CACvC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"ScalarForm.vue.script.js","names":["$emit"],"sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form component\n *\n * A form for creating and editing data.\n *\n * Automatically calls preventDefault on the form submit event.\n *\n * @example\n *   <ScalarForm>\n *     <!-- Form content -->\n *   </ScalarForm>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineEmits<{\n  /** Emitted when the form is submitted */\n  (e: 'submit', event: SubmitEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    v-bind=\"cx('flex flex-col')\"\n    @submit.prevent=\"$emit('submit', $event)\">\n    <slot />\n  </form>\n</template>\n"],"mappings":";;;;;;;EAwBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAIO,QAJP,WACU,MAGH,EAAA,CAHK,CAAA,eAAA,GAAA,EACT,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAUA,KAAAA,MAAK,UAAW,MAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,GAAA,CACvC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/components/ScalarForm/useFormGroups.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormGroups.js","names":[],"sources":["../../../src/components/ScalarForm/useFormGroups.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\n/**\n * Tells a ScalarFormInput component that it is in a form group.\n */\nconst FORM_GROUP_SYMBOL = Symbol() as InjectionKey<boolean>\n\n/**\n * Check if we're in a form group.\n *\n * This is called from ScalarFormInput components.\n */\nexport const useFormGroupInput = () => {\n  return inject(FORM_GROUP_SYMBOL, false)\n}\n\n/**\n * Set that this is a form group.\n *\n * This is called from ScalarFormInputGroup components.\n */\nexport const useFormGroup = () => {\n  provide(FORM_GROUP_SYMBOL, true)\n}\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,OAAO;;;;;;AAOjC,IAAa,0BAA0B;CACrC,OAAO,OAAO,mBAAmB,KAAK;AACxC;;;;;;AAOA,IAAa,qBAAqB;CAChC,QAAQ,mBAAmB,IAAI;AACjC"}
+{"version":3,"file":"useFormGroups.js","names":[],"sources":["../../../src/components/ScalarForm/useFormGroups.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\n/**\n * Tells a ScalarFormInput component that it is in a form group.\n */\nconst FORM_GROUP_SYMBOL: InjectionKey<boolean> = Symbol()\n\n/**\n * Check if we're in a form group.\n *\n * This is called from ScalarFormInput components.\n */\nexport const useFormGroupInput = () => {\n  return inject(FORM_GROUP_SYMBOL, false)\n}\n\n/**\n * Set that this is a form group.\n *\n * This is called from ScalarFormInputGroup components.\n */\nexport const useFormGroup = () => {\n  provide(FORM_GROUP_SYMBOL, true)\n}\n"],"mappings":";;;;;AAKA,IAAM,oBAA2C,OAAO;;;;;;AAOxD,IAAa,0BAA0B;CACrC,OAAO,OAAO,mBAAmB,KAAK;AACxC;;;;;;AAOA,IAAa,qBAAqB;CAChC,QAAQ,mBAAmB,IAAI;AACjC"}

package/dist/components/ScalarIcon/logos/Astro.svg.virtual.js

@@ -1,5 +1,5 @@
 import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
-import { createElementBlock, openBlock } from "vue";
+import { createElementBlock, createElementVNode, openBlock } from "vue";
 //#region src/components/ScalarIcon/logos/Astro.svg?component
 var Astro_exports = /* @__PURE__ */ __exportAll({
 	default: () => Astro_default,
@@ -7,11 +7,11 @@ var Astro_exports = /* @__PURE__ */ __exportAll({
 });
 var _hoisted_1 = {
 	xmlns: "http://www.w3.org/2000/svg",
-	fill: "none",
+	fill: "currentColor",
 	viewBox: "0 0 24 24"
 };
 function render$1(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1);
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M16.074 16.86c-.72.616-2.157 1.035-3.812 1.035-2.032 0-3.735-.632-4.187-1.483-.161.488-.198 1.046-.198 1.402 0 0-.106 1.75 1.111 2.968 0-.632.513-1.145 1.145-1.145 1.083 0 1.082.945 1.081 1.712v.069c0 1.164.711 2.161 1.723 2.582a2.35 2.35 0 0 1-.236-1.029c0-1.11.652-1.523 1.41-2.003.602-.383 1.272-.807 1.733-1.66a3.1 3.1 0 0 0 .378-1.494 3.1 3.1 0 0 0-.148-.954M15.551.6c.196.244.296.572.496 1.229l4.368 14.347a18.2 18.2 0 0 0-5.222-1.768L12.35 4.8a.37.37 0 0 0-.71.002l-2.81 9.603a18.2 18.2 0 0 0-5.245 1.771L7.974 1.827c.2-.656.3-.984.497-1.227a1.6 1.6 0 0 1 .654-.484C9.415 0 9.757 0 10.443 0h3.135c.686 0 1.03 0 1.32.117A1.6 1.6 0 0 1 15.55.6z" }, null, -1)])]);
 }
 var Astro_default = { render: render$1 };
 //#endregion

package/dist/components/ScalarIcon/logos/Astro.svg.virtual.js.map

@@ -1 +1 @@
-{"version":3,"file":"Astro.svg.virtual.js","names":["render","_openBlock","_createElementBlock"],"sources":["../../../../src/components/ScalarIcon/logos/Astro.svg?component"],"sourcesContent":["import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  viewBox: \"0 0 24 24\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1))\n}\nexport default { render: render }"],"mappings":";;;;;;;AAEA,IAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,SAAS;AACX;AAEA,SAAgBA,SAAO,MAAM,QAAQ;CACnC,OAAQC,UAAW,GAAGC,mBAAoB,OAAO,UAAU;AAC7D;AACA,IAAA,gBAAe,EAAE,QAAQF,SAAO"}
+{"version":3,"file":"Astro.svg.virtual.js","names":["render","_openBlock","_createElementBlock","_createElementVNode"],"sources":["../../../../src/components/ScalarIcon/logos/Astro.svg?component"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"currentColor\",\n  viewBox: \"0 0 24 24\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", { d: \"M16.074 16.86c-.72.616-2.157 1.035-3.812 1.035-2.032 0-3.735-.632-4.187-1.483-.161.488-.198 1.046-.198 1.402 0 0-.106 1.75 1.111 2.968 0-.632.513-1.145 1.145-1.145 1.083 0 1.082.945 1.081 1.712v.069c0 1.164.711 2.161 1.723 2.582a2.35 2.35 0 0 1-.236-1.029c0-1.11.652-1.523 1.41-2.003.602-.383 1.272-.807 1.733-1.66a3.1 3.1 0 0 0 .378-1.494 3.1 3.1 0 0 0-.148-.954M15.551.6c.196.244.296.572.496 1.229l4.368 14.347a18.2 18.2 0 0 0-5.222-1.768L12.35 4.8a.37.37 0 0 0-.71.002l-2.81 9.603a18.2 18.2 0 0 0-5.245 1.771L7.974 1.827c.2-.656.3-.984.497-1.227a1.6 1.6 0 0 1 .654-.484C9.415 0 9.757 0 10.443 0h3.135c.686 0 1.03 0 1.32.117A1.6 1.6 0 0 1 15.55.6z\" }, null, -1)\n  ]))]))\n}\nexport default { render: render }"],"mappings":";;;;;;;AAEA,IAAM,aAAa;CACjB,OAAO;CACP,MAAM;CACN,SAAS;AACX;AAEA,SAAgBA,SAAO,MAAM,QAAQ;CACnC,OAAQC,UAAW,GAAGC,mBAAoB,OAAO,YAAY,CAAC,GAAI,OAAO,OAAO,OAAO,KAAK,CAC1FC,mBAAoB,QAAQ,EAAE,GAAG,4oBAA4oB,GAAG,MAAM,EAAE,CAC1rB,EAAG,CAAC;AACN;AACA,IAAA,gBAAe,EAAE,QAAQH,SAAO"}

package/dist/components/ScalarSidebar/useSidebarGroups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSidebarGroups.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/useSidebarGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,KAAK,CAAA;AAExD,KAAK,mBAAmB,GAAG;IACzB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAEzD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAe,YAAY,CAAC,iBAAiB,CAAC,CAAA;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAS,mBAAwB;;CAcjE,CAAA"}
+{"version":3,"file":"useSidebarGroups.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/useSidebarGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,KAAK,CAAA;AAExD,KAAK,mBAAmB,GAAG;IACzB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAEzD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,YAAY,CAAC,iBAAiB,CAAY,CAAA;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAS,mBAAwB;;CAcjE,CAAA"}

package/dist/components/ScalarSidebar/useSidebarGroups.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidebarGroups.js","names":[],"sources":["../../../src/components/ScalarSidebar/useSidebarGroups.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\ntype SidebarGroupOptions = {\n  /** Increment the level of the sidebar groups */\n  increment?: boolean\n  /** Reset the level of the sidebar groups */\n  reset?: boolean\n}\n\n/**\n * The level of the sidebar groups\n *\n * We shouldn't go deeper than 6 levels\n */\nexport type SidebarGroupLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6\n\n/**\n * Tracks the level of the sidebar groups\n *\n * @default 0\n */\nexport const SIDEBAR_GROUPS_SYMBOL = Symbol() as InjectionKey<SidebarGroupLevel>\n\n/**\n * Get the current level of the sidebar groups\n *\n * Optionally increments or resets the level of the sidebar groups\n * Always returns the current level even if the level is incremented or reset\n */\nexport const useSidebarGroups = (options: SidebarGroupOptions = {}) => {\n  const { increment = false, reset = false } = options\n\n  const level = inject(SIDEBAR_GROUPS_SYMBOL, 0)\n\n  if (reset) {\n    provide(SIDEBAR_GROUPS_SYMBOL, 0)\n  } else if (increment && level < 6) {\n    provide(SIDEBAR_GROUPS_SYMBOL, (level + 1) as SidebarGroupLevel)\n  } else {\n    provide(SIDEBAR_GROUPS_SYMBOL, level)\n  }\n\n  return { level }\n}\n"],"mappings":";;;;;;;AAqBA,IAAa,wBAAwB,OAAO;;;;;;;AAQ5C,IAAa,oBAAoB,UAA+B,CAAC,MAAM;CACrE,MAAM,EAAE,YAAY,OAAO,QAAQ,UAAU;CAE7C,MAAM,QAAQ,OAAO,uBAAuB,CAAC;CAE7C,IAAI,OACF,QAAQ,uBAAuB,CAAC;MAC3B,IAAI,aAAa,QAAQ,GAC9B,QAAQ,uBAAwB,QAAQ,CAAuB;MAE/D,QAAQ,uBAAuB,KAAK;CAGtC,OAAO,EAAE,MAAM;AACjB"}
+{"version":3,"file":"useSidebarGroups.js","names":[],"sources":["../../../src/components/ScalarSidebar/useSidebarGroups.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\ntype SidebarGroupOptions = {\n  /** Increment the level of the sidebar groups */\n  increment?: boolean\n  /** Reset the level of the sidebar groups */\n  reset?: boolean\n}\n\n/**\n * The level of the sidebar groups\n *\n * We shouldn't go deeper than 6 levels\n */\nexport type SidebarGroupLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6\n\n/**\n * Tracks the level of the sidebar groups\n *\n * @default 0\n */\nexport const SIDEBAR_GROUPS_SYMBOL: InjectionKey<SidebarGroupLevel> = Symbol()\n\n/**\n * Get the current level of the sidebar groups\n *\n * Optionally increments or resets the level of the sidebar groups\n * Always returns the current level even if the level is incremented or reset\n */\nexport const useSidebarGroups = (options: SidebarGroupOptions = {}) => {\n  const { increment = false, reset = false } = options\n\n  const level = inject(SIDEBAR_GROUPS_SYMBOL, 0)\n\n  if (reset) {\n    provide(SIDEBAR_GROUPS_SYMBOL, 0)\n  } else if (increment && level < 6) {\n    provide(SIDEBAR_GROUPS_SYMBOL, (level + 1) as SidebarGroupLevel)\n  } else {\n    provide(SIDEBAR_GROUPS_SYMBOL, level)\n  }\n\n  return { level }\n}\n"],"mappings":";;;;;;;AAqBA,IAAa,wBAAyD,OAAO;;;;;;;AAQ7E,IAAa,oBAAoB,UAA+B,CAAC,MAAM;CACrE,MAAM,EAAE,YAAY,OAAO,QAAQ,UAAU;CAE7C,MAAM,QAAQ,OAAO,uBAAuB,CAAC;CAE7C,IAAI,OACF,QAAQ,uBAAuB,CAAC;MAC3B,IAAI,aAAa,QAAQ,GAC9B,QAAQ,uBAAwB,QAAQ,CAAuB;MAE/D,QAAQ,uBAAuB,KAAK;CAGtC,OAAO,EAAE,MAAM;AACjB"}

package/dist/components/ScalarSidebar/useSidebarNestedItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidebarNestedItems.js","names":[],"sources":["../../../src/components/ScalarSidebar/useSidebarNestedItems.ts"],"sourcesContent":["import { type InjectionKey, computed, inject, onBeforeUnmount, provide, shallowReactive } from 'vue'\n\ntype SidebarNestedItemOpenGetter = () => boolean\n\n/**\n * Tracks the open state of the nearest nested child items\n */\nconst SIDEBAR_NESTED_ITEMS_SYMBOL = Symbol() as InjectionKey<Set<SidebarNestedItemOpenGetter>>\n\n/**\n * Get the open / closed model for the nearest nested child items\n */\nexport const useSidebarNestedItem = (\n  /** The getter for the open state of the current nested items */\n  open: SidebarNestedItemOpenGetter,\n): void => {\n  const parentList = inject(SIDEBAR_NESTED_ITEMS_SYMBOL)\n\n  if (parentList) {\n    // Add this child to the parent list when the component is mounted\n    parentList.add(open)\n\n    onBeforeUnmount(() => {\n      // Remove the reference to this child from the parent list when the component is unmounted\n      parentList.delete(open)\n    })\n  }\n}\n/**\n * Get whether or not any nested child items are open\n */\nexport const useSidebarNestedItems = () => {\n  // Create a reactive set with getters for each child's open state\n  const children = shallowReactive(new Set<SidebarNestedItemOpenGetter>())\n\n  const open = computed(() => {\n    // Track the child list and each child's open state\n    for (const getIsChildOpen of children) {\n      if (getIsChildOpen()) {\n        return true\n      }\n    }\n\n    return false\n  })\n\n  provide(SIDEBAR_NESTED_ITEMS_SYMBOL, children)\n\n  return {\n    /** Whether or not any nested child items are open */\n    open,\n  }\n}\n"],"mappings":";;;;;AAOA,IAAM,8BAA8B,OAAO;;;;AAK3C,IAAa,wBAEX,SACS;CACT,MAAM,aAAa,OAAO,2BAA2B;CAErD,IAAI,YAAY;EAEd,WAAW,IAAI,IAAI;EAEnB,sBAAsB;GAEpB,WAAW,OAAO,IAAI;EACxB,CAAC;CACH;AACF;;;;AAIA,IAAa,8BAA8B;CAEzC,MAAM,WAAW,gCAAgB,IAAI,IAAiC,CAAC;CAEvE,MAAM,OAAO,eAAe;EAE1B,KAAK,MAAM,kBAAkB,UAC3B,IAAI,eAAe,GACjB,OAAO;EAIX,OAAO;CACT,CAAC;CAED,QAAQ,6BAA6B,QAAQ;CAE7C,OAAO;;AAEL,KACF;AACF"}
+{"version":3,"file":"useSidebarNestedItems.js","names":[],"sources":["../../../src/components/ScalarSidebar/useSidebarNestedItems.ts"],"sourcesContent":["import { type InjectionKey, computed, inject, onBeforeUnmount, provide, shallowReactive } from 'vue'\n\ntype SidebarNestedItemOpenGetter = () => boolean\n\n/**\n * Tracks the open state of the nearest nested child items\n */\nconst SIDEBAR_NESTED_ITEMS_SYMBOL: InjectionKey<Set<SidebarNestedItemOpenGetter>> = Symbol()\n\n/**\n * Get the open / closed model for the nearest nested child items\n */\nexport const useSidebarNestedItem = (\n  /** The getter for the open state of the current nested items */\n  open: SidebarNestedItemOpenGetter,\n): void => {\n  const parentList = inject(SIDEBAR_NESTED_ITEMS_SYMBOL)\n\n  if (parentList) {\n    // Add this child to the parent list when the component is mounted\n    parentList.add(open)\n\n    onBeforeUnmount(() => {\n      // Remove the reference to this child from the parent list when the component is unmounted\n      parentList.delete(open)\n    })\n  }\n}\n/**\n * Get whether or not any nested child items are open\n */\nexport const useSidebarNestedItems = () => {\n  // Create a reactive set with getters for each child's open state\n  const children = shallowReactive(new Set<SidebarNestedItemOpenGetter>())\n\n  const open = computed(() => {\n    // Track the child list and each child's open state\n    for (const getIsChildOpen of children) {\n      if (getIsChildOpen()) {\n        return true\n      }\n    }\n\n    return false\n  })\n\n  provide(SIDEBAR_NESTED_ITEMS_SYMBOL, children)\n\n  return {\n    /** Whether or not any nested child items are open */\n    open,\n  }\n}\n"],"mappings":";;;;;AAOA,IAAM,8BAA8E,OAAO;;;;AAK3F,IAAa,wBAEX,SACS;CACT,MAAM,aAAa,OAAO,2BAA2B;CAErD,IAAI,YAAY;EAEd,WAAW,IAAI,IAAI;EAEnB,sBAAsB;GAEpB,WAAW,OAAO,IAAI;EACxB,CAAC;CACH;AACF;;;;AAIA,IAAa,8BAA8B;CAEzC,MAAM,WAAW,gCAAgB,IAAI,IAAiC,CAAC;CAEvE,MAAM,OAAO,eAAe;EAE1B,KAAK,MAAM,kBAAkB,UAC3B,IAAI,eAAe,GACjB,OAAO;EAIX,OAAO;CACT,CAAC;CAED,QAAQ,6BAA6B,QAAQ;CAE7C,OAAO;;AAEL,KACF;AACF"}

package/dist/components/ScalarTeleport/useTeleport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTeleport.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTeleport/useTeleport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAA0B,MAAM,KAAK,CAAA;AAE/D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAe,YAAY,CAAC,MAAM,CAAC,CAAA;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,cAAwC,CAAA;AAEhE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,WAM7C,CAAA"}
+{"version":3,"file":"useTeleport.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTeleport/useTeleport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAA0B,MAAM,KAAK,CAAA;AAE/D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,MAAM,CAAY,CAAA;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,cAAwC,CAAA;AAEhE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,WAM7C,CAAA"}

package/dist/components/ScalarTeleport/useTeleport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTeleport.js","names":[],"sources":["../../../src/components/ScalarTeleport/useTeleport.ts"],"sourcesContent":["import { type InjectionKey, inject, provide, useId } from 'vue'\n\n/**\n * The teleport target\n */\nexport const TELEPORT_SYMBOL = Symbol() as InjectionKey<string>\n\n/**\n * Get the nearest teleport target id from `useProvideTeleport`\n *\n * Falls back to `body` if no teleport target id is found\n *\n * @see {@link useProvideTeleport}\n */\nexport const useTeleport = () => inject(TELEPORT_SYMBOL, 'body')\n\n/**\n * Provides a teleport target id using Vue's `provide`\n *\n * @see https://vuejs.org/guide/components/provide-inject.html#provide-inject\n */\nexport const useProvideTeleport = (id?: string) => {\n  // `useId` produces ids that are stable across SSR and client hydration,\n  // avoiding a mismatch on the teleport target id.\n  const targetId = id ?? `scalar-teleport-${useId()}`\n  provide(TELEPORT_SYMBOL, `#${targetId}`)\n  return targetId\n}\n"],"mappings":";;;;;AAKA,IAAa,kBAAkB,OAAO;;;;;;;;AAStC,IAAa,oBAAoB,OAAO,iBAAiB,MAAM;;;;;;AAO/D,IAAa,sBAAsB,OAAgB;CAGjD,MAAM,WAAW,MAAM,mBAAmB,MAAM;CAChD,QAAQ,iBAAiB,IAAI,UAAU;CACvC,OAAO;AACT"}
+{"version":3,"file":"useTeleport.js","names":[],"sources":["../../../src/components/ScalarTeleport/useTeleport.ts"],"sourcesContent":["import { type InjectionKey, inject, provide, useId } from 'vue'\n\n/**\n * The teleport target\n */\nexport const TELEPORT_SYMBOL: InjectionKey<string> = Symbol()\n\n/**\n * Get the nearest teleport target id from `useProvideTeleport`\n *\n * Falls back to `body` if no teleport target id is found\n *\n * @see {@link useProvideTeleport}\n */\nexport const useTeleport = () => inject(TELEPORT_SYMBOL, 'body')\n\n/**\n * Provides a teleport target id using Vue's `provide`\n *\n * @see https://vuejs.org/guide/components/provide-inject.html#provide-inject\n */\nexport const useProvideTeleport = (id?: string) => {\n  // `useId` produces ids that are stable across SSR and client hydration,\n  // avoiding a mismatch on the teleport target id.\n  const targetId = id ?? `scalar-teleport-${useId()}`\n  provide(TELEPORT_SYMBOL, `#${targetId}`)\n  return targetId\n}\n"],"mappings":";;;;;AAKA,IAAa,kBAAwC,OAAO;;;;;;;;AAS5D,IAAa,oBAAoB,OAAO,iBAAiB,MAAM;;;;;;AAO/D,IAAa,sBAAsB,OAAgB;CAGjD,MAAM,WAAW,MAAM,mBAAmB,MAAM;CAChD,QAAQ,iBAAiB,IAAI,UAAU;CACvC,OAAO;AACT"}

package/dist/components/ScalarThemeSwatches/useThemeSwatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeSwatches.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/useThemeSwatches.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, toValue } from 'vue'\n\n/** Numbers 1 to 3 */\ntype OneToThree = 1 | 2 | 3\n\n/**\n * CSS variable names that can be extracted from theme CSS\n */\ntype ThemeCssVar = `--scalar-color-${OneToThree}` | `--scalar-background-${OneToThree}` | '--scalar-color-accent'\n\n/**\n * Theme colors for light and dark modes\n */\ntype ThemeColors = {\n  light: ThemeCssVars\n  dark: ThemeCssVars\n}\n\n/**\n * Record of theme CSS variables to their values (partial)\n */\ntype ThemeCssVars = Partial<Record<ThemeCssVar, string>>\n\n/** Theme CSS variables */\nexport const THEME_CSS_VARS = [\n  '--scalar-color-1',\n  '--scalar-color-2',\n  '--scalar-color-3',\n  '--scalar-background-1',\n  '--scalar-background-2',\n  '--scalar-background-3',\n  '--scalar-color-accent',\n] as const satisfies ThemeCssVar[]\n\n/**\n * Parses a given css string for a css variable regexp\n */\nfunction getVars(cssVarPattern: string, css: string): Partial<Record<ThemeCssVar, string>> {\n  const matches = [...css.matchAll(new RegExp(`(${cssVarPattern}): ([^;]+);`, 'gm'))]\n  if (matches.length === 0) {\n    return {}\n  }\n  return Object.fromEntries(matches.map((match) => [match[1], match[2]]))\n}\n\n/**\n * Parses a given css string for the variables we want\n */\nfunction parseRules(css?: string): ThemeCssVars {\n  if (!css) {\n    return {}\n  }\n  return {\n    ...getVars('--scalar-color-[1-3]', css),\n    ...getVars('--scalar-background-[1-3]', css),\n    ...getVars('--scalar-color-accent', css),\n  } as ThemeCssVars\n}\n\n/**\n * Returns the light and dark colors for a given css string\n */\nexport function useThemeSwatches(css: MaybeRefOrGetter<string>) {\n  return {\n    colors: computed<ThemeColors>(() => ({\n      light: parseRules(toValue(css).match(/\\.light-mode[^{]*{[^}]*}/m)?.[0]),\n      dark: parseRules(toValue(css).match(/\\.dark-mode[^{]*{[^}]*}/m)?.[0]),\n    })),\n  }\n}\n"],"mappings":";;;AAwBA,IAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;AAKA,SAAS,QAAQ,eAAuB,KAAmD;CACzF,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,OAAO,IAAI,cAAc,cAAc,IAAI,CAAC,CAAC;CAClF,IAAI,QAAQ,WAAW,GACrB,OAAO,CAAC;CAEV,OAAO,OAAO,YAAY,QAAQ,KAAK,UAAU,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC,CAAC;AACxE;;;;AAKA,SAAS,WAAW,KAA4B;CAC9C,IAAI,CAAC,KACH,OAAO,CAAC;CAEV,OAAO;EACL,GAAG,QAAQ,wBAAwB,GAAG;EACtC,GAAG,QAAQ,6BAA6B,GAAG;EAC3C,GAAG,QAAQ,yBAAyB,GAAG;CACzC;AACF;;;;AAKA,SAAgB,iBAAiB,KAA+B;CAC9D,OAAO,EACL,QAAQ,gBAA6B;EACnC,OAAO,WAAW,QAAQ,GAAG,CAAC,CAAC,MAAM,2BAA2B,CAAC,GAAG,EAAE;EACtE,MAAM,WAAW,QAAQ,GAAG,CAAC,CAAC,MAAM,0BAA0B,CAAC,GAAG,EAAE;CACtE,EAAE,EACJ;AACF"}
+{"version":3,"file":"useThemeSwatches.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/useThemeSwatches.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, toValue } from 'vue'\n\n/** Numbers 1 to 3 */\ntype OneToThree = 1 | 2 | 3\n\n/**\n * CSS variable names that can be extracted from theme CSS\n */\ntype ThemeCssVar = `--scalar-color-${OneToThree}` | `--scalar-background-${OneToThree}` | '--scalar-color-accent'\n\n/**\n * Theme colors for light and dark modes\n */\ntype ThemeColors = {\n  light: ThemeCssVars\n  dark: ThemeCssVars\n}\n\n/**\n * Record of theme CSS variables to their values (partial)\n */\ntype ThemeCssVars = Partial<Record<ThemeCssVar, string>>\n\n/** Theme CSS variables */\nexport const THEME_CSS_VARS = [\n  '--scalar-color-1',\n  '--scalar-color-2',\n  '--scalar-color-3',\n  '--scalar-background-1',\n  '--scalar-background-2',\n  '--scalar-background-3',\n  '--scalar-color-accent',\n] as const satisfies ThemeCssVar[]\n\n/**\n * Parses a given css string for a css variable regexp\n */\nfunction getVars(cssVarPattern: string, css: string): Partial<Record<ThemeCssVar, string>> {\n  const matches = [...css.matchAll(new RegExp(`(${cssVarPattern}): ([^;]+);`, 'gm'))]\n  if (matches.length === 0) {\n    return {}\n  }\n  return Object.fromEntries(matches.map((match) => [match[1], match[2]]))\n}\n\n/**\n * Parses a given css string for the variables we want\n */\nfunction parseRules(css?: string): ThemeCssVars {\n  if (!css) {\n    return {}\n  }\n  return {\n    ...getVars('--scalar-color-[1-3]', css),\n    ...getVars('--scalar-background-[1-3]', css),\n    ...getVars('--scalar-color-accent', css),\n  }\n}\n\n/**\n * Returns the light and dark colors for a given css string\n */\nexport function useThemeSwatches(css: MaybeRefOrGetter<string>) {\n  return {\n    colors: computed<ThemeColors>(() => ({\n      light: parseRules(toValue(css).match(/\\.light-mode[^{]*{[^}]*}/m)?.[0]),\n      dark: parseRules(toValue(css).match(/\\.dark-mode[^{]*{[^}]*}/m)?.[0]),\n    })),\n  }\n}\n"],"mappings":";;;AAwBA,IAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;AAKA,SAAS,QAAQ,eAAuB,KAAmD;CACzF,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,OAAO,IAAI,cAAc,cAAc,IAAI,CAAC,CAAC;CAClF,IAAI,QAAQ,WAAW,GACrB,OAAO,CAAC;CAEV,OAAO,OAAO,YAAY,QAAQ,KAAK,UAAU,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC,CAAC;AACxE;;;;AAKA,SAAS,WAAW,KAA4B;CAC9C,IAAI,CAAC,KACH,OAAO,CAAC;CAEV,OAAO;EACL,GAAG,QAAQ,wBAAwB,GAAG;EACtC,GAAG,QAAQ,6BAA6B,GAAG;EAC3C,GAAG,QAAQ,yBAAyB,GAAG;CACzC;AACF;;;;AAKA,SAAgB,iBAAiB,KAA+B;CAC9D,OAAO,EACL,QAAQ,gBAA6B;EACnC,OAAO,WAAW,QAAQ,GAAG,CAAC,CAAC,MAAM,2BAA2B,CAAC,GAAG,EAAE;EACtE,MAAM,WAAW,QAAQ,GAAG,CAAC,CAAC,MAAM,0BAA0B,CAAC,GAAG,EAAE;CACtE,EAAE,EACJ;AACF"}

package/dist/style.css

@@ -264,6 +264,7 @@
     --scalar-color-blue: #0082d0;
     --scalar-color-orange: #ff5800;
     --scalar-color-purple: #5203d1;
+    --scalar-color-query: #007b80;
     --scalar-link-color: var(--scalar-color-1);
     --scalar-link-color-hover: var(--scalar-link-color);
     --scalar-button-1: #000;
@@ -326,6 +327,7 @@
     --scalar-color-blue: #4eb3ec;
     --scalar-color-orange: #ff8d4d;
     --scalar-color-purple: #b191f9;
+    --scalar-color-query: #65d4cf;
     --scalar-link-color: var(--scalar-color-1);
     --scalar-link-color-hover: var(--scalar-link-color);
     --scalar-button-1: #fff;
@@ -515,7 +517,7 @@
   display: block;
 }
 
-:where(.scalar-app) [hidden] {
+:where(.scalar-app) [hidden]:not([hidden="until-found"]) {
   display: none;
 }
 
@@ -1918,6 +1920,16 @@
   background-color: inherit;
 }
 
+.scalar-app .bg-query\/10 {
+  background-color: var(--scalar-color-query);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .scalar-app .bg-query\/10 {
+    background-color: color-mix(in oklab, var(--scalar-color-query) 10%, transparent);
+  }
+}
+
 .scalar-app .bg-red {
   background-color: var(--scalar-color-red);
 }
@@ -2374,6 +2386,10 @@
   color: var(--scalar-tooltip-color);
 }
 
+.scalar-app .text-query {
+  color: var(--scalar-color-query);
+}
+
 .scalar-app .text-red {
   color: var(--scalar-color-red);
 }
@@ -3748,8 +3764,8 @@ to {
   transform: translate3d(0, 0, 0);
 }
 
-.dark-mode .scalar-dropdown-item[data-v-f5e0d3d8]:hover,
-.dark-mode .scalar-dropdown-item[data-highlighted][data-v-f5e0d3d8] {
+.dark-mode .scalar-dropdown-item[data-v-128eed00]:hover,
+.dark-mode .scalar-dropdown-item[data-highlighted][data-v-128eed00] {
   filter: brightness(1.1);
 }
 

package/dist/vue-styles.css

@@ -270,8 +270,8 @@ to {
   transform: translate3d(0, 0, 0);
 }
 
-.dark-mode .scalar-dropdown-item[data-v-f5e0d3d8]:hover,
-.dark-mode .scalar-dropdown-item[data-highlighted][data-v-f5e0d3d8] {
+.dark-mode .scalar-dropdown-item[data-v-128eed00]:hover,
+.dark-mode .scalar-dropdown-item[data-highlighted][data-v-128eed00] {
   filter: brightness(1.1);
 }
 

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.29.1",
+  "version": "0.29.3",
   "engines": {
     "node": ">=22"
   },
@@ -216,16 +216,16 @@
     "@floating-ui/vue": "1.1.9",
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "1.7.23",
+    "@scalar/code-highlight": "0.4.6",
+    "@scalar/helpers": "0.12.0",
+    "@scalar/icons": "0.7.6",
+    "@scalar/themes": "0.18.0",
+    "@scalar/use-hooks": "0.4.12",
     "@vueuse/core": "13.9.0",
     "cva": "1.0.0-beta.4",
     "radix-vue": "^1.9.17",
     "vue": "^3.5.40",
-    "vue-component-type-helpers": "^3.2.6",
-    "@scalar/code-highlight": "0.4.5",
-    "@scalar/icons": "0.7.6",
-    "@scalar/themes": "0.17.4",
-    "@scalar/helpers": "0.11.3",
-    "@scalar/use-hooks": "0.4.11"
+    "vue-component-type-helpers": "^3.2.6"
   },
   "devDependencies": {
     "@playwright/test": "1.62.1",