@scalar/components 0.21.4 → 0.22.1

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"names":[],"mappings":"AA0DA;;;;;;;;;;;;;;;;;;;;;GAqBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAIhB,6DAA6D;cACnD,OAAO;IACjB,uCAAuC;gBAC3B,OAAO;IACnB,6DAA6D;YACrD,OAAO;EAmDb,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":"ScalarHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"names":[],"mappings":"AA+DA;;;;;;;;;;;;;;;;;;;;;GAqBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAIhB,6DAA6D;cACnD,OAAO;IACjB,uCAAuC;gBAC3B,OAAO;IACnB,6DAA6D;YACrD,OAAO;EAsDb,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/ScalarHeader/ScalarHeader.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeader.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Used to create a standardized header for Scalar applications\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <template #start>\n *     <ScalarMenu />\n *     <ScalarHeaderButton>Login</ScalarHeaderButton>\n *     <ScalarHeaderButton>Register</ScalarHeaderButton>\n *   </template>\n *   <template #default>\n *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>\n *   </template>\n *   <template #end>\n *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>\n *   </template>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n\ndefineSlots<{\n  /** The first section of the header, typically on the left */\n  start?(): unknown\n  /** The middle section of the header */\n  default?(): unknown\n  /** The last section of the header, typically on the right */\n  end?(): unknown\n}>()\n</script>\n<template>\n  <header\n    v-bind=\"\n      cx(\n        'flex min-h-header items-center justify-between gap-2 bg-b-2 border-b px-2 text-sm min-w-min',\n        '*:flex *:flex-1 *:items-center *:gap-px',\n      )\n    \">\n    <div class=\"justify-start\"><slot name=\"start\" /></div>\n    <div class=\"justify-center\"><slot /></div>\n    <div class=\"justify-end\"><slot name=\"end\" /></div>\n  </header>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHeader.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Used to create a standardized header for Scalar applications\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <template #start>\n *     <ScalarMenu />\n *     <ScalarHeaderButton>Login</ScalarHeaderButton>\n *     <ScalarHeaderButton>Register</ScalarHeaderButton>\n *   </template>\n *   <template #default>\n *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>\n *   </template>\n *   <template #end>\n *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>\n *   </template>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n\ndefineSlots<{\n  /** The first section of the header, typically on the left */\n  start?(): unknown\n  /** The middle section of the header */\n  default?(): unknown\n  /** The last section of the header, typically on the right */\n  end?(): unknown\n}>()\n</script>\n<template>\n  <header\n    v-bind=\"\n      cx(\n        'flex min-h-header items-center justify-between gap-2 border-b px-3 min-w-min',\n        '*:flex *:flex-1 *:items-center *:gap-1',\n        'bg-b-header-1 text-c-header border-border-header',\n      )\n    \">\n    <div class=\"justify-start\"><slot name=\"start\" /></div>\n    <div\n      v-if=\"$slots.default\"\n      class=\"justify-center\">\n      <slot />\n    </div>\n    <div class=\"justify-end\"><slot name=\"end\" /></div>\n  </header>\n</template>\n"],"mappings":""}

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

@@ -1,17 +1,20 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
 //#region src/components/ScalarHeader/ScalarHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "justify-start" };
-var _hoisted_2 = { class: "justify-center" };
+var _hoisted_2 = {
+	key: 0,
+	class: "justify-center"
+};
 var _hoisted_3 = { class: "justify-end" };
 var ScalarHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ScalarHeader",
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("header", normalizeProps(guardReactiveProps(unref(cx)("flex min-h-header items-center justify-between gap-2 bg-b-2 border-b px-2 text-sm min-w-min", "*:flex *:flex-1 *:items-center *:gap-px"))), [
+			return openBlock(), createElementBlock("header", normalizeProps(guardReactiveProps(unref(cx)("flex min-h-header items-center justify-between gap-2 border-b px-3 min-w-min", "*:flex *:flex-1 *:items-center *:gap-1", "bg-b-header-1 text-c-header border-border-header"))), [
 				createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "start")]),
-				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
 				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "end")])
 			], 16);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeader.vue.script.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Used to create a standardized header for Scalar applications\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <template #start>\n *     <ScalarMenu />\n *     <ScalarHeaderButton>Login</ScalarHeaderButton>\n *     <ScalarHeaderButton>Register</ScalarHeaderButton>\n *   </template>\n *   <template #default>\n *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>\n *   </template>\n *   <template #end>\n *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>\n *   </template>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n\ndefineSlots<{\n  /** The first section of the header, typically on the left */\n  start?(): unknown\n  /** The middle section of the header */\n  default?(): unknown\n  /** The last section of the header, typically on the right */\n  end?(): unknown\n}>()\n</script>\n<template>\n  <header\n    v-bind=\"\n      cx(\n        'flex min-h-header items-center justify-between gap-2 bg-b-2 border-b px-2 text-sm min-w-min',\n        '*:flex *:flex-1 *:items-center *:gap-px',\n      )\n    \">\n    <div class=\"justify-start\"><slot name=\"start\" /></div>\n    <div class=\"justify-center\"><slot /></div>\n    <div class=\"justify-end\"><slot name=\"end\" /></div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;EA4BA,MAAM,EAAE,OAAO,WAAU;;uBAYvB,mBAUS,UAAA,eAAA,mBATQ,MAAA,GAAE,CAAA,+FAAA,0CAAA,CAAA,CAAA,EAAA;IAMjB,mBAAsD,OAAtD,YAAsD,CAA3B,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;IAChD,mBAA0C,OAA1C,YAA0C,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;IACpC,mBAAkD,OAAlD,YAAkD,CAAzB,WAAmB,KAAA,QAAA,MAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarHeader.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Used to create a standardized header for Scalar applications\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <template #start>\n *     <ScalarMenu />\n *     <ScalarHeaderButton>Login</ScalarHeaderButton>\n *     <ScalarHeaderButton>Register</ScalarHeaderButton>\n *   </template>\n *   <template #default>\n *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>\n *   </template>\n *   <template #end>\n *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>\n *   </template>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n\ndefineSlots<{\n  /** The first section of the header, typically on the left */\n  start?(): unknown\n  /** The middle section of the header */\n  default?(): unknown\n  /** The last section of the header, typically on the right */\n  end?(): unknown\n}>()\n</script>\n<template>\n  <header\n    v-bind=\"\n      cx(\n        'flex min-h-header items-center justify-between gap-2 border-b px-3 min-w-min',\n        '*:flex *:flex-1 *:items-center *:gap-1',\n        'bg-b-header-1 text-c-header border-border-header',\n      )\n    \">\n    <div class=\"justify-start\"><slot name=\"start\" /></div>\n    <div\n      v-if=\"$slots.default\"\n      class=\"justify-center\">\n      <slot />\n    </div>\n    <div class=\"justify-end\"><slot name=\"end\" /></div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;EA4BA,MAAM,EAAE,OAAO,WAAU;;uBAYvB,mBAeS,UAAA,eAAA,mBAdQ,MAAA,GAAE,CAAA,gFAAA,0CAAA,mDAAA,CAAA,CAAA,EAAA;IAOjB,mBAAsD,OAAtD,YAAsD,CAA3B,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA;IAExCA,KAAAA,OAAO,WAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEV,mBAAkD,OAAlD,YAAkD,CAAzB,WAAmB,KAAA,QAAA,MAAA,CAAA,CAAA"}

