@scalar/components 0.22.0 → 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/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/style.css

@@ -2786,10 +2786,6 @@ to {
   cursor: auto;
 }
 
-.scalar-app .cursor-default {
-  cursor: default;
-}
-
 .scalar-app .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -3065,6 +3061,10 @@ to {
   border-color: var(--scalar-background-3);
 }
 
+.scalar-app .border-border-header {
+  border-color: var(--scalar-header-border-color, var(--scalar-border-color));
+}
+
 .scalar-app .border-c-1 {
   border-color: var(--scalar-color-1);
 }
@@ -3127,6 +3127,14 @@ to {
   background-color: var(--scalar-background-danger);
 }
 
+.scalar-app .bg-b-header-1 {
+  background-color: var(--scalar-header-background-1, var(--scalar-background-1));
+}
+
+.scalar-app .bg-b-header-cta {
+  background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+}
+
 .scalar-app .bg-b-tooltip {
   background-color: var(--scalar-tooltip-background);
 }
@@ -3481,11 +3489,6 @@ to {
   font-size: var(--scalar-font-size-6);
 }
 
-.scalar-app .leading-5 {
-  --tw-leading: calc(4px * 5);
-  line-height: 20px;
-}
-
 .scalar-app .leading-\[22px\] {
   --tw-leading: 22px;
   line-height: 22px;
@@ -3574,6 +3577,18 @@ to {
   color: var(--scalar-color-danger);
 }
 
+.scalar-app .text-c-header-1 {
+  color: var(--scalar-header-color-1, var(--scalar-color-1));
+}
+
+.scalar-app .text-c-header-2 {
+  color: var(--scalar-header-color-2, var(--scalar-color-2));
+}
+
+.scalar-app .text-c-header-cta {
+  color: var(--scalar-button-1-color);
+}
+
 .scalar-app .text-c-tooltip {
   color: var(--scalar-tooltip-color);
 }
@@ -3842,8 +3857,8 @@ to {
   justify-content: center;
 }
 
-:is(.scalar-app .\*\:gap-px > *) {
-  gap: 1px;
+:is(.scalar-app .\*\:gap-1 > *) {
+  gap: 4px;
 }
 
 :is(.scalar-app .\*\:rounded > *) {
@@ -3882,8 +3897,8 @@ to {
     background-color: var(--scalar-sidebar-indent-border-hover, var(--scalar-border-color));
   }
 
-  .scalar-app .group-hover\/button\:text-c-1:is(:where(.group\/button):hover *) {
-    color: var(--scalar-color-1);
+  .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
 }
 
@@ -3963,10 +3978,26 @@ to {
     background-color: var(--scalar-background-3);
   }
 
+  .scalar-app .hover\:bg-b-header-2:hover {
+    background-color: var(--scalar-header-background-2, var(--scalar-background-2));
+  }
+
   .scalar-app .hover\:bg-h-btn:hover {
     background-color: var(--scalar-button-1-hover);
   }
 
+  .scalar-app .hover\:bg-h-header-cta:hover {
+    background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-h-header-cta:hover {
+      background-color: color-mix(in srgb,
+    var(--scalar-header-call-to-action-color, var(--scalar-button-1)),
+    var(--scalar-header-background-1, var(--scalar-background-1)) 15%);
+    }
+  }
+
   .scalar-app .hover\:bg-sidebar-b-1:hover {
     background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
   }
@@ -4007,6 +4038,10 @@ to {
     color: var(--scalar-color-1);
   }
 
+  .scalar-app .hover\:text-c-header-1:hover {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:text-sidebar-c-1:hover {
     color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
   }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.22.0",
+  "version": "0.22.1",
   "engines": {
     "node": ">=22"
   },
@@ -40,10 +40,10 @@
     "vue": "^3.5.30",
     "vue-component-type-helpers": "^3.2.6",
     "@scalar/code-highlight": "0.3.3",
-    "@scalar/helpers": "0.5.0",
-    "@scalar/themes": "0.15.3",
+    "@scalar/helpers": "0.5.1",
     "@scalar/icons": "0.7.2",
-    "@scalar/use-hooks": "0.4.2"
+    "@scalar/use-hooks": "0.4.2",
+    "@scalar/themes": "0.15.3"
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.2",