@scalar/components 0.28.1 → 0.29.1

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

@@ -1,34 +1,38 @@
+import { type Component } from 'vue';
 /**
  * Scalar header component
  *
- * Used to create a standardized header for Scalar applications
+ * Provides the header chrome; layout is left to the consumer. Columns hug their
+ * content, so give the content-bearing one `flex-1` to take the free space - that
+ * is also the column that absorbs the shrinking when space runs out.
+ *
+ * Headers that used the old middle slot are no longer centred: wrap that content
+ * in a `ScalarHeaderColumn` with `justify-center` and give both side columns
+ * `flex-1`.
  *
  * @example
  * ```html
  * <ScalarHeader>
- *   <template #start>
+ *   <ScalarHeaderColumn class="flex-1">
  *     <ScalarMenu />
- *     <ScalarHeaderButton>Login</ScalarHeaderButton>
- *     <ScalarHeaderButton>Register</ScalarHeaderButton>
- *   </template>
- *   <template #default>
- *     <ScalarHeaderButton>Middle thing</ScalarHeaderButton>
- *   </template>
- *   <template #end>
- *     <ScalarHeaderButton>Call to Action</ScalarHeaderButton>
- *   </template>
+ *   </ScalarHeaderColumn>
+ *   <ScalarHeaderColumn class="justify-end">
+ *     <ScalarHeaderButton cta>Register</ScalarHeaderButton>
+ *   </ScalarHeaderColumn>
  * </ScalarHeader>
  * ```
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    /** The first section of the header, typically on the left */
-    start?(): unknown;
-    /** The middle section of the header */
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Render as a `div` when nested inside an existing `header` landmark */
+    is?: string | Component;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Render as a `div` when nested inside an existing `header` landmark */
+    is?: string | Component;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /** The contents of the header, typically `ScalarHeaderColumn` children */
     default?(): unknown;