package/dist/components/ScalarHeader/ScalarHeaderButton.vue.d.ts

@@ -15,10 +15,10 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     is?: string | Component;
-    active?: boolean;
+    cta?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     is?: string | Component;
-    active?: boolean;
+    cta?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The contents of the button */
     default?(): unknown;

package/dist/components/ScalarHeader/ScalarHeaderButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHeaderButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeaderButton.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;aACd,OAAO;;SADX,MAAM,GAAG,SAAS;aACd,OAAO;;IAMhB,iCAAiC;gBACrB,OAAO;EA4DjB,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":"ScalarHeaderButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeaderButton.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;UACjB,OAAO;;SADR,MAAM,GAAG,SAAS;UACjB,OAAO;;IAMb,iCAAiC;gBACrB,OAAO;EA4DjB,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/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  active?: 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-2.5 py-1.5 font-medium no-underline leading-5 ',\n  variants: {\n    active: {\n      true: 'bg-b-3 cursor-default',\n      false: 'bg-transparent hover:bg-b-3 cursor-pointer',\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({ active }))\">\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

@@ -5,19 +5,19 @@ var ScalarHeaderButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	__name: "ScalarHeaderButton",
 	props: {
 		is: { default: "button" },
-		active: { type: Boolean }
+		cta: { type: Boolean }
 	},
 	setup(__props) {
 		const variants = cva({
-			base: "group/button flex items-center rounded  px-2.5 py-1.5 font-medium no-underline leading-5 ",
-			variants: { active: {
-				true: "bg-b-3 cursor-default",
-				false: "bg-transparent hover:bg-b-3 cursor-pointer"
+			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"
 			} }
 		});
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({ type: __props.is === "button" ? "button" : void 0 }, unref(cx)(unref(variants)({ active: __props.active }))), {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({ type: __props.is === "button" ? "button" : void 0 }, unref(cx)(unref(variants)({ cta: __props.cta }))), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16, ["type"]);

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  active?: 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-2.5 py-1.5 font-medium no-underline leading-5 ',\n  variants: {\n    active: {\n      true: 'bg-b-3 cursor-default',\n      false: 'bg-transparent hover:bg-b-3 cursor-pointer',\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({ active }))\">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;EA6BA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,QAAQ;IACN,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,QAAG,QAAA,QAAM,CAAA,CAAA,CAAA,EAAA;2BACpB,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/ScalarIcon/variants.d.ts

@@ -4,58 +4,10 @@
 export declare const variants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
+    class?: import("cva").ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
+    className?: import("cva").ClassValue;
 })) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/components/ScalarIcon/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/variants.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBnB,CAAA"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/variants.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;0BAgBnB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG3E;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,8VA6Fd,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":"ScalarMenuButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG3E;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,8VAgGd,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/ScalarMenu/ScalarMenuButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton class=\"gap-0.75 px-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-3 group-hover/button:text-c-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarMenuButton.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton\n    class=\"gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":""}

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

