@scalar/components 0.24.2 → 0.25.0

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;SAFb,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;cAmEN,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;SAFb,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;cAsEN,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/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-6660bbc5"]]);
+var ScalarDropdownButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f5e0d3d8"]]);
 //#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\n    'cursor-pointer hover:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}
+{"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":""}

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

@@ -12,7 +12,7 @@ var ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 			base: [
 				"block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left",
 				"truncate  no-underline text-sm text-c-1",
-				"cursor-pointer hover:bg-b-2"
+				"cursor-pointer hover:bg-b-2 highlighted:bg-b-2"
 			],
 			variants: {
 				disabled: { true: "pointer-events-none text-c-3" },

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\n    'cursor-pointer hover:bg-b-2',\n  ],\n  variants: {\n    disabled: { true: 'pointer-events-none text-c-3' },\n    active: { true: '' },\n  },\n  compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled\"\n    class=\"item\"\n    :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n    :type=\"is === 'button' ? 'button' : undefined\">\n    <slot />\n  </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover {\n  filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAEA;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,gCAAgC;IAClD,QAAQ,EAAE,MAAM,IAAI;IACrB;GACD,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;IAAU,CAAC;GACvE,CAAA;;uBAGC,YAOY,wBANL,QAAA,GAAE,EAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,GAAE,CAAA,wBAAyB,MAAA,SAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}
+{"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;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,gCAAgC;IAClD,QAAQ,EAAE,MAAM,IAAI;IACrB;GACD,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;IAAU,CAAC;GACvE,CAAA;;uBAGC,YAOY,wBANL,QAAA,GAAE,EAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,GAAE,CAAA,wBAAyB,MAAA,SAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}

package/dist/components/ScalarHeader/ScalarHeaderButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeaderButton.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeaderButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header button component\n *\n * Used within the ScalarHeader component\n *\n * @example\n * ```html\n * <ScalarHeaderButton>\n *   Login\n * </ScalarHeaderButton>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  cta?: boolean\n}>()\n\ndefineSlots<{\n  /** The contents of the button */\n  default?(): unknown\n}>()\n\nconst variants = cva({\n  base: 'group/button flex items-center rounded  px-3 py-2 text-base/4 no-underline',\n  variants: {\n    cta: {\n      true: 'font-bold bg-b-header-cta text-sm/4 text-c-header-cta hover:bg-h-header-cta',\n      false: 'text-c-header-2 hover:text-c-header-1',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ cta }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHeaderButton.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeaderButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header button component\n *\n * Used within the ScalarHeader component\n *\n * @example\n * ```html\n * <ScalarHeaderButton>\n *   Login\n * </ScalarHeaderButton>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  cta?: boolean\n}>()\n\ndefineSlots<{\n  /** The contents of the button */\n  default?(): unknown\n}>()\n\nconst variants = cva({\n  base: 'group/button flex items-center rounded px-3 py-2 text-base/4 no-underline',\n  variants: {\n    cta: {\n      true: 'font-bold bg-b-header-cta text-sm/4 text-c-header-cta hover:bg-h-header-cta',\n      false: 'text-c-header-2 hover:text-c-header-1',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ cta }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarHeader/ScalarHeaderButton.vue.script.js

@@ -9,7 +9,7 @@ var ScalarHeaderButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	},
 	setup(__props) {
 		const variants = cva({
-			base: "group/button flex items-center rounded  px-3 py-2 text-base/4 no-underline",
+			base: "group/button flex items-center rounded px-3 py-2 text-base/4 no-underline",
 			variants: { cta: {
 				true: "font-bold bg-b-header-cta text-sm/4 text-c-header-cta hover:bg-h-header-cta",
 				false: "text-c-header-2 hover:text-c-header-1"

package/dist/components/ScalarHeader/ScalarHeaderButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeaderButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeaderButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header button component\n *\n * Used within the ScalarHeader component\n *\n * @example\n * ```html\n * <ScalarHeaderButton>\n *   Login\n * </ScalarHeaderButton>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  cta?: boolean\n}>()\n\ndefineSlots<{\n  /** The contents of the button */\n  default?(): unknown\n}>()\n\nconst variants = cva({\n  base: 'group/button flex items-center rounded  px-3 py-2 text-base/4 no-underline',\n  variants: {\n    cta: {\n      true: 'font-bold bg-b-header-cta text-sm/4 text-c-header-cta hover:bg-h-header-cta',\n      false: 'text-c-header-2 hover:text-c-header-1',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ cta }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;EA6BA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,KAAK;IACH,MAAM;IACN,OAAO;IACR,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAKY,wBAJL,QAAA,GAAE,EADT,WAKY,EAHT,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA,GAAA,EAC5B,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,KAAG,QAAA,KAAG,CAAA,CAAA,CAAA,EAAA;2BACjB,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarHeaderButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeaderButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header button component\n *\n * Used within the ScalarHeader component\n *\n * @example\n * ```html\n * <ScalarHeaderButton>\n *   Login\n * </ScalarHeaderButton>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n  is?: string | Component\n  cta?: boolean\n}>()\n\ndefineSlots<{\n  /** The contents of the button */\n  default?(): unknown\n}>()\n\nconst variants = cva({\n  base: 'group/button flex items-center rounded px-3 py-2 text-base/4 no-underline',\n  variants: {\n    cta: {\n      true: 'font-bold bg-b-header-cta text-sm/4 text-c-header-cta hover:bg-h-header-cta',\n      false: 'text-c-header-2 hover:text-c-header-1',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx(variants({ cta }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;EA6BA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,KAAK;IACH,MAAM;IACN,OAAO;IACR,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAKY,wBAJL,QAAA,GAAE,EADT,WAKY,EAHT,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA,GAAA,EAC5B,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,KAAG,QAAA,KAAG,CAAA,CAAA,CAAA,EAAA;2BACjB,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"formatHotkey.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/formatHotkey.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAa7C,iDAAiD;AACjD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,CAGrE;AAED,6CAA6C;AAC7C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAGxF;AAKD,wCAAwC;AACxC,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE/C"}
+{"version":3,"file":"formatHotkey.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/formatHotkey.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAkC7C,iDAAiD;AACjD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,CAGrE;AAED,6CAA6C;AAC7C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAGxF;AAKD,wCAAwC;AACxC,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE/C"}

package/dist/components/ScalarHotkey/formatHotkey.js

@@ -1,6 +1,16 @@
 import { HOTKEY_LABELS, MODIFIER_KEY_SYMBOLS, MODIFIER_KEY_SYMBOLS_MACOS } from "./constants.js";
 import { isMacOS } from "@scalar/helpers/general/is-mac-os";
 //#region src/components/ScalarHotkey/formatHotkey.ts
+var forcedHotkeySymbolSet = () => {
+	const raw = void 0;
+	if (raw === "mac" || raw === "non-mac") return raw;
+};
+var useMacHotkeySymbols = () => {
+	const forced = forcedHotkeySymbolSet();
+	if (forced === "mac") return true;
+	if (forced === "non-mac") return false;
+	return isMacOS();
+};
 /** Typescript helper to check if a modifier is the default modifier */
 function isDefault(modifier) {
 	return modifier === "default";
@@ -8,7 +18,7 @@ function isDefault(modifier) {
 /** Get the modifier key symbol for a modifier */
 function getModifierKeySymbol(modifier) {
 	const hotkey = isDefault(modifier) ? "Meta" : modifier;
-	return isMacOS() ? MODIFIER_KEY_SYMBOLS_MACOS[hotkey] : MODIFIER_KEY_SYMBOLS[hotkey];
+	return useMacHotkeySymbols() ? MODIFIER_KEY_SYMBOLS_MACOS[hotkey] : MODIFIER_KEY_SYMBOLS[hotkey];
 }
 /** Format the hotkey symbols for a hotkey */
 function formatHotkeySymbols(hotkey, modifier) {

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

@@ -1 +1 @@
-{"version":3,"file":"formatHotkey.js","names":[],"sources":["../../../src/components/ScalarHotkey/formatHotkey.ts"],"sourcesContent":["import { isMacOS } from '@scalar/helpers/general/is-mac-os'\n\nimport { HOTKEY_LABELS, MODIFIER_KEY_SYMBOLS, MODIFIER_KEY_SYMBOLS_MACOS } from './constants'\nimport type { HotKeyModifier } from './types'\n\n// Type guards\n// ------------------------------------------------------------\n\n/** Typescript helper to check if a modifier is the default modifier */\nfunction isDefault(modifier: HotKeyModifier): modifier is 'default' {\n  return modifier === 'default'\n}\n\n// Symbol Formatting\n// ------------------------------------------------------------\n\n/** Get the modifier key symbol for a modifier */\nexport function getModifierKeySymbol(modifier: HotKeyModifier): string {\n  const hotkey = isDefault(modifier) ? 'Meta' : modifier\n  return isMacOS() ? MODIFIER_KEY_SYMBOLS_MACOS[hotkey] : MODIFIER_KEY_SYMBOLS[hotkey]\n}\n\n/** Format the hotkey symbols for a hotkey */\nexport function formatHotkeySymbols(hotkey: string, modifier: HotKeyModifier[]): string[] {\n  const modifierKeys = modifier.map((mod) => getModifierKeySymbol(mod))\n  return [...modifierKeys, hotkey]\n}\n\n// Screen Reader Label Formatting\n// ------------------------------------------------------------\n\n/** Get the hotkey label for a hotkey */\nexport function getKeyLabel(key: string): string {\n  return key in HOTKEY_LABELS ? HOTKEY_LABELS[key as keyof typeof HOTKEY_LABELS] : key\n}\n"],"mappings":";;;;AASA,SAAS,UAAU,UAAiD;AAClE,QAAO,aAAa;;;AAOtB,SAAgB,qBAAqB,UAAkC;CACrE,MAAM,SAAS,UAAU,SAAS,GAAG,SAAS;AAC9C,QAAO,SAAS,GAAG,2BAA2B,UAAU,qBAAqB;;;AAI/E,SAAgB,oBAAoB,QAAgB,UAAsC;AAExF,QAAO,CAAC,GADa,SAAS,KAAK,QAAQ,qBAAqB,IAAI,CAAC,EAC5C,OAAO;;;AAOlC,SAAgB,YAAY,KAAqB;AAC/C,QAAO,OAAO,gBAAgB,cAAc,OAAqC"}
+{"version":3,"file":"formatHotkey.js","names":[],"sources":["../../../src/components/ScalarHotkey/formatHotkey.ts"],"sourcesContent":["import { isMacOS } from '@scalar/helpers/general/is-mac-os'\n\nimport { HOTKEY_LABELS, MODIFIER_KEY_SYMBOLS, MODIFIER_KEY_SYMBOLS_MACOS } from './constants'\nimport type { HotKeyModifier } from './types'\n\ntype HotkeySymbolSet = 'mac' | 'non-mac'\n\nconst forcedHotkeySymbolSet = (): HotkeySymbolSet | undefined => {\n  const raw = import.meta.env.VITE_SCALAR_HOTKEY_SYMBOL_SET\n  if (raw === 'mac' || raw === 'non-mac') {\n    return raw\n  }\n  return undefined\n}\n\nconst useMacHotkeySymbols = (): boolean => {\n  const forced = forcedHotkeySymbolSet()\n  if (forced === 'mac') {\n    return true\n  }\n  if (forced === 'non-mac') {\n    return false\n  }\n  return isMacOS()\n}\n\n// Type guards\n// ------------------------------------------------------------\n\n/** Typescript helper to check if a modifier is the default modifier */\nfunction isDefault(modifier: HotKeyModifier): modifier is 'default' {\n  return modifier === 'default'\n}\n\n// Symbol Formatting\n// ------------------------------------------------------------\n\n/** Get the modifier key symbol for a modifier */\nexport function getModifierKeySymbol(modifier: HotKeyModifier): string {\n  const hotkey = isDefault(modifier) ? 'Meta' : modifier\n  return useMacHotkeySymbols() ? MODIFIER_KEY_SYMBOLS_MACOS[hotkey] : MODIFIER_KEY_SYMBOLS[hotkey]\n}\n\n/** Format the hotkey symbols for a hotkey */\nexport function formatHotkeySymbols(hotkey: string, modifier: HotKeyModifier[]): string[] {\n  const modifierKeys = modifier.map((mod) => getModifierKeySymbol(mod))\n  return [...modifierKeys, hotkey]\n}\n\n// Screen Reader Label Formatting\n// ------------------------------------------------------------\n\n/** Get the hotkey label for a hotkey */\nexport function getKeyLabel(key: string): string {\n  return key in HOTKEY_LABELS ? HOTKEY_LABELS[key as keyof typeof HOTKEY_LABELS] : key\n}\n"],"mappings":";;;AAOA,IAAM,8BAA2D;CAC/D,MAAM,MAAA,KAAA;AACN,KAAI,QAAQ,SAAS,QAAQ,UAC3B,QAAO;;AAKX,IAAM,4BAAqC;CACzC,MAAM,SAAS,uBAAuB;AACtC,KAAI,WAAW,MACb,QAAO;AAET,KAAI,WAAW,UACb,QAAO;AAET,QAAO,SAAS;;;AAOlB,SAAS,UAAU,UAAiD;AAClE,QAAO,aAAa;;;AAOtB,SAAgB,qBAAqB,UAAkC;CACrE,MAAM,SAAS,UAAU,SAAS,GAAG,SAAS;AAC9C,QAAO,qBAAqB,GAAG,2BAA2B,UAAU,qBAAqB;;;AAI3F,SAAgB,oBAAoB,QAAgB,UAAsC;AAExF,QAAO,CAAC,GADa,SAAS,KAAK,QAAQ,qBAAqB,IAAI,CAAC,EAC5C,OAAO;;;AAOlC,SAAgB,YAAY,KAAqB;AAC/C,QAAO,OAAO,gBAAgB,cAAc,OAAqC"}

package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.d.ts

@@ -15,6 +15,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     team?: ScalarMenuTeamOption | undefined;
     /** The list of teams to choose from */
     teams: ScalarMenuTeamOption[];
+    /** Whether to disable the "Add team" button */
+    allowAddTeam?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     add: () => any;
     "update:team": (value: ScalarMenuTeamOption | undefined) => any;
@@ -23,6 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     team?: ScalarMenuTeamOption | undefined;
     /** The list of teams to choose from */
     teams: ScalarMenuTeamOption[];
+    /** Whether to disable the "Add team" button */
+    allowAddTeam?: boolean;
 }> & Readonly<{
     onAdd?: (() => any) | undefined;
     "onUpdate:team"?: ((value: ScalarMenuTeamOption | undefined) => any) | undefined;

package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuTeamPicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"names":[],"mappings":"AAsHA,OAAO,EAAkB,KAAK,oBAAoB,EAAE,MAAM,IAAI,CAAA;AAI9D;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,kCAAkC;WAC3B,oBAAoB,GAAG,SAAS;IACvC,uCAAuC;WAChC,oBAAoB,EAAE;;;;;IAH7B,kCAAkC;WAC3B,oBAAoB,GAAG,SAAS;IACvC,uCAAuC;WAChC,oBAAoB,EAAE;;;;kFAuP3B,CAAC"}
+{"version":3,"file":"ScalarMenuTeamPicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"names":[],"mappings":"AA6HA,OAAO,EAAkB,KAAK,oBAAoB,EAAE,MAAM,IAAI,CAAA;AAI9D;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,kCAAkC;WAC3B,oBAAoB,GAAG,SAAS;IACvC,uCAAuC;WAChC,oBAAoB,EAAE;IAC7B,+CAA+C;mBAChC,OAAO;;;;;IALtB,kCAAkC;WAC3B,oBAAoB,GAAG,SAAS;IACvC,uCAAuC;WAChC,oBAAoB,EAAE;IAC7B,+CAA+C;mBAChC,OAAO;;;;kFA+PpB,CAAC"}

package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuTeamPicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst props = defineProps<{\n  /** The currently selected team */\n  team?: ScalarMenuTeamOption | undefined\n  /** The list of teams to choose from */\n  teams: ScalarMenuTeamOption[]\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the selected team changes */\n  (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n  /** Emitted when the user clicks the \"Create new team\" button */\n  (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n  get: () => props.team?.id,\n  set: (v) =>\n    emit(\n      'update:team',\n      props.teams.find((t) => t.id === v),\n    ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :icon=\"ScalarIconUserSwitch\"\n      submenu\n      v-bind=\"$attrs\">\n      <div>Change team</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-px size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n    <DropdownMenu.Portal>\n      <DropdownMenu.SubContent\n        :as=\"ScalarDropdownMenu\"\n        class=\"max-h-radix-popper z-context-plus\"\n        :sideOffset=\"3\">\n        <DropdownMenu.RadioGroup\n          v-model=\"model\"\n          class=\"contents\">\n          <DropdownMenu.RadioItem\n            v-for=\"t in teams\"\n            :key=\"t.id\"\n            :as=\"ScalarDropdownButton\"\n            class=\"group/item flex items-center\"\n            :value=\"t.id\">\n            <ScalarMenuTeamProfile\n              class=\"-ml-0.75 flex-1 min-w-0\"\n              :label=\"t.label\"\n              :src=\"t.src\" />\n            <ScalarListboxCheckbox\n              class=\"ml-auto\"\n              :selected=\"t.id === model\" />\n          </DropdownMenu.RadioItem>\n        </DropdownMenu.RadioGroup>\n        <DropdownMenu.Item\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('add')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create new team\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarMenuTeamPicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst {\n  team,\n  teams,\n  allowAddTeam = true,\n} = defineProps<{\n  /** The currently selected team */\n  team?: ScalarMenuTeamOption | undefined\n  /** The list of teams to choose from */\n  teams: ScalarMenuTeamOption[]\n  /** Whether to disable the \"Add team\" button */\n  allowAddTeam?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the selected team changes */\n  (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n  /** Emitted when the user clicks the \"Create new team\" button */\n  (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n  get: () => team?.id,\n  set: (v) =>\n    emit(\n      'update:team',\n      teams.find((t) => t.id === v),\n    ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :icon=\"ScalarIconUserSwitch\"\n      submenu\n      v-bind=\"$attrs\">\n      <div>Change team</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-px size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n    <DropdownMenu.Portal>\n      <DropdownMenu.SubContent\n        :as=\"ScalarDropdownMenu\"\n        class=\"max-h-radix-popper z-context-plus\"\n        :sideOffset=\"3\">\n        <DropdownMenu.RadioGroup\n          v-model=\"model\"\n          class=\"contents\">\n          <DropdownMenu.RadioItem\n            v-for=\"t in teams\"\n            :key=\"t.id\"\n            :as=\"ScalarDropdownButton\"\n            class=\"group/item flex items-center\"\n            :value=\"t.id\">\n            <ScalarMenuTeamProfile\n              class=\"-ml-0.75 flex-1 min-w-0\"\n              :label=\"t.label\"\n              :src=\"t.src\" />\n            <ScalarListboxCheckbox\n              class=\"ml-auto\"\n              :selected=\"t.id === model\" />\n          </DropdownMenu.RadioItem>\n        </DropdownMenu.RadioGroup>\n        <DropdownMenu.Item\n          v-if=\"allowAddTeam\"\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('add')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create new team\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":""}

package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.script.js

@@ -3,7 +3,7 @@ import ScalarDropdownMenu_default from "../ScalarDropdown/ScalarDropdownMenu.vue
 import ScalarDropdownButton_default from "../ScalarDropdown/ScalarDropdownButton.vue.js";
 import ScalarMenuLink_default from "./ScalarMenuLink.vue.js";
 import ScalarMenuTeamProfile_default from "./ScalarMenuTeamProfile.vue.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, unref, withCtx } from "vue";
 import { ScalarIconCaretRight, ScalarIconPlus, ScalarIconUserSwitch } from "@scalar/icons";
 import { DropdownMenu } from "radix-vue/namespaced";
 var ScalarMenuTeamPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -11,16 +11,19 @@ var ScalarMenuTeamPicker_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 	__name: "ScalarMenuTeamPicker",
 	props: {
 		team: {},
-		teams: {}
+		teams: {},
+		allowAddTeam: {
+			type: Boolean,
+			default: true
+		}
 	},
 	emits: ["update:team", "add"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
 		const emit = __emit;
 		/** A model that tracks the team id */
 		const model = computed({
-			get: () => props.team?.id,
-			set: (v) => emit("update:team", props.teams.find((t) => t.id === v))
+			get: () => __props.team?.id,
+			set: (v) => emit("update:team", __props.teams.find((t) => t.id === v))
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenu).Sub, null, {
@@ -63,7 +66,8 @@ var ScalarMenuTeamPicker_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 								}, 1032, ["as", "value"]);
 							}), 128))]),
 							_: 1
-						}, 8, ["modelValue"]), createVNode(unref(DropdownMenu).Item, {
+						}, 8, ["modelValue"]), __props.allowAddTeam ? (openBlock(), createBlock(unref(DropdownMenu).Item, {
+							key: 0,
 							as: unref(ScalarDropdownButton_default),
 							class: "flex items-center",
 							onClick: _cache[1] || (_cache[1] = ($event) => emit("add"))
@@ -73,7 +77,7 @@ var ScalarMenuTeamPicker_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 								weight: "bold"
 							}), _cache[3] || (_cache[3] = createTextVNode(" Create new team ", -1))]),
 							_: 1
-						}, 8, ["as"])]),
+						}, 8, ["as"])) : createCommentVNode("", true)]),
 						_: 1
 					}, 8, ["as"])]),
 					_: 1