-    /** The last section of the header, typically on the right */
-    end?(): unknown;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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":"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"}
+{"version":3,"file":"ScalarHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"names":[],"mappings":"AAoEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAG9C;;;;;;;;;;;;;;;;;;;;;;GAsBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yEAAyE;SACpE,MAAM,GAAG,SAAS;;IADvB,yEAAyE;SACpE,MAAM,GAAG,SAAS;;IAMvB,0EAA0E;gBAC9D,OAAO;EAkEjB,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 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":""}
+{"version":3,"file":"ScalarHeader.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header component\n *\n * Provides the header chrome; layout is left to the consumer. Columns hug their\n * content, so give the content-bearing one `flex-1` to take the free space - that\n * is also the column that absorbs the shrinking when space runs out.\n *\n * Headers that used the old middle slot are no longer centred: wrap that content\n * in a `ScalarHeaderColumn` with `justify-center` and give both side columns\n * `flex-1`.\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <ScalarHeaderColumn class=\"flex-1\">\n *     <ScalarMenu />\n *   </ScalarHeaderColumn>\n *   <ScalarHeaderColumn class=\"justify-end\">\n *     <ScalarHeaderButton cta>Register</ScalarHeaderButton>\n *   </ScalarHeaderColumn>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, useSlots } from 'vue'\n\nconst { is = 'header' } = defineProps<{\n  /** Render as a `div` when nested inside an existing `header` landmark */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The contents of the header, typically `ScalarHeaderColumn` children */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\nconst slots = useSlots()\n\n// Vue drops content for slots we no longer render, so an unmigrated consumer\n// would otherwise just get an empty header.\nif (slots.start || slots.end) {\n  console.warn(\n    'ScalarHeader: the `start` and `end` slots have been removed. Compose `ScalarHeaderColumn` children in the default slot instead.',\n  )\n}\n</script>\n<template>\n  <component\n    :is\n    v-bind=\"\n      cx(\n        'flex min-h-header min-w-0 items-center justify-between gap-2 border-b px-3',\n        'bg-b-header-1 text-c-header border-border-header',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

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

@@ -1,22 +1,18 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-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 = {
-	key: 0,
-	class: "justify-center"
-};
-var _hoisted_3 = { class: "justify-end" };
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
 var ScalarHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "ScalarHeader",
+	props: { is: { default: "header" } },
 	setup(__props) {
 		const { cx } = useBindCx();
+		const slots = useSlots();
+		if (slots.start || slots.end) console.warn("ScalarHeader: the `start` and `end` slots have been removed. Compose `ScalarHeaderColumn` children in the default slot instead.");
 		return (_ctx, _cache) => {
-			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")]),
-				_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "end")])
-			], 16);
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("flex min-h-header min-w-0 items-center justify-between gap-2 border-b px-3", "bg-b-header-1 text-c-header border-border-header"))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"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,UAAU;;uBAYvB,mBAeS,UAAA,eAAA,mBAdQ,MAAA,EAAA,CAAE,CAAA,gFAAA,0CAAA,kDAAA,CAAA,CAAA,GAAA;IAOjB,mBAAsD,OAAtD,YAAsD,CAA3B,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;IAExCA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEV,mBAAkD,OAAlD,YAAkD,CAAzB,WAAmB,KAAA,QAAA,KAAA,CAAA,CAAA"}
+{"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 * Provides the header chrome; layout is left to the consumer. Columns hug their\n * content, so give the content-bearing one `flex-1` to take the free space - that\n * is also the column that absorbs the shrinking when space runs out.\n *\n * Headers that used the old middle slot are no longer centred: wrap that content\n * in a `ScalarHeaderColumn` with `justify-center` and give both side columns\n * `flex-1`.\n *\n * @example\n * ```html\n * <ScalarHeader>\n *   <ScalarHeaderColumn class=\"flex-1\">\n *     <ScalarMenu />\n *   </ScalarHeaderColumn>\n *   <ScalarHeaderColumn class=\"justify-end\">\n *     <ScalarHeaderButton cta>Register</ScalarHeaderButton>\n *   </ScalarHeaderColumn>\n * </ScalarHeader>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, useSlots } from 'vue'\n\nconst { is = 'header' } = defineProps<{\n  /** Render as a `div` when nested inside an existing `header` landmark */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The contents of the header, typically `ScalarHeaderColumn` children */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\nconst slots = useSlots()\n\n// Vue drops content for slots we no longer render, so an unmigrated consumer\n// would otherwise just get an empty header.\nif (slots.start || slots.end) {\n  console.warn(\n    'ScalarHeader: the `start` and `end` slots have been removed. Compose `ScalarHeaderColumn` children in the default slot instead.',\n  )\n}\n</script>\n<template>\n  <component\n    :is\n    v-bind=\"\n      cx(\n        'flex min-h-header min-w-0 items-center justify-between gap-2 border-b px-3',\n        'bg-b-header-1 text-c-header border-border-header',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;EAyCA,MAAM,EAAE,OAAO,UAAU;EACzB,MAAM,QAAQ,SAAS;EAIvB,IAAI,MAAM,SAAS,MAAM,KACvB,QAAQ,KACN,iIACF;;uBAIA,YASY,wBART,QAAA,EAAE,GAAA,eAAA,mBACY,MAAA,EAAA,CAAE,CAAA,8EAAA,kDAAA,CAAA,CAAA,GAAA;2BAMT,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

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

@@ -0,0 +1,29 @@
+/**
+ * Scalar header column component
+ *
+ * A section of a `ScalarHeader`. Columns hug their content, so pass `flex-1` to
+ * take the free space and `justify-center` / `justify-end` to place the contents.
+ *
+ * Carries `min-w-0`, which lets a `flex-1` column shrink below its contents so a
+ * long title ellipsizes rather than widening the header. Hug columns do not
+ * shrink, so keep a trailing action cluster narrow enough to fit on its own.
+ *
+ * @example
+ * ```html
+ * <ScalarHeaderColumn class="flex-1">
+ *   <ScalarMenu />
+ * </ScalarHeaderColumn>
+ * ```
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    /** The contents of the column */
+    default?(): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarHeaderColumn.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHeaderColumn.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/ScalarHeaderColumn.vue"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;;;;;GAgBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,iCAAiC;gBACrB,OAAO;EAiCjB,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/ScalarHeaderColumn.vue.js

@@ -0,0 +1,7 @@
+import ScalarHeaderColumn_vue_vue_type_script_setup_true_lang_default from "./ScalarHeaderColumn.vue.script.js";
+//#region src/components/ScalarHeader/ScalarHeaderColumn.vue
+var ScalarHeaderColumn_default = ScalarHeaderColumn_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarHeaderColumn_default as default };
+
+//# sourceMappingURL=ScalarHeaderColumn.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHeaderColumn.vue.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeaderColumn.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header column component\n *\n * A section of a `ScalarHeader`. Columns hug their content, so pass `flex-1` to\n * take the free space and `justify-center` / `justify-end` to place the contents.\n *\n * Carries `min-w-0`, which lets a `flex-1` column shrink below its contents so a\n * long title ellipsizes rather than widening the header. Hug columns do not\n * shrink, so keep a trailing action cluster narrow enough to fit on its own.\n *\n * @example\n * ```html\n * <ScalarHeaderColumn class=\"flex-1\">\n *   <ScalarMenu />\n * </ScalarHeaderColumn>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineSlots<{\n  /** The contents of the column */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex min-w-0 shrink-0 items-center justify-start gap-1')\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
+var ScalarHeaderColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarHeaderColumn",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex min-w-0 shrink-0 items-center justify-start gap-1"))), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarHeaderColumn_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarHeaderColumn.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHeaderColumn.vue.script.js","names":[],"sources":["../../../src/components/ScalarHeader/ScalarHeaderColumn.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar header column component\n *\n * A section of a `ScalarHeader`. Columns hug their content, so pass `flex-1` to\n * take the free space and `justify-center` / `justify-end` to place the contents.\n *\n * Carries `min-w-0`, which lets a `flex-1` column shrink below its contents so a\n * long title ellipsizes rather than widening the header. Hug columns do not\n * shrink, so keep a trailing action cluster narrow enough to fit on its own.\n *\n * @example\n * ```html\n * <ScalarHeaderColumn class=\"flex-1\">\n *   <ScalarMenu />\n * </ScalarHeaderColumn>\n * ```\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineSlots<{\n  /** The contents of the column */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div v-bind=\"cx('flex min-w-0 shrink-0 items-center justify-start gap-1')\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EA6BA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAEM,OAAA,eAAA,mBAFO,MAAA,EAAA,CAAE,CAAA,wDAAA,CAAA,CAAA,GAAA,CACb,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/components/ScalarHeader/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ScalarHeader } from './ScalarHeader.vue.js';
 export { default as ScalarHeaderButton } from './ScalarHeaderButton.vue.js';
+export { default as ScalarHeaderColumn } from './ScalarHeaderColumn.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/components/ScalarHeader/index.js

@@ -1,3 +1,4 @@
 import ScalarHeader_default from "./ScalarHeader.vue.js";
 import ScalarHeaderButton_default from "./ScalarHeaderButton.vue.js";
-export { ScalarHeader_default as ScalarHeader, ScalarHeaderButton_default as ScalarHeaderButton };
+import ScalarHeaderColumn_default from "./ScalarHeaderColumn.vue.js";
+export { ScalarHeader_default as ScalarHeader, ScalarHeaderButton_default as ScalarHeaderButton, ScalarHeaderColumn_default as ScalarHeaderColumn };

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":"AAqDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG3E;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,8VA2Gd,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":"AAuDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG3E;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,8VA6Gd,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\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\n      v-if=\"$slots.title\"\n      class=\"ml-1 truncate text-sm font-medium\">\n      <slot name=\"title\" />\n    </span>\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":""}
+{"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\n          icon=\"Logo\"\n          size=\"lg\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"$slots.title\"\n      class=\"ml-1 truncate text-sm font-medium\">\n      <slot name=\"title\" />\n    </span>\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

@@ -16,7 +16,10 @@ var ScalarMenuButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		return (_ctx, _cache) => {
 			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("div", _hoisted_1, [renderSlot(_ctx.$slots, "logo", {}, () => [createVNode(unref(ScalarIcon_default), {
+						icon: "Logo",
+						size: "lg"
+					})])]),
 					_ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true),
 					createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.open ? "Close Menu" : "Open Menu"), 1)])]),
 					createVNode(unref(ScalarIconCaretDown), {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuButton.vue.script.js","names":["$slots"],"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\n      v-if=\"$slots.title\"\n      class=\"ml-1 truncate text-sm font-medium\">\n      <slot name=\"title\" />\n    </span>\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,YAmBqB,MAAA,0BAAA,GAAA,EAlBnB,OAAM,2DAA0D,GAAA;2BAK1D;KAJN,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADL,YAA0B,MAAA,kBAAA,GAAA,EAAd,MAAK,OAAM,CAAA,CAAA,CAAA,CAAA,CAAA;KAInBA,KAAAA,OAAO,SAAA,UAAA,GADf,mBAIO,QAJP,YAIO,CADL,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEvB,mBAEO,QAFP,YAEO,CADL,WAAiE,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBAA3C,QAAA,OAAI,eAAA,WAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;KAE5B,YAGkB,MAAA,mBAAA,GAAA;MAFhB,OAAK,eAAA,CAAC,wEACE,QAAA,OAAI,eAAA,EAAA,CAAA;MACZ,QAAO"}
+{"version":3,"file":"ScalarMenuButton.vue.script.js","names":["$slots"],"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\n          icon=\"Logo\"\n          size=\"lg\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"$slots.title\"\n      class=\"ml-1 truncate text-sm font-medium\">\n      <slot name=\"title\" />\n    </span>\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,YAqBqB,MAAA,0BAAA,GAAA,EApBnB,OAAM,2DAA0D,GAAA;2BAO1D;KANN,mBAMM,OANN,YAMM,CALJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,YAEc,MAAA,kBAAA,GAAA;MADZ,MAAK;MACL,MAAK;;KAIHA,KAAAA,OAAO,SAAA,UAAA,GADf,mBAIO,QAJP,YAIO,CADL,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEvB,mBAEO,QAFP,YAEO,CADL,WAAiE,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBAA3C,QAAA,OAAI,eAAA,WAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;KAE5B,YAGkB,MAAA,mBAAA,GAAA;MAFhB,OAAK,eAAA,CAAC,wEACE,QAAA,OAAI,eAAA,EAAA,CAAA;MACZ,QAAO"}

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { ScalarFileUpload, ScalarFileUploadDropTarget, ScalarFileUploadError, Sc
 export type { ScalarFloatingOptions } from './components/ScalarFloating/index.js';
 export { ScalarFloating, ScalarFloatingBackdrop } from './components/ScalarFloating/index.js';
 export { ScalarForm, ScalarFormError, ScalarFormField, ScalarFormInput, ScalarFormInputGroup, ScalarFormSection, } from './components/ScalarForm/index.js';
-export { ScalarHeader, ScalarHeaderButton } from './components/ScalarHeader/index.js';
+export { ScalarHeader, ScalarHeaderButton, ScalarHeaderColumn } from './components/ScalarHeader/index.js';
 export type { ScalarHotkeyModifier } from './components/ScalarHotkey/index.js';
 export { ScalarHotkey, formatHotkeySymbols } from './components/ScalarHotkey/index.js';
 export type { Icon } from './components/ScalarIcon/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -50,6 +50,7 @@ import ScalarFileUpload_default from "./components/ScalarFileUpload/ScalarFileUp
 import ScalarFileUploadFileList_default from "./components/ScalarFileUpload/ScalarFileUploadFileList.vue.js";
 import ScalarHeader_default from "./components/ScalarHeader/ScalarHeader.vue.js";
 import ScalarHeaderButton_default from "./components/ScalarHeader/ScalarHeaderButton.vue.js";
+import ScalarHeaderColumn_default from "./components/ScalarHeader/ScalarHeaderColumn.vue.js";
 import { formatHotkeySymbols } from "./components/ScalarHotkey/formatHotkey.js";
 import ScalarHotkey_default from "./components/ScalarHotkey/ScalarHotkey.vue.js";
 import ScalarIcon_default from "./components/ScalarIcon/ScalarIcon.vue.js";
@@ -109,4 +110,4 @@ import ScalarVirtualCodeBlock_default from "./components/ScalarVirtualCodeBlock/
 import ScalarWrappingText_default from "./components/ScalarWrappingText/ScalarWrappingText.vue.js";
 import { addScalarClassesToHeadless } from "./helpers/add-scalar-classes.js";
 import { compose, cva, cx, tw, useBindCx } from "@scalar/use-hooks/useBindCx";
-export { ScalarButton_default as ScalarButton, ScalarCard_default as ScalarCard, ScalarCardFooter_default as ScalarCardFooter, ScalarCardHeader_default as ScalarCardHeader, ScalarCardSection_default as ScalarCardSection, ScalarCheckbox_default as ScalarCheckbox, ScalarCheckboxGroup_default as ScalarCheckboxGroup, ScalarCheckboxInput_default as ScalarCheckboxInput, ScalarCheckboxRadioGroup_default as ScalarCheckboxRadioGroup, ScalarCodeBlock_default as ScalarCodeBlock, ScalarCodeBlockCopy_default as ScalarCodeBlockCopy, ScalarColorModeToggle_default as ScalarColorModeToggle, ScalarColorModeToggleButton_default as ScalarColorModeToggleButton, ScalarColorModeToggleIcon_default as ScalarColorModeToggleIcon, ScalarCombobox_default as ScalarCombobox, ScalarComboboxMultiselect_default as ScalarComboboxMultiselect, ScalarCopy_default as ScalarCopy, ScalarCopyBackdrop_default as ScalarCopyBackdrop, ScalarCopyButton_default as ScalarCopyButton, ScalarDropdown_default as ScalarDropdown, ScalarDropdownButton_default as ScalarDropdownButton, ScalarDropdownDivider_default as ScalarDropdownDivider, ScalarDropdownItem_default as ScalarDropdownItem, ScalarDropdownMenu_default as ScalarDropdownMenu, ScalarErrorBoundary_default as ScalarErrorBoundary, ScalarFileUpload_default as ScalarFileUpload, ScalarFileUploadDropTarget_default as ScalarFileUploadDropTarget, ScalarFileUploadError_default as ScalarFileUploadError, ScalarFileUploadFileList_default as ScalarFileUploadFileList, ScalarFileUploadInput_default as ScalarFileUploadInput, ScalarFileUploadInputCompact_default as ScalarFileUploadInputCompact, ScalarFileUploadLoading_default as ScalarFileUploadLoading, ScalarFloating_default as ScalarFloating, ScalarFloatingBackdrop_default as ScalarFloatingBackdrop, ScalarForm_default as ScalarForm, ScalarFormError_default as ScalarFormError, ScalarFormField_default as ScalarFormField, ScalarFormInput_default as ScalarFormInput, ScalarFormInputGroup_default as ScalarFormInputGroup, ScalarFormSection_default as ScalarFormSection, ScalarHeader_default as ScalarHeader, ScalarHeaderButton_default as ScalarHeaderButton, ScalarHotkey_default as ScalarHotkey, ScalarHotkeyTooltip_default as ScalarHotkeyTooltip, ScalarIcon_default as ScalarIcon, ScalarIconButton_default as ScalarIconButton, ScalarIconLegacyAdapter_default as ScalarIconLegacyAdapter, ScalarListbox_default as ScalarListbox, ScalarListboxCheckbox_default as ScalarListboxCheckbox, ScalarListboxInput_default as ScalarListboxInput, ScalarListboxItem_default as ScalarListboxItem, ScalarLoading_default as ScalarLoading, ScalarMarkdown_default as ScalarMarkdown, ScalarMarkdownSummary_default as ScalarMarkdownSummary, ScalarMenu_default as ScalarMenu, ScalarMenuButton_default as ScalarMenuButton, ScalarMenuLink_default as ScalarMenuLink, ScalarMenuProduct_default as ScalarMenuProduct, ScalarMenuProducts_default as ScalarMenuProducts, ScalarMenuResources_default as ScalarMenuResources, ScalarMenuSection_default as ScalarMenuSection, ScalarMenuSupport_default as ScalarMenuSupport, ScalarMenuTeamPicker_default as ScalarMenuTeamPicker, ScalarMenuTeamProfile_default as ScalarMenuTeamProfile, ScalarMenuWorkspacePicker_default as ScalarMenuWorkspacePicker, ScalarModal_default as ScalarModal, ScalarPopover_default as ScalarPopover, ScalarSavePrompt_default as ScalarSavePrompt, ScalarSearchInput_default as ScalarSearchInput, ScalarSearchResultItem_default as ScalarSearchResultItem, ScalarSearchResultList_default as ScalarSearchResultList, ScalarSidebar_default as ScalarSidebar, ScalarSidebarButton_default as ScalarSidebarButton, ScalarSidebarFooter_default as ScalarSidebarFooter, ScalarSidebarGroup_default as ScalarSidebarGroup, ScalarSidebarGroupToggle_default as ScalarSidebarGroupToggle, ScalarSidebarGroupToggleButton_default as ScalarSidebarGroupToggleButton, ScalarSidebarGroupToggleSpacer_default as ScalarSidebarGroupToggleSpacer, ScalarSidebarIndent_default as ScalarSidebarIndent, ScalarSidebarItem_default as ScalarSidebarItem, ScalarSidebarItems_default as ScalarSidebarItems, ScalarSidebarNestedItems_default as ScalarSidebarNestedItems, ScalarSidebarSearchButton_default as ScalarSidebarSearchButton, ScalarSidebarSearchInput_default as ScalarSidebarSearchInput, ScalarSidebarSection_default as ScalarSidebarSection, ScalarSidebarSpacer_default as ScalarSidebarSpacer, ScalarTeleport_default as ScalarTeleport, ScalarTeleportRoot_default as ScalarTeleportRoot, ScalarTextArea_default as ScalarTextArea, ScalarTextInput_default as ScalarTextInput, ScalarTextInputCopy_default as ScalarTextInputCopy, ScalarThemeSwatches_default as ScalarThemeSwatches, ScalarToggle_default as ScalarToggle, ScalarToggleGroup_default as ScalarToggleGroup, ScalarToggleInput_default as ScalarToggleInput, ScalarTooltip_default as ScalarTooltip, ScalarTristateToggle_default as ScalarTristateToggle, ScalarTristateToggleGroup_default as ScalarTristateToggleGroup, ScalarTristateToggleInput_default as ScalarTristateToggleInput, ScalarVirtualCodeBlock_default as ScalarVirtualCodeBlock, ScalarVirtualText_default as ScalarVirtualText, ScalarWrappingText_default as ScalarWrappingText, TELEPORT_SYMBOL, addScalarClassesToHeadless, compose, cva, cx, formatHotkeySymbols, isGroups as isScalarComboboxGroups, tw, useBindCx, useLoadingState, useModal, useProvideTeleport, useTeleport, useThemeSwatches, useTooltip };
+export { ScalarButton_default as ScalarButton, ScalarCard_default as ScalarCard, ScalarCardFooter_default as ScalarCardFooter, ScalarCardHeader_default as ScalarCardHeader, ScalarCardSection_default as ScalarCardSection, ScalarCheckbox_default as ScalarCheckbox, ScalarCheckboxGroup_default as ScalarCheckboxGroup, ScalarCheckboxInput_default as ScalarCheckboxInput, ScalarCheckboxRadioGroup_default as ScalarCheckboxRadioGroup, ScalarCodeBlock_default as ScalarCodeBlock, ScalarCodeBlockCopy_default as ScalarCodeBlockCopy, ScalarColorModeToggle_default as ScalarColorModeToggle, ScalarColorModeToggleButton_default as ScalarColorModeToggleButton, ScalarColorModeToggleIcon_default as ScalarColorModeToggleIcon, ScalarCombobox_default as ScalarCombobox, ScalarComboboxMultiselect_default as ScalarComboboxMultiselect, ScalarCopy_default as ScalarCopy, ScalarCopyBackdrop_default as ScalarCopyBackdrop, ScalarCopyButton_default as ScalarCopyButton, ScalarDropdown_default as ScalarDropdown, ScalarDropdownButton_default as ScalarDropdownButton, ScalarDropdownDivider_default as ScalarDropdownDivider, ScalarDropdownItem_default as ScalarDropdownItem, ScalarDropdownMenu_default as ScalarDropdownMenu, ScalarErrorBoundary_default as ScalarErrorBoundary, ScalarFileUpload_default as ScalarFileUpload, ScalarFileUploadDropTarget_default as ScalarFileUploadDropTarget, ScalarFileUploadError_default as ScalarFileUploadError, ScalarFileUploadFileList_default as ScalarFileUploadFileList, ScalarFileUploadInput_default as ScalarFileUploadInput, ScalarFileUploadInputCompact_default as ScalarFileUploadInputCompact, ScalarFileUploadLoading_default as ScalarFileUploadLoading, ScalarFloating_default as ScalarFloating, ScalarFloatingBackdrop_default as ScalarFloatingBackdrop, ScalarForm_default as ScalarForm, ScalarFormError_default as ScalarFormError, ScalarFormField_default as ScalarFormField, ScalarFormInput_default as ScalarFormInput, ScalarFormInputGroup_default as ScalarFormInputGroup, ScalarFormSection_default as ScalarFormSection, ScalarHeader_default as ScalarHeader, ScalarHeaderButton_default as ScalarHeaderButton, ScalarHeaderColumn_default as ScalarHeaderColumn, ScalarHotkey_default as ScalarHotkey, ScalarHotkeyTooltip_default as ScalarHotkeyTooltip, ScalarIcon_default as ScalarIcon, ScalarIconButton_default as ScalarIconButton, ScalarIconLegacyAdapter_default as ScalarIconLegacyAdapter, ScalarListbox_default as ScalarListbox, ScalarListboxCheckbox_default as ScalarListboxCheckbox, ScalarListboxInput_default as ScalarListboxInput, ScalarListboxItem_default as ScalarListboxItem, ScalarLoading_default as ScalarLoading, ScalarMarkdown_default as ScalarMarkdown, ScalarMarkdownSummary_default as ScalarMarkdownSummary, ScalarMenu_default as ScalarMenu, ScalarMenuButton_default as ScalarMenuButton, ScalarMenuLink_default as ScalarMenuLink, ScalarMenuProduct_default as ScalarMenuProduct, ScalarMenuProducts_default as ScalarMenuProducts, ScalarMenuResources_default as ScalarMenuResources, ScalarMenuSection_default as ScalarMenuSection, ScalarMenuSupport_default as ScalarMenuSupport, ScalarMenuTeamPicker_default as ScalarMenuTeamPicker, ScalarMenuTeamProfile_default as ScalarMenuTeamProfile, ScalarMenuWorkspacePicker_default as ScalarMenuWorkspacePicker, ScalarModal_default as ScalarModal, ScalarPopover_default as ScalarPopover, ScalarSavePrompt_default as ScalarSavePrompt, ScalarSearchInput_default as ScalarSearchInput, ScalarSearchResultItem_default as ScalarSearchResultItem, ScalarSearchResultList_default as ScalarSearchResultList, ScalarSidebar_default as ScalarSidebar, ScalarSidebarButton_default as ScalarSidebarButton, ScalarSidebarFooter_default as ScalarSidebarFooter, ScalarSidebarGroup_default as ScalarSidebarGroup, ScalarSidebarGroupToggle_default as ScalarSidebarGroupToggle, ScalarSidebarGroupToggleButton_default as ScalarSidebarGroupToggleButton, ScalarSidebarGroupToggleSpacer_default as ScalarSidebarGroupToggleSpacer, ScalarSidebarIndent_default as ScalarSidebarIndent, ScalarSidebarItem_default as ScalarSidebarItem, ScalarSidebarItems_default as ScalarSidebarItems, ScalarSidebarNestedItems_default as ScalarSidebarNestedItems, ScalarSidebarSearchButton_default as ScalarSidebarSearchButton, ScalarSidebarSearchInput_default as ScalarSidebarSearchInput, ScalarSidebarSection_default as ScalarSidebarSection, ScalarSidebarSpacer_default as ScalarSidebarSpacer, ScalarTeleport_default as ScalarTeleport, ScalarTeleportRoot_default as ScalarTeleportRoot, ScalarTextArea_default as ScalarTextArea, ScalarTextInput_default as ScalarTextInput, ScalarTextInputCopy_default as ScalarTextInputCopy, ScalarThemeSwatches_default as ScalarThemeSwatches, ScalarToggle_default as ScalarToggle, ScalarToggleGroup_default as ScalarToggleGroup, ScalarToggleInput_default as ScalarToggleInput, ScalarTooltip_default as ScalarTooltip, ScalarTristateToggle_default as ScalarTristateToggle, ScalarTristateToggleGroup_default as ScalarTristateToggleGroup, ScalarTristateToggleInput_default as ScalarTristateToggleInput, ScalarVirtualCodeBlock_default as ScalarVirtualCodeBlock, ScalarVirtualText_default as ScalarVirtualText, ScalarWrappingText_default as ScalarWrappingText, TELEPORT_SYMBOL, addScalarClassesToHeadless, compose, cva, cx, formatHotkeySymbols, isGroups as isScalarComboboxGroups, tw, useBindCx, useLoadingState, useModal, useProvideTeleport, useTeleport, useThemeSwatches, useTooltip };

package/dist/style.css

@@ -489,6 +489,7 @@
 }
 
 :where(.scalar-app) input:-webkit-autofill {
+  -webkit-text-fill-color: var(--scalar-color-1);
   -webkit-background-clip: text !important;
   background-clip: text !important;
 }
@@ -1421,10 +1422,6 @@
   min-width: 160px;
 }
 