@@ -10,12 +10,12 @@ var ScalarMenuButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	props: { open: { type: Boolean } },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScalarHeaderButton_default), { class: "gap-0.75 px-2" }, {
+			return openBlock(), createBlock(unref(ScalarHeaderButton_default), { class: "gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2" }, {
 				default: withCtx(() => [
 					createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "logo", {}, () => [createVNode(unref(ScalarIcon_default), { icon: "Logo" })])]),
 					createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.open ? "Close Menu" : "Open Menu"), 1)])]),
 					createVNode(unref(ScalarIconCaretDown), {
-						class: normalizeClass(["shrink-0 text-c-3 group-hover/button:text-c-1 size-3.5", __props.open ? "rotate-180" : ""]),
+						class: normalizeClass(["shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5", __props.open ? "rotate-180" : ""]),
 						weight: "bold"
 					}, null, 8, ["class"])
 				]),

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton class=\"gap-0.75 px-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-3 group-hover/button:text-c-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":";;;;;;;;;;;;uBAyBE,YAaqB,MAAA,2BAAA,EAAA,EAbD,OAAM,iBAAe,EAAA;2BAKjC;KAJN,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,QAAA,EAAA,QAAA,CADL,YAA0B,MAAA,mBAAA,EAAA,EAAd,MAAK,QAAM,CAAA,CAAA,CAAA,CAAA,CAAA;KAG3B,mBAEO,QAFP,YAEO,CADL,WAAiE,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBAA3C,QAAA,OAAI,eAAA,YAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;KAE5B,YAGkB,MAAA,oBAAA,EAAA;MAFhB,OAAK,eAAA,CAAC,0DACE,QAAA,OAAI,eAAA,GAAA,CAAA;MACZ,QAAO"}
+{"version":3,"file":"ScalarMenuButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Button component\n *\n * The trigger button for the ScalarMenu dropdown.\n * Displays a logo icon and a caret indicator.\n *\n * @example\n * <ScalarMenuButton :open=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarHeaderButton } from '../ScalarHeader'\nimport { ScalarIcon } from '../ScalarIcon'\nimport type { ScalarMenuButtonProps, ScalarMenuButtonSlots } from './types'\n\ndefineProps<ScalarMenuButtonProps>()\n\ndefineSlots<ScalarMenuButtonSlots>()\n</script>\n<template>\n  <ScalarHeaderButton\n    class=\"gap-0.75 px-2 py-1.5 text-c-header-1 hover:bg-b-header-2\">\n    <div class=\"h-5 w-auto\">\n      <slot name=\"logo\">\n        <ScalarIcon icon=\"Logo\" />\n      </slot>\n    </div>\n    <span class=\"sr-only\">\n      <slot name=\"label\">{{ open ? 'Close Menu' : 'Open Menu' }}</slot>\n    </span>\n    <ScalarIconCaretDown\n      class=\"shrink-0 text-c-header-2 group-hover/button:text-c-header-1 size-3.5\"\n      :class=\"open ? 'rotate-180' : ''\"\n      weight=\"bold\" />\n  </ScalarHeaderButton>\n</template>\n"],"mappings":";;;;;;;;;;;;uBAyBE,YAcqB,MAAA,2BAAA,EAAA,EAbnB,OAAM,4DAA0D,EAAA;2BAK1D;KAJN,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,QAAA,EAAA,QAAA,CADL,YAA0B,MAAA,mBAAA,EAAA,EAAd,MAAK,QAAM,CAAA,CAAA,CAAA,CAAA,CAAA;KAG3B,mBAEO,QAFP,YAEO,CADL,WAAiE,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBAA3C,QAAA,OAAI,eAAA,YAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;KAE5B,YAGkB,MAAA,oBAAA,EAAA;MAFhB,OAAK,eAAA,CAAC,wEACE,QAAA,OAAI,eAAA,GAAA,CAAA;MACZ,QAAO"}

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

@@ -18,10 +18,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     is?: string | Component;
     icon?: Icon | ScalarIconComponent;
     strong?: boolean;
+    submenu?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     is?: string | Component;
     icon?: Icon | ScalarIconComponent;
     strong?: boolean;
+    submenu?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAGlE;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;WAChB,IAAI,GAAG,mBAAmB;aACxB,OAAO;;SAFX,MAAM,GAAG,SAAS;WAChB,IAAI,GAAG,mBAAmB;aACxB,OAAO;;cA0FJ,CAAC,KAAK,IAAiB,KAAK,GAAG;EASzC,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":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAGlE;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;WAChB,IAAI,GAAG,mBAAmB;aACxB,OAAO;cACN,OAAO;;SAHZ,MAAM,GAAG,SAAS;WAChB,IAAI,GAAG,mBAAmB;aACxB,OAAO;cACN,OAAO;;cA2FL,CAAC,KAAK,IAAiB,KAAK,GAAG;EASzC,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/ScalarMenu/ScalarMenuLink.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuLink.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n *   Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = DropdownMenu.Item } = defineProps<{\n  is?: string | Component\n  icon?: Icon | ScalarIconComponent\n  strong?: boolean\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <ScalarDropdownButton\n    v-bind=\"cx('flex items-center')\"\n    :is=\"is\"\n    as=\"a\">\n    <ScalarIconLegacyAdapter\n      v-if=\"icon\"\n      :class=\"[\n        strong ? 'text-c-1' : 'text-c-2',\n        typeof icon === 'string' ? 'size-3' : 'size-3.5 -mx-0.25',\n      ]\"\n      :icon=\"icon\"\n      :thickness=\"strong ? '2.5' : '2'\"\n      :weight=\"strong ? 'bold' : 'regular'\" />\n    <div\n      v-else\n      class=\"size-3\" />\n    <div\n      class=\"flex items-center flex-1 min-w-0 truncate\"\n      :class=\"strong ? 'font-medium' : 'font-normal'\">\n      <slot />\n    </div>\n  </ScalarDropdownButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarMenuLink.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n *   Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = 'a' } = defineProps<{\n  is?: string | Component\n  icon?: Icon | ScalarIconComponent\n  strong?: boolean\n  submenu?: boolean\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <ScalarDropdownButton\n    v-bind=\"cx('flex items-center')\"\n    :is=\"submenu ? DropdownMenu.SubTrigger : DropdownMenu.Item\"\n    :as=\"is\">\n    <ScalarIconLegacyAdapter\n      v-if=\"icon\"\n      :class=\"[\n        strong ? 'text-c-1' : 'text-c-2',\n        typeof icon === 'string' ? 'size-3' : 'size-3.5 -mx-px',\n      ]\"\n      :icon=\"icon\"\n      :thickness=\"strong ? '2.5' : '2'\"\n      :weight=\"strong ? 'bold' : 'regular'\" />\n    <div\n      v-else\n      class=\"size-3\" />\n    <div\n      class=\"flex items-center flex-1 min-w-0 truncate\"\n      :class=\"strong ? 'font-medium' : 'font-normal'\">\n      <slot />\n    </div>\n  </ScalarDropdownButton>\n</template>\n"],"mappings":""}

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