package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuTeamPicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst props = defineProps<{\n  /** The currently selected team */\n  team?: ScalarMenuTeamOption | undefined\n  /** The list of teams to choose from */\n  teams: ScalarMenuTeamOption[]\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the selected team changes */\n  (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n  /** Emitted when the user clicks the \"Create new team\" button */\n  (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n  get: () => props.team?.id,\n  set: (v) =>\n    emit(\n      'update:team',\n      props.teams.find((t) => t.id === v),\n    ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :icon=\"ScalarIconUserSwitch\"\n      submenu\n      v-bind=\"$attrs\">\n      <div>Change team</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-px size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n    <DropdownMenu.Portal>\n      <DropdownMenu.SubContent\n        :as=\"ScalarDropdownMenu\"\n        class=\"max-h-radix-popper z-context-plus\"\n        :sideOffset=\"3\">\n        <DropdownMenu.RadioGroup\n          v-model=\"model\"\n          class=\"contents\">\n          <DropdownMenu.RadioItem\n            v-for=\"t in teams\"\n            :key=\"t.id\"\n            :as=\"ScalarDropdownButton\"\n            class=\"group/item flex items-center\"\n            :value=\"t.id\">\n            <ScalarMenuTeamProfile\n              class=\"-ml-0.75 flex-1 min-w-0\"\n              :label=\"t.label\"\n              :src=\"t.src\" />\n            <ScalarListboxCheckbox\n              class=\"ml-auto\"\n              :selected=\"t.id === model\" />\n          </DropdownMenu.RadioItem>\n        </DropdownMenu.RadioGroup>\n        <DropdownMenu.Item\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('add')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create new team\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EA6BA,MAAM,QAAQ;EAOd,MAAM,OAAO;;EAQb,MAAM,QAAQ,SAA6B;GACzC,WAAW,MAAM,MAAM;GACvB,MAAM,MACJ,KACE,eACA,MAAM,MAAM,MAAM,MAAM,EAAE,OAAO,EAAE,CACpC;GACJ,CAAA;;uBAKC,YA4CmB,MAAA,aAAA,CAAA,KAAA,MAAA;2BAnCA,CARjB,YAQiB,MAAA,uBAAA,EARjB,WAQiB;KAPd,MAAM,MAAA,qBAAoB;KAC3B,SAAA;OACQA,KAAAA,OAAM,EAAA;4BACQ,CAAA,OAAA,OAAA,OAAA,KAAtB,mBAAsB,OAAA,MAAjB,eAAW,GAAA,GAChB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;sBAEX,YAiCsB,MAAA,aAAA,CAAA,QAAA,MAAA;4BADM,CA/B1B,YA+B0B,MAAA,aAAA,CAAA,YAAA;MA9BvB,IAAI,MAAA,2BAAkB;MACvB,OAAM;MACL,YAAY;;6BAkBa,CAjB1B,YAiB0B,MAAA,aAAA,CAAA,YAAA;mBAhBf,MAAA;0EAAK,QAAA;OACd,OAAM;;8BAEc,EAAA,UAAA,KAAA,EADpB,mBAayB,UAAA,MAAA,WAZX,QAAA,QAAL,MAAC;4BADV,YAayB,MAAA,aAAA,CAAA,WAAA;SAXtB,KAAK,EAAE;SACP,IAAI,MAAA,6BAAoB;SACzB,OAAM;SACL,OAAO,EAAE;;gCAIO,CAHjB,YAGiB,+BAAA;UAFf,OAAM;UACL,OAAO,EAAE;UACT,KAAK,EAAE;wCACV,YAE+B,MAAA,8BAAA,EAAA;UAD7B,OAAM;UACL,UAAU,EAAE,OAAO,MAAA;;;;;;6BAG1B,YAQoB,MAAA,aAAA,CAAA,MAAA;OAPjB,IAAI,MAAA,6BAAoB;OACzB,OAAM;OACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;8BAGM,CAFlB,YAEkB,MAAA,eAAA,EAAA;QADhB,OAAM;QACN,QAAO;qDAAS,qBAEpB,GAAA,EAAA,CAAA"}
+{"version":3,"file":"ScalarMenuTeamPicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst {\n  team,\n  teams,\n  allowAddTeam = true,\n} = defineProps<{\n  /** The currently selected team */\n  team?: ScalarMenuTeamOption | undefined\n  /** The list of teams to choose from */\n  teams: ScalarMenuTeamOption[]\n  /** Whether to disable the \"Add team\" button */\n  allowAddTeam?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the selected team changes */\n  (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n  /** Emitted when the user clicks the \"Create new team\" button */\n  (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n  get: () => team?.id,\n  set: (v) =>\n    emit(\n      'update:team',\n      teams.find((t) => t.id === v),\n    ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :icon=\"ScalarIconUserSwitch\"\n      submenu\n      v-bind=\"$attrs\">\n      <div>Change team</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-px size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n    <DropdownMenu.Portal>\n      <DropdownMenu.SubContent\n        :as=\"ScalarDropdownMenu\"\n        class=\"max-h-radix-popper z-context-plus\"\n        :sideOffset=\"3\">\n        <DropdownMenu.RadioGroup\n          v-model=\"model\"\n          class=\"contents\">\n          <DropdownMenu.RadioItem\n            v-for=\"t in teams\"\n            :key=\"t.id\"\n            :as=\"ScalarDropdownButton\"\n            class=\"group/item flex items-center\"\n            :value=\"t.id\">\n            <ScalarMenuTeamProfile\n              class=\"-ml-0.75 flex-1 min-w-0\"\n              :label=\"t.label\"\n              :src=\"t.src\" />\n            <ScalarListboxCheckbox\n              class=\"ml-auto\"\n              :selected=\"t.id === model\" />\n          </DropdownMenu.RadioItem>\n        </DropdownMenu.RadioGroup>\n        <DropdownMenu.Item\n          v-if=\"allowAddTeam\"\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('add')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create new team\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,OAAO;;EAQb,MAAM,QAAQ,SAA6B;GACzC,WAAW,QAAA,MAAM;GACjB,MAAM,MACJ,KACE,eACA,QAAA,MAAM,MAAM,MAAM,EAAE,OAAO,EAAE,CAC9B;GACJ,CAAA;;uBAKC,YA6CmB,MAAA,aAAA,CAAA,KAAA,MAAA;2BApCA,CARjB,YAQiB,MAAA,uBAAA,EARjB,WAQiB;KAPd,MAAM,MAAA,qBAAoB;KAC3B,SAAA;OACQA,KAAAA,OAAM,EAAA;4BACQ,CAAA,OAAA,OAAA,OAAA,KAAtB,mBAAsB,OAAA,MAAjB,eAAW,GAAA,GAChB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;sBAEX,YAkCsB,MAAA,aAAA,CAAA,QAAA,MAAA;4BADM,CAhC1B,YAgC0B,MAAA,aAAA,CAAA,YAAA;MA/BvB,IAAI,MAAA,2BAAkB;MACvB,OAAM;MACL,YAAY;;6BAkBa,CAjB1B,YAiB0B,MAAA,aAAA,CAAA,YAAA;mBAhBf,MAAA;0EAAK,QAAA;OACd,OAAM;;8BAEc,EAAA,UAAA,KAAA,EADpB,mBAayB,UAAA,MAAA,WAZX,QAAA,QAAL,MAAC;4BADV,YAayB,MAAA,aAAA,CAAA,WAAA;SAXtB,KAAK,EAAE;SACP,IAAI,MAAA,6BAAoB;SACzB,OAAM;SACL,OAAO,EAAE;;gCAIO,CAHjB,YAGiB,+BAAA;UAFf,OAAM;UACL,OAAO,EAAE;UACT,KAAK,EAAE;wCACV,YAE+B,MAAA,8BAAA,EAAA;UAD7B,OAAM;UACL,UAAU,EAAE,OAAO,MAAA;;;;;;6BAIlB,QAAA,gBAAA,WAAA,EADR,YASoB,MAAA,aAAA,CAAA,MAAA;;OAPjB,IAAI,MAAA,6BAAoB;OACzB,OAAM;OACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;8BAGM,CAFlB,YAEkB,MAAA,eAAA,EAAA;QADhB,OAAM;QACN,QAAO;qDAAS,qBAEpB,GAAA,EAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarPlayground.vue.d.ts

@@ -92,6 +92,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @default var(--scalar-border-color)
      */
     searchBorderColor?: string;
+    /**
+     * Sets the placeholder for the search input
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
 } & {
     selected?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -182,6 +187,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @default var(--scalar-border-color)
      */
     searchBorderColor?: string;
+    /**
+     * Sets the placeholder for the search input
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
 } & {
     selected?: string;
 }> & Readonly<{

package/dist/components/ScalarSidebar/ScalarSidebarPlayground.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"AAgKA;;;;;GAKG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;IA5FjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;aAmJN,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUxC,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":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"AAqKA;;;;;GAKG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;IAjGjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;aAqJN,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUxC,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/ScalarSidebar/ScalarSidebarSearchInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      v-bind=\"otherAttrs\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.script.js

@@ -31,8 +31,7 @@ var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @_
 				createVNode(unref(ScalarIconMagnifyingGlass), { class: "text-sidebar-c-search size-4" }),
 				withDirectives(createElementVNode("input", mergeProps({
 					ref_key: "inputRef",
-					ref: inputRef
-				}, unref(otherAttrs), {
+					ref: inputRef,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					"aria-label": __props.label ?? "Enter search query",
 					autocapitalize: "off",
@@ -42,7 +41,7 @@ var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @_
 					placeholder: "Search...",
 					spellcheck: "false",
 					type: "search"
-				}), null, 16, _hoisted_1), [[vModelText, model.value]]),
+				}, unref(otherAttrs)), null, 16, _hoisted_1), [[vModelText, model.value]]),
 				__props.loader && __props.loader.isActive ? (openBlock(), createBlock(unref(ScalarLoading_default), {
 					key: 0,
 					class: "mr-3 self-center",

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,WAAW,IAA6B,KAAI;EAElD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB,QAAA,aAAa,SAAS,OAAO,OAAO,CAAA;;uBAGlD,mBAiCQ,SAAA,eAAA,mBAhCS,MAAA,eAAc,CAAA,qIAAA,oDAAmN,MAAA,QAAK,qBAAA,wBAAA,CAAA,CAAA,EAAA;IAOrP,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAMsC,MAAA,yBAAA,EAAA;;KAJpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      v-bind=\"otherAttrs\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,WAAW,IAA6B,KAAI;EAElD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB,QAAA,aAAa,SAAS,OAAO,OAAO,CAAA;;uBAGlD,mBAiCQ,SAAA,eAAA,mBAhCS,MAAA,eAAc,CAAA,qIAAA,oDAAmN,MAAA,QAAK,qBAAA,wBAAA,CAAA,CAAA,EAAA;IAOrP,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWwB,SAXxB,WAWwB;cAVlB;KAAJ,KAAI;wEACU,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;OACG,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,WAAA,EAAA,CAAA,CAAA,YATT,MAAA,MAAK,CAAA,CAAA;IAWR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAMsC,MAAA,yBAAA,EAAA;;KAJpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}

package/dist/components/ScalarTooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4H1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AA2ED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QAqDpD"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4H1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AA2ED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QAwEpD"}

package/dist/components/ScalarTooltip/useTooltip.js

@@ -1,5 +1,5 @@
 import { ELEMENT_CLASS, ELEMENT_ID } from "./constants.js";
-import { computed, ref, unref, watch } from "vue";
+import { computed, onScopeDispose, ref, unref, watch } from "vue";
 import { autoUpdate, flip, shift, useFloating } from "@floating-ui/vue";
 //#region src/components/ScalarTooltip/useTooltip.ts
 /**
@@ -160,6 +160,18 @@ function useTooltip(opts) {
 			newRef.setAttribute("aria-describedby", ELEMENT_ID);
 		}
 	}, { immediate: true });
+	onScopeDispose(() => {
+		clearTimer();
+		const target = unref(opts.targetRef);
+		if (target) {
+			target.removeEventListener("mouseenter", showTooltipAfterDelay);
+			target.removeEventListener("mouseleave", hideTooltip);
+			target.removeEventListener("focus", showTooltip);
+			target.removeEventListener("blur", hideTooltip);
+			target.removeAttribute("aria-describedby");
+		}
+		if (unref(config.value?.targetRef) === unref(opts.targetRef)) config.value = void 0;
+	});
 }
 //#endregion
 export { useTooltip };

package/dist/components/ScalarTooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -2926,6 +2926,10 @@
   }
 }
 
+.scalar-app .highlighted\:bg-b-2[data-highlighted] {
+  background-color: var(--scalar-background-2);
+}
+
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -3661,7 +3665,8 @@ to {
   transform: translate3d(0, 0, 0);
 }
 
-.dark-mode .scalar-dropdown-item[data-v-6660bbc5]:hover {
+.dark-mode .scalar-dropdown-item[data-v-f5e0d3d8]:hover,
+.dark-mode .scalar-dropdown-item[data-highlighted][data-v-f5e0d3d8] {
   filter: brightness(1.1);
 }
 

package/dist/vue-styles.css

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

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.24.2",
+  "version": "0.25.0",
   "engines": {
     "node": ">=22"
   },
@@ -43,10 +43,10 @@
     "vue": "^3.5.30",
     "vue-component-type-helpers": "^3.2.6",
     "@scalar/code-highlight": "0.3.4",
-    "@scalar/themes": "0.15.3",
+    "@scalar/helpers": "0.8.0",
+    "@scalar/themes": "0.15.5",
     "@scalar/icons": "0.7.2",
-    "@scalar/helpers": "0.6.0",
-    "@scalar/use-hooks": "0.4.3"
+    "@scalar/use-hooks": "0.4.5"
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",