-.scalar-app .min-w-min {
-  min-width: min-content;
-}
-
 .scalar-app .flex-1 {
   flex: 1;
 }
@@ -2646,10 +2643,6 @@
   justify-content: center;
 }
 
-:is(.scalar-app .\*\:gap-1 > *) {
-  gap: 4px;
-}
-
 :is(.scalar-app .\*\:rounded > *) {
   border-radius: var(--scalar-radius-md);
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.28.1",
+  "version": "0.29.1",
   "engines": {
     "node": ">=22"
   },
@@ -221,27 +221,26 @@
     "radix-vue": "^1.9.17",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.2.6",
-    "@scalar/helpers": "0.11.1",
+    "@scalar/code-highlight": "0.4.5",
     "@scalar/icons": "0.7.6",
-    "@scalar/themes": "0.17.3",
-    "@scalar/use-hooks": "0.4.10",
-    "@scalar/code-highlight": "0.4.5"
+    "@scalar/themes": "0.17.4",
+    "@scalar/helpers": "0.11.3",
+    "@scalar/use-hooks": "0.4.11"
   },
   "devDependencies": {
-    "@playwright/test": "1.59.1",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-links": "10.3.5",
-    "@storybook/vue3-vite": "10.3.5",
+    "@playwright/test": "1.62.1",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/vue3-vite": "10.5.10",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
     "@types/jsdom": "28.0.1",
     "@types/node": "^24.1.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "2.4.11",
-    "@vueless/storybook-dark-mode": "^10.0.7",
     "concurrently": "9.1.2",
     "jsdom": "27.4.0",
-    "storybook": "10.3.5",
+    "storybook": "10.5.10",
     "svglint": "^4.2.1",
     "tailwindcss": "^4.3.3",
     "vite": "8.1.5",
@@ -255,9 +254,10 @@
     "build:watch": "concurrently \"vite build --watch\" \"vue-tsc --watch -p tsconfig.build.json\" \"tsc-alias -p tsconfig.build.json --watch\"",
     "clean:snapshots": "shx rm -rf \"**/snapshots\"",
     "dev": "storybook dev -p 5100 --ci",
+    "dev:gallery": "vite -c test/gallery/vite.config.ts",
     "lint:check": "pnpm lint:icons",
     "lint:icons": "svglint src/components/ScalarIcon/icons/*.svg --config src/components/ScalarIcon/.svglintrc.js",
-    "preview": "vite preview --outDir storybook-static -c test/vite.config.ts 1>&2",
+    "preview:gallery": "vite build -c test/gallery/vite.config.ts && vite preview -c test/gallery/vite.config.ts 1>&2",
     "test": "vitest --run",
     "test:e2e": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:5001/ playwright test",
     "test:e2e:ci": "CI=1 playwright test",