@@ -12,20 +12,21 @@ var ScalarMenuLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	inheritAttrs: false,
 	__name: "ScalarMenuLink",
 	props: {
-		is: { default: () => DropdownMenu.Item },
+		is: { default: "a" },
 		icon: { type: [Object, Function] },
-		strong: { type: Boolean }
+		strong: { type: Boolean },
+		submenu: { type: Boolean }
 	},
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ScalarDropdownButton_default), mergeProps(unref(cx)("flex items-center"), {
-				is: __props.is,
-				as: "a"
+				is: __props.submenu ? unref(DropdownMenu).SubTrigger : unref(DropdownMenu).Item,
+				as: __props.is
 			}), {
 				default: withCtx(() => [__props.icon ? (openBlock(), createBlock(unref(ScalarIconLegacyAdapter_default), {
 					key: 0,
-					class: normalizeClass([__props.strong ? "text-c-1" : "text-c-2", typeof __props.icon === "string" ? "size-3" : "size-3.5 -mx-0.25"]),
+					class: normalizeClass([__props.strong ? "text-c-1" : "text-c-2", typeof __props.icon === "string" ? "size-3" : "size-3.5 -mx-px"]),
 					icon: __props.icon,
 					thickness: __props.strong ? "2.5" : "2",
 					weight: __props.strong ? "bold" : "regular"
@@ -36,7 +37,7 @@ var ScalarMenuLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"weight"
 				])) : (openBlock(), createElementBlock("div", _hoisted_1)), createElementVNode("div", { class: normalizeClass(["flex items-center flex-1 min-w-0 truncate", __props.strong ? "font-medium" : "font-normal"]) }, [renderSlot(_ctx.$slots, "default")], 2)]),
 				_: 3
-			}, 16, ["is"]);
+			}, 16, ["is", "as"]);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuLink.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n *   Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = DropdownMenu.Item } = defineProps<{\n  is?: string | Component\n  icon?: Icon | ScalarIconComponent\n  strong?: boolean\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <ScalarDropdownButton\n    v-bind=\"cx('flex items-center')\"\n    :is=\"is\"\n    as=\"a\">\n    <ScalarIconLegacyAdapter\n      v-if=\"icon\"\n      :class=\"[\n        strong ? 'text-c-1' : 'text-c-2',\n        typeof icon === 'string' ? 'size-3' : 'size-3.5 -mx-0.25',\n      ]\"\n      :icon=\"icon\"\n      :thickness=\"strong ? '2.5' : '2'\"\n      :weight=\"strong ? 'bold' : 'regular'\" />\n    <div\n      v-else\n      class=\"size-3\" />\n    <div\n      class=\"flex items-center flex-1 min-w-0 truncate\"\n      :class=\"strong ? 'font-medium' : 'font-normal'\">\n      <slot />\n    </div>\n  </ScalarDropdownButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA8BA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,YAqBuB,MAAA,6BAAA,EArBvB,WACU,MAoBa,GApBX,CAAA,oBAAA,EAAA;IACT,IAAI,QAAA;IACL,IAAG;;2BASuC,CAPlC,QAAA,QAAA,WAAA,EADR,YAQ0C,MAAA,gCAAA,EAAA;;KANvC,OAAK,eAAA,CAAY,QAAA,SAAM,aAAA,YAAA,OAA2C,QAAA,SAAI,WAAA,WAAA,oBAAA,CAAA;KAItE,MAAM,QAAA;KACN,WAAW,QAAA,SAAM,QAAA;KACjB,QAAQ,QAAA,SAAM,SAAA;;;;;;wBACjB,mBAEmB,OAFnB,WAEmB,GACnB,mBAIM,OAAA,EAHJ,OAAK,eAAA,CAAC,6CACE,QAAA,SAAM,gBAAA,cAAA,CAAA,EAAA,EAAA,CACd,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarMenuLink.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n *   Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = 'a' } = defineProps<{\n  is?: string | Component\n  icon?: Icon | ScalarIconComponent\n  strong?: boolean\n  submenu?: boolean\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <ScalarDropdownButton\n    v-bind=\"cx('flex items-center')\"\n    :is=\"submenu ? DropdownMenu.SubTrigger : DropdownMenu.Item\"\n    :as=\"is\">\n    <ScalarIconLegacyAdapter\n      v-if=\"icon\"\n      :class=\"[\n        strong ? 'text-c-1' : 'text-c-2',\n        typeof icon === 'string' ? 'size-3' : 'size-3.5 -mx-px',\n      ]\"\n      :icon=\"icon\"\n      :thickness=\"strong ? '2.5' : '2'\"\n      :weight=\"strong ? 'bold' : 'regular'\" />\n    <div\n      v-else\n      class=\"size-3\" />\n    <div\n      class=\"flex items-center flex-1 min-w-0 truncate\"\n      :class=\"strong ? 'font-medium' : 'font-normal'\">\n      <slot />\n    </div>\n  </ScalarDropdownButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,YAqBuB,MAAA,6BAAA,EArBvB,WACU,MAoBa,GApBX,CAAA,oBAAA,EAAA;IACT,IAAI,QAAA,UAAU,MAAA,aAAY,CAAC,aAAa,MAAA,aAAY,CAAC;IACrD,IAAI,QAAA;;2BASqC,CAPlC,QAAA,QAAA,WAAA,EADR,YAQ0C,MAAA,gCAAA,EAAA;;KANvC,OAAK,eAAA,CAAY,QAAA,SAAM,aAAA,YAAA,OAA2C,QAAA,SAAI,WAAA,WAAA,kBAAA,CAAA;KAItE,MAAM,QAAA;KACN,WAAW,QAAA,SAAM,QAAA;KACjB,QAAQ,QAAA,SAAM,SAAA;;;;;;wBACjB,mBAEmB,OAFnB,WAEmB,GACnB,mBAIM,OAAA,EAHJ,OAAK,eAAA,CAAC,6CACE,QAAA,SAAM,gBAAA,cAAA,CAAA,EAAA,EAAA,CACd,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

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      :is=\"DropdownMenu.SubTrigger\"\n      :icon=\"ScalarIconUserSwitch\"\n      v-bind=\"$attrs\">\n      <div>Change team</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-0.25 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 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":""}

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

@@ -25,15 +25,15 @@ var ScalarMenuTeamPicker_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenu).Sub, null, {
 				default: withCtx(() => [createVNode(unref(ScalarMenuLink_default), mergeProps({
-					is: unref(DropdownMenu).SubTrigger,
-					icon: unref(ScalarIconUserSwitch)
+					icon: unref(ScalarIconUserSwitch),
+					submenu: ""
 				}, _ctx.$attrs), {
 					default: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("div", null, "Change team", -1)), createVNode(unref(ScalarIconCaretRight), {
-						class: "ml-auto text-c-2 -mr-0.25 size-3",
+						class: "ml-auto text-c-2 -mr-px size-3",
 						weight: "bold"
 					})]),
 					_: 1
-				}, 16, ["is", "icon"]), createVNode(unref(DropdownMenu).Portal, null, {
+				}, 16, ["icon"]), createVNode(unref(DropdownMenu).Portal, null, {
 					default: withCtx(() => [createVNode(unref(DropdownMenu).SubContent, {
 						as: unref(ScalarDropdownMenu_default),
 						class: "max-h-radix-popper z-context-plus",

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      :is=\"DropdownMenu.SubTrigger\"\n      :icon=\"ScalarIconUserSwitch\"\n      v-bind=\"$attrs\">\n      <div>Change team</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-0.25 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,IAAI,MAAA,aAAY,CAAC;KACjB,MAAM,MAAA,qBAAoB;OACnBA,KAAAA,OAAM,EAAA;4BACQ,CAAA,OAAA,OAAA,OAAA,KAAtB,mBAAsB,OAAA,MAAjB,eAAW,GAAA,GAChB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;4BAEX,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 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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuWorkspacePicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n  ScalarListboxCheckbox,\n  type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n  /** Label for the group */\n  label?: string\n  /** Options within the group */\n  options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n  /** The list of workspaces to choose from */\n  workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n  /** Create a new workspace */\n  (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :is=\"DropdownMenu.SubTrigger\"\n      :icon=\"ScalarIconSwap\"\n      v-bind=\"$attrs\">\n      <div>Change workspace</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-0.25 size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n\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          <template\n            v-for=\"(group, groupIndex) in workspaceOptions\"\n            :key=\"groupIndex\">\n            <!-- Group label (only shown if there's a label) -->\n            <DropdownMenu.Label\n              v-if=\"group.label\"\n              class=\"px-3 py-1.5 text-xs font-medium text-c-3 select-none\">\n              {{ group.label }}\n            </DropdownMenu.Label>\n\n            <!-- Group items -->\n            <DropdownMenu.RadioItem\n              v-for=\"w in group.options\"\n              :key=\"w.id\"\n              :as=\"ScalarDropdownButton\"\n              class=\"group/item flex items-center\"\n              :value=\"w.id\">\n              <div class=\"flex h-full items-center gap-1 flex-1 truncate\">\n                {{ w.label }}\n              </div>\n              <ScalarListboxCheckbox\n                class=\"ml-auto\"\n                :selected=\"w.id === model\" />\n            </DropdownMenu.RadioItem>\n\n            <!-- Group separator (only between groups, not after the last one) -->\n            <DropdownMenu.Separator\n              v-if=\"groupIndex < workspaceOptions.length - 1\"\n              class=\"h-px bg-b-3 my-1.5\" />\n          </template>\n        </DropdownMenu.RadioGroup>\n\n        <DropdownMenu.Item\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('createWorkspace')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create workspace\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarMenuWorkspacePicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n  ScalarListboxCheckbox,\n  type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n  /** Label for the group */\n  label?: string\n  /** Options within the group */\n  options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n  /** The list of workspaces to choose from */\n  workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n  /** Create a new workspace */\n  (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :icon=\"ScalarIconSwap\"\n      submenu\n      v-bind=\"$attrs\">\n      <div>Change workspace</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-px size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n\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          <template\n            v-for=\"(group, groupIndex) in workspaceOptions\"\n            :key=\"groupIndex\">\n            <!-- Group label (only shown if there's a label) -->\n            <DropdownMenu.Label\n              v-if=\"group.label\"\n              class=\"px-3 py-1.5 text-xs font-medium text-c-3 select-none\">\n              {{ group.label }}\n            </DropdownMenu.Label>\n\n            <!-- Group items -->\n            <DropdownMenu.RadioItem\n              v-for=\"w in group.options\"\n              :key=\"w.id\"\n              :as=\"ScalarDropdownButton\"\n              class=\"group/item flex items-center\"\n              :value=\"w.id\">\n              <div class=\"flex h-full items-center gap-1 flex-1 truncate\">\n                {{ w.label }}\n              </div>\n              <ScalarListboxCheckbox\n                class=\"ml-auto\"\n                :selected=\"w.id === model\" />\n            </DropdownMenu.RadioItem>\n\n            <!-- Group separator (only between groups, not after the last one) -->\n            <DropdownMenu.Separator\n              v-if=\"groupIndex < workspaceOptions.length - 1\"\n              class=\"h-px bg-b-3 my-1.5\" />\n          </template>\n        </DropdownMenu.RadioGroup>\n\n        <DropdownMenu.Item\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('createWorkspace')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create workspace\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":""}

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

@@ -21,15 +21,15 @@ var ScalarMenuWorkspacePicker_vue_vue_type_script_setup_true_lang_default = /* @
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenu).Sub, null, {
 				default: withCtx(() => [createVNode(ScalarMenuLink_default, mergeProps({
-					is: unref(DropdownMenu).SubTrigger,
-					icon: unref(ScalarIconSwap)
+					icon: unref(ScalarIconSwap),
+					submenu: ""
 				}, _ctx.$attrs), {
 					default: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("div", null, "Change workspace", -1)), createVNode(unref(ScalarIconCaretRight), {
-						class: "ml-auto text-c-2 -mr-0.25 size-3",
+						class: "ml-auto text-c-2 -mr-px size-3",
 						weight: "bold"
 					})]),
 					_: 1
-				}, 16, ["is", "icon"]), createVNode(unref(DropdownMenu).Portal, null, {
+				}, 16, ["icon"]), createVNode(unref(DropdownMenu).Portal, null, {
 					default: withCtx(() => [createVNode(unref(DropdownMenu).SubContent, {
 						as: unref(ScalarDropdownMenu_default),
 						class: "max-h-radix-popper z-context-plus",

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuWorkspacePicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n  ScalarListboxCheckbox,\n  type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n  /** Label for the group */\n  label?: string\n  /** Options within the group */\n  options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n  /** The list of workspaces to choose from */\n  workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n  /** Create a new workspace */\n  (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :is=\"DropdownMenu.SubTrigger\"\n      :icon=\"ScalarIconSwap\"\n      v-bind=\"$attrs\">\n      <div>Change workspace</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-0.25 size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n\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          <template\n            v-for=\"(group, groupIndex) in workspaceOptions\"\n            :key=\"groupIndex\">\n            <!-- Group label (only shown if there's a label) -->\n            <DropdownMenu.Label\n              v-if=\"group.label\"\n              class=\"px-3 py-1.5 text-xs font-medium text-c-3 select-none\">\n              {{ group.label }}\n            </DropdownMenu.Label>\n\n            <!-- Group items -->\n            <DropdownMenu.RadioItem\n              v-for=\"w in group.options\"\n              :key=\"w.id\"\n              :as=\"ScalarDropdownButton\"\n              class=\"group/item flex items-center\"\n              :value=\"w.id\">\n              <div class=\"flex h-full items-center gap-1 flex-1 truncate\">\n                {{ w.label }}\n              </div>\n              <ScalarListboxCheckbox\n                class=\"ml-auto\"\n                :selected=\"w.id === model\" />\n            </DropdownMenu.RadioItem>\n\n            <!-- Group separator (only between groups, not after the last one) -->\n            <DropdownMenu.Separator\n              v-if=\"groupIndex < workspaceOptions.length - 1\"\n              class=\"h-px bg-b-3 my-1.5\" />\n          </template>\n        </DropdownMenu.RadioGroup>\n\n        <DropdownMenu.Item\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('createWorkspace')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create workspace\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuCA,MAAM,OAAO;EAKb,MAAM,QAAQ,SAA+B,SAAA,aAAC;;uBAK5C,YA8DmB,MAAA,aAAA,CAAA,KAAA,MAAA;2BArDA,CARjB,YAQiB,wBARjB,WAQiB;KAPd,IAAI,MAAA,aAAY,CAAC;KACjB,MAAM,MAAA,eAAc;OACbA,KAAAA,OAAM,EAAA;4BACa,CAAA,OAAA,OAAA,OAAA,KAA3B,mBAA2B,OAAA,MAAtB,oBAAgB,GAAA,GACrB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;4BAGX,YAkDsB,MAAA,aAAA,CAAA,QAAA,MAAA;4BADM,CAhD1B,YAgD0B,MAAA,aAAA,CAAA,YAAA;MA/CvB,IAAI,MAAA,2BAAkB;MACvB,OAAM;MACL,YAAY;;6BAkCa,CAjC1B,YAiC0B,MAAA,aAAA,CAAA,YAAA;mBAhCf,MAAA;0EAAK,QAAA;OACd,OAAM;;8BAE2C,EAAA,UAAA,KAAA,EADjD,mBA6BW,UAAA,MAAA,WA5BqB,QAAA,mBAAtB,OAAO,eAAU;gEACnB,YAAU,EAAA;SAGR,MAAM,SAAA,WAAA,EADd,YAIqB,MAAA,aAAA,CAAA,OAAA;;UAFnB,OAAM;;iCACW,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;2BAIhB,mBAYyB,UAAA,MAAA,WAXX,MAAM,UAAX,MAAC;8BADV,YAYyB,MAAA,aAAA,CAAA,WAAA;WAVtB,KAAK,EAAE;WACP,IAAI,MAAA,6BAAoB;WACzB,OAAM;WACL,OAAO,EAAE;;kCAGJ,CAFN,mBAEM,OAFN,YAEM,gBADD,EAAE,MAAK,EAAA,EAAA,EAEZ,YAE+B,MAAA,8BAAA,EAAA;YAD7B,OAAM;YACL,UAAU,EAAE,OAAO,MAAA;;;;;SAKhB,aAAa,QAAA,iBAAiB,SAAM,KAAA,WAAA,EAD5C,YAE+B,MAAA,aAAA,CAAA,WAAA;;UAA7B,OAAM;;;;;6BAIZ,YAQoB,MAAA,aAAA,CAAA,MAAA;OAPjB,IAAI,MAAA,6BAAoB;OACzB,OAAM;OACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,kBAAA;;8BAGM,CAFlB,YAEkB,MAAA,eAAA,EAAA;QADhB,OAAM;QACN,QAAO;qDAAS,sBAEpB,GAAA,EAAA,CAAA"}
+{"version":3,"file":"ScalarMenuWorkspacePicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretRight,\n  ScalarIconPlus,\n  ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n  ScalarListboxCheckbox,\n  type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n  /** Label for the group */\n  label?: string\n  /** Options within the group */\n  options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n  /** The list of workspaces to choose from */\n  workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n  /** Create a new workspace */\n  (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <DropdownMenu.Sub>\n    <ScalarMenuLink\n      :icon=\"ScalarIconSwap\"\n      submenu\n      v-bind=\"$attrs\">\n      <div>Change workspace</div>\n      <ScalarIconCaretRight\n        class=\"ml-auto text-c-2 -mr-px size-3\"\n        weight=\"bold\" />\n    </ScalarMenuLink>\n\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          <template\n            v-for=\"(group, groupIndex) in workspaceOptions\"\n            :key=\"groupIndex\">\n            <!-- Group label (only shown if there's a label) -->\n            <DropdownMenu.Label\n              v-if=\"group.label\"\n              class=\"px-3 py-1.5 text-xs font-medium text-c-3 select-none\">\n              {{ group.label }}\n            </DropdownMenu.Label>\n\n            <!-- Group items -->\n            <DropdownMenu.RadioItem\n              v-for=\"w in group.options\"\n              :key=\"w.id\"\n              :as=\"ScalarDropdownButton\"\n              class=\"group/item flex items-center\"\n              :value=\"w.id\">\n              <div class=\"flex h-full items-center gap-1 flex-1 truncate\">\n                {{ w.label }}\n              </div>\n              <ScalarListboxCheckbox\n                class=\"ml-auto\"\n                :selected=\"w.id === model\" />\n            </DropdownMenu.RadioItem>\n\n            <!-- Group separator (only between groups, not after the last one) -->\n            <DropdownMenu.Separator\n              v-if=\"groupIndex < workspaceOptions.length - 1\"\n              class=\"h-px bg-b-3 my-1.5\" />\n          </template>\n        </DropdownMenu.RadioGroup>\n\n        <DropdownMenu.Item\n          :as=\"ScalarDropdownButton\"\n          class=\"flex items-center\"\n          @click=\"emit('createWorkspace')\">\n          <ScalarIconPlus\n            class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n            weight=\"bold\" />\n          Create workspace\n        </DropdownMenu.Item>\n      </DropdownMenu.SubContent>\n    </DropdownMenu.Portal>\n  </DropdownMenu.Sub>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuCA,MAAM,OAAO;EAKb,MAAM,QAAQ,SAA+B,SAAA,aAAC;;uBAK5C,YA8DmB,MAAA,aAAA,CAAA,KAAA,MAAA;2BArDA,CARjB,YAQiB,wBARjB,WAQiB;KAPd,MAAM,MAAA,eAAc;KACrB,SAAA;OACQA,KAAAA,OAAM,EAAA;4BACa,CAAA,OAAA,OAAA,OAAA,KAA3B,mBAA2B,OAAA,MAAtB,oBAAgB,GAAA,GACrB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;sBAGX,YAkDsB,MAAA,aAAA,CAAA,QAAA,MAAA;4BADM,CAhD1B,YAgD0B,MAAA,aAAA,CAAA,YAAA;MA/CvB,IAAI,MAAA,2BAAkB;MACvB,OAAM;MACL,YAAY;;6BAkCa,CAjC1B,YAiC0B,MAAA,aAAA,CAAA,YAAA;mBAhCf,MAAA;0EAAK,QAAA;OACd,OAAM;;8BAE2C,EAAA,UAAA,KAAA,EADjD,mBA6BW,UAAA,MAAA,WA5BqB,QAAA,mBAAtB,OAAO,eAAU;gEACnB,YAAU,EAAA;SAGR,MAAM,SAAA,WAAA,EADd,YAIqB,MAAA,aAAA,CAAA,OAAA;;UAFnB,OAAM;;iCACW,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;2BAIhB,mBAYyB,UAAA,MAAA,WAXX,MAAM,UAAX,MAAC;8BADV,YAYyB,MAAA,aAAA,CAAA,WAAA;WAVtB,KAAK,EAAE;WACP,IAAI,MAAA,6BAAoB;WACzB,OAAM;WACL,OAAO,EAAE;;kCAGJ,CAFN,mBAEM,OAFN,YAEM,gBADD,EAAE,MAAK,EAAA,EAAA,EAEZ,YAE+B,MAAA,8BAAA,EAAA;YAD7B,OAAM;YACL,UAAU,EAAE,OAAO,MAAA;;;;;SAKhB,aAAa,QAAA,iBAAiB,SAAM,KAAA,WAAA,EAD5C,YAE+B,MAAA,aAAA,CAAA,WAAA;;UAA7B,OAAM;;;;;6BAIZ,YAQoB,MAAA,aAAA,CAAA,MAAA;OAPjB,IAAI,MAAA,6BAAoB;OACzB,OAAM;OACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,kBAAA;;8BAGM,CAFlB,YAEkB,MAAA,eAAA,EAAA;QADhB,OAAM;QACN,QAAO;qDAAS,sBAEpB,GAAA,EAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarFooter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarFooter.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n *   <ScalarSidebarFooter>\n *     <!-- Footer content at the top of the footer -->\n *     <template #description>\n *       <!-- Replaces the Powered by Scalar link -->\n *     </template>\n *     <template #toggle>\n *       <!-- Replaces the color mode toggle -->\n *     </template>\n *   </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n  /** Footer content at the top of the footer */\n  default?(): unknown\n  /** Replaces the Powered by Scalar link */\n  description?(): unknown\n  /** Replaces the color mode toggle */\n  toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex flex-col gap-3 p-3 pt-0 border-sidebar-border')\">\n    <slot />\n    <div class=\"flex items-center\">\n      <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n        <slot name=\"description\">\n          <a\n            class=\"no-underline hover:underline\"\n            href=\"https://www.scalar.com\"\n            target=\"_blank\">\n            Powered by Scalar\n          </a>\n        </slot>\n      </div>\n      <slot name=\"toggle\">\n        <ScalarColorModeToggle />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarFooter.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n *   <ScalarSidebarFooter>\n *     <!-- Footer content at the top of the footer -->\n *     <template #description>\n *       <!-- Replaces the Powered by Scalar link -->\n *     </template>\n *     <template #toggle>\n *       <!-- Replaces the color mode toggle -->\n *     </template>\n *   </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n  /** Footer content at the top of the footer */\n  default?(): unknown\n  /** Replaces the Powered by Scalar link */\n  description?(): unknown\n  /** Replaces the color mode toggle */\n  toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex flex-col gap-3 px-3 pb-3 border-sidebar-border')\">\n    <slot />\n    <div class=\"flex items-center\">\n      <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n        <slot name=\"description\">\n          <a\n            class=\"no-underline hover:underline\"\n            href=\"https://www.scalar.com\"\n            target=\"_blank\">\n            Powered by Scalar\n          </a>\n        </slot>\n      </div>\n      <slot name=\"toggle\">\n        <ScalarColorModeToggle />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -10,7 +10,7 @@ var ScalarSidebarFooter_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex flex-col gap-3 p-3 pt-0 border-sidebar-border"))), [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "description", {}, () => [_cache[0] || (_cache[0] = createElementVNode("a", {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex flex-col gap-3 px-3 pb-3 border-sidebar-border"))), [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "description", {}, () => [_cache[0] || (_cache[0] = createElementVNode("a", {
 				class: "no-underline hover:underline",
 				href: "https://www.scalar.com",
 				target: "_blank"

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n *   <ScalarSidebarFooter>\n *     <!-- Footer content at the top of the footer -->\n *     <template #description>\n *       <!-- Replaces the Powered by Scalar link -->\n *     </template>\n *     <template #toggle>\n *       <!-- Replaces the color mode toggle -->\n *     </template>\n *   </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n  /** Footer content at the top of the footer */\n  default?(): unknown\n  /** Replaces the Powered by Scalar link */\n  description?(): unknown\n  /** Replaces the color mode toggle */\n  toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex flex-col gap-3 p-3 pt-0 border-sidebar-border')\">\n    <slot />\n    <div class=\"flex items-center\">\n      <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n        <slot name=\"description\">\n          <a\n            class=\"no-underline hover:underline\"\n            href=\"https://www.scalar.com\"\n            target=\"_blank\">\n            Powered by Scalar\n          </a>\n        </slot>\n      </div>\n      <slot name=\"toggle\">\n        <ScalarColorModeToggle />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAiBM,OAAA,eAAA,mBAjBO,MAAA,GAAE,CAAA,qDAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,EACR,mBAcM,OAdN,YAcM,CAbJ,mBASM,OATN,YASM,CARJ,WAOO,KAAA,QAAA,eAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KANL,mBAKI,KAAA;IAJF,OAAM;IACN,MAAK;IACL,QAAO;MAAS,uBAElB,GAAA,EAAA,CAAA,CAAA,CAAA,EAGJ,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CADL,YAAyB,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarSidebarFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n *   <ScalarSidebarFooter>\n *     <!-- Footer content at the top of the footer -->\n *     <template #description>\n *       <!-- Replaces the Powered by Scalar link -->\n *     </template>\n *     <template #toggle>\n *       <!-- Replaces the color mode toggle -->\n *     </template>\n *   </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n  /** Footer content at the top of the footer */\n  default?(): unknown\n  /** Replaces the Powered by Scalar link */\n  description?(): unknown\n  /** Replaces the color mode toggle */\n  toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex flex-col gap-3 px-3 pb-3 border-sidebar-border')\">\n    <slot />\n    <div class=\"flex items-center\">\n      <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n        <slot name=\"description\">\n          <a\n            class=\"no-underline hover:underline\"\n            href=\"https://www.scalar.com\"\n            target=\"_blank\">\n            Powered by Scalar\n          </a>\n        </slot>\n      </div>\n      <slot name=\"toggle\">\n        <ScalarColorModeToggle />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAiBM,OAAA,eAAA,mBAjBO,MAAA,GAAE,CAAA,sDAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,EACR,mBAcM,OAdN,YAcM,CAbJ,mBASM,OATN,YASM,CARJ,WAOO,KAAA,QAAA,eAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KANL,mBAKI,KAAA;IAJF,OAAM;IACN,MAAK;IACL,QAAO;MAAS,uBAElB,GAAA,EAAA,CAAA,CAAA,CAAA,EAGJ,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CADL,YAAyB,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.d.ts

@@ -2,10 +2,14 @@
  * Scalar Virtual Text component
  *
  * Renders large blocks of text efficiently using virtualized scrolling.
- * Only the visible lines are rendered to the DOM.
+ * Only the visible lines are rendered to the DOM. Supports in-content
+ * search with match highlighting and navigation (Cmd/Ctrl+F).
  *
  * @example
  * <ScalarVirtualText text="line1\nline2\nline3" :lineHeight="20" />
+ *
+ * @example
+ * <ScalarVirtualText text="lots of text" searchable />
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -20,6 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     containerClass?: string;
     contentClass?: string;
     lineClass?: string;
+    /** Enable built-in search with Cmd/Ctrl+F */
+    searchable?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** Text to display */
     text: string;
@@ -31,10 +37,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     containerClass?: string;
     contentClass?: string;
     lineClass?: string;
+    /** Enable built-in search with Cmd/Ctrl+F */
+    searchable?: boolean;
 }> & Readonly<{}>, {
     lineHeight: number;
     containerClass: string;
     contentClass: string;
     lineClass: string;
+    searchable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=ScalarVirtualText.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AA0IA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;;IATlB,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;;gBAHL,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;6EAqJlB,CAAC"}
+{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AAkXA;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;IAXpB,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;gBALP,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;gBAEL,OAAO;6EA+ZpB,CAAC"}

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.js

@@ -1,6 +1,8 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 import ScalarVirtualText_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualText.vue.script.js";
+/* empty css                                */
 //#region src/components/ScalarVirtualText/ScalarVirtualText.vue
-var ScalarVirtualText_default = ScalarVirtualText_vue_vue_type_script_setup_true_lang_default;
+var ScalarVirtualText_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarVirtualText_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b50a85e1"]]);
 //#endregion
 export { ScalarVirtualText_default as default };