@scalar/components 0.32.1 → 0.33.1

package/dist/vue-styles.css

@@ -93,12 +93,12 @@ to {
   word-break: normal;
   word-wrap: normal;
   tab-size: 4;
-  line-height: 1.4;
 }
 .scalar-app code.hljs {
   all: unset;
   font-size: inherit;
   color: var(--scalar-color-2);
+  line-height: 1.4;
   font-family: var(--scalar-font-code);
   counter-reset: linenumber;
 }
@@ -211,7 +211,7 @@ to {
   background-color: var(--scalar-background-3);
 }
 
-.toggle-icon-ellipse[data-v-60be8692] {
+.toggle-icon-ellipse[data-v-8f507267] {
   width: 7px;
   height: 7px;
   border-radius: 50%;
@@ -224,7 +224,7 @@ to {
     width 0.3s ease-in-out,
     height 0.3s ease-in-out;
 }
-.toggle-icon-moon-mask[data-v-60be8692] {
+.toggle-icon-moon-mask[data-v-8f507267] {
   width: 100%;
   height: 100%;
   border: 1px solid currentColor;
@@ -237,7 +237,7 @@ to {
   transition: transform 0.3s ease-in-out;
   transform: translate3d(4px, -4px, 0);
 }
-.toggle-icon-sun-ray[data-v-60be8692] {
+.toggle-icon-sun-ray[data-v-8f507267] {
   width: 12px;
   height: 1px;
   border-radius: 8px;
@@ -245,16 +245,16 @@ to {
   position: absolute;
   transition: transform 0.3s ease-in-out;
 }
-.toggle-icon-sun-ray[data-v-60be8692]:nth-of-type(2) {
+.toggle-icon-sun-ray[data-v-8f507267]:nth-of-type(2) {
   transform: rotate(90deg);
 }
-.toggle-icon-sun-ray[data-v-60be8692]:nth-of-type(3) {
+.toggle-icon-sun-ray[data-v-8f507267]:nth-of-type(3) {
   transform: rotate(45deg);
 }
-.toggle-icon-sun-ray[data-v-60be8692]:nth-of-type(4) {
+.toggle-icon-sun-ray[data-v-8f507267]:nth-of-type(4) {
   transform: rotate(-45deg);
 }
-.toggle-icon-dark .toggle-icon-ellipse[data-v-60be8692] {
+.toggle-icon-dark .toggle-icon-ellipse[data-v-8f507267] {
   width: 10px;
   height: 10px;
   mask-image: radial-gradient(
@@ -263,10 +263,10 @@ to {
     transparent 12px
   );
 }
-.toggle-icon-dark .toggle-icon-sun-ray[data-v-60be8692] {
+.toggle-icon-dark .toggle-icon-sun-ray[data-v-8f507267] {
   transform: scale(0);
 }
-.toggle-icon-dark .toggle-icon-moon-mask[data-v-60be8692] {
+.toggle-icon-dark .toggle-icon-moon-mask[data-v-8f507267] {
   transform: translate3d(0, 0, 0);
 }
 
@@ -292,12 +292,23 @@ to {
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
-    line-height: 1.4;
     tab-size: 4;
 }
 code.hljs {
     all: unset;
     font-size: inherit;
+    /*
+     * On the code element, not on `:where(code.hljs) *`, because that selector
+     * reaches elements and never text nodes. A highlighter emits a token span
+     * only where it has a scope to give, so a line of entirely unscoped text —
+     * the content between two JSX tags, say — held no element and fell back to
+     * the surrounding line height, rendering a couple of pixels shorter than
+     * the lines around it. Line numbers hid this: that mode wraps every line in
+     * `span.line`, which is an element, so the same block rendered evenly with
+     * a gutter and unevenly without one. Declared here it sets the line box for
+     * every line, and the spans inherit it.
+     */
+    line-height: 1.4;
     color: var(--scalar-color-2);
     font-family: var(--scalar-font-code);
     counter-reset: linenumber;
@@ -1006,19 +1017,19 @@ ol > li::marker,
 }
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.scalar-modal-layout[data-v-5bb1dcc2] {
-  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
+.scalar-modal-layout[data-v-b002945c] {
+  animation: .3s ease-in-out forwards fadein-layout-b002945c;
 }
-.scalar-modal[data-v-5bb1dcc2] {
+.scalar-modal[data-v-b002945c] {
   box-shadow: var(--scalar-shadow-2);
-  animation: .3s ease-in-out .1s forwards fadein-modal-5bb1dcc2;
+  animation: .3s ease-in-out .1s forwards fadein-modal-b002945c;
   transform: translate3d(0, 10px, 0);
 }
-.scalar-modal-layout-full[data-v-5bb1dcc2] {
+.scalar-modal-layout-full[data-v-b002945c] {
   opacity: 1 !important;
   background: none !important;
 }
-.modal-content-search .modal-body[data-v-5bb1dcc2] {
+.modal-content-search .modal-body[data-v-b002945c] {
   flex-direction: column;
   max-height: 440px;
   padding: 0;
@@ -1026,12 +1037,12 @@ ol > li::marker,
   overflow: hidden;
 }
 @media (max-width: 720px) and (max-height: 480px) {
-.scalar-modal-layout .scalar-modal[data-v-5bb1dcc2] {
+.scalar-modal-layout .scalar-modal[data-v-b002945c] {
     max-height: 90svh;
     margin-top: 5svh;
 }
 }
-@keyframes fadein-layout-5bb1dcc2 {
+@keyframes fadein-layout-b002945c {
 0% {
     opacity: 0;
 }
@@ -1039,7 +1050,7 @@ ol > li::marker,
     opacity: 1;
 }
 }
-@keyframes fadein-modal-5bb1dcc2 {
+@keyframes fadein-modal-b002945c {
 0% {
     opacity: 0;
     transform: translate3d(0, 10px, 0);
@@ -1049,10 +1060,10 @@ ol > li::marker,
     transform: translate3d(0, 0, 0);
 }
 }
-.full-size-styles[data-v-5bb1dcc2] {
+.full-size-styles[data-v-b002945c] {
   margin: initial;
   border-right: var(--scalar-border-width) solid var(--scalar-border-color);
-  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
+  animation: .3s ease-in-out forwards fadein-layout-b002945c;
   left: 0;
   transform: translate3d(0, 0, 0);
   background-color: var(--scalar-background-1) !important;
@@ -1063,11 +1074,11 @@ ol > li::marker,
   top: 0 !important;
 }
 @media (min-width: 800px) {
-.full-size-styles[data-v-5bb1dcc2] {
+.full-size-styles[data-v-b002945c] {
     width: 50dvw !important;
 }
 }
-.full-size-styles[data-v-5bb1dcc2]:after {
+.full-size-styles[data-v-b002945c]:after {
   content: "";
   width: 50dvw;
   height: 100dvh;
@@ -1076,13 +1087,13 @@ ol > li::marker,
   right: -50dvw;
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.group\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
+.group\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-b2388a0c] {
   inset-block: -1px;
 }
-.group\/item:first-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
+.group\/item:first-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-b2388a0c] {
   top: 0;
 }
-.group\/item:last-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
+.group\/item:last-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-b2388a0c] {
   bottom: 0;
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@@ -1312,20 +1323,20 @@ to {
   inherits: false
 }
 
-.scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
+.scalar-virtual-text-search-input[data-v-b843dc7d]::-webkit-search-cancel-button {
   display: none;
 }
 
-.scalar-virtual-text[data-v-77b9d685]:focus {
+.scalar-virtual-text[data-v-50a0b01e]:focus {
   outline: none;
 }
-.scalar-virtual-text-highlight[data-v-77b9d685] {
+.scalar-virtual-text-highlight[data-v-50a0b01e] {
   background: var(--scalar-background-accent);
   color: inherit;
   border-radius: var(--scalar-radius);
   padding: 1px 0;
 }
-.scalar-virtual-text-highlight-active[data-v-77b9d685] {
+.scalar-virtual-text-highlight-active[data-v-50a0b01e] {
   background: var(--scalar-color-accent);
   color: var(--scalar-background-1);
   border-radius: var(--scalar-radius);

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.32.1",
+  "version": "0.33.1",
   "engines": {
     "node": ">=22"
   },
@@ -212,40 +212,41 @@
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/utils": "0.2.10",
-    "@floating-ui/vue": "1.1.9",
+    "@floating-ui/utils": "0.2.12",
+    "@floating-ui/vue": "2.0.1",
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "1.7.23",
-    "@scalar/code-highlight": "0.4.10",
+    "@scalar/code-highlight": "0.4.11",
     "@scalar/helpers": "0.16.4",
-    "@scalar/icons": "0.7.7",
-    "@scalar/themes": "0.19.2",
-    "@scalar/use-hooks": "0.4.21",
-    "@vueuse/core": "13.9.0",
+    "@scalar/highlight": "0.6.0",
+    "@scalar/icons": "0.7.8",
+    "@scalar/themes": "0.20.0",
+    "@scalar/use-hooks": "0.4.22",
+    "@vueuse/core": "15.0.0",
     "cva": "1.0.0-beta.4",
     "radix-vue": "^1.9.17",
-    "vue": "^3.5.40",
-    "vue-component-type-helpers": "^3.2.6"
+    "vue": "^3.5.44",
+    "vue-component-type-helpers": "^3.3.13"
   },
   "devDependencies": {
     "@playwright/test": "1.62.1",
-    "@storybook/addon-docs": "10.5.10",
-    "@storybook/addon-links": "10.5.10",
-    "@storybook/vue3-vite": "10.5.10",
+    "@storybook/addon-docs": "10.6.2",
+    "@storybook/addon-links": "10.6.2",
+    "@storybook/vue3-vite": "10.6.2",
     "@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",
-    "concurrently": "9.1.2",
-    "jsdom": "27.4.0",
-    "storybook": "10.5.10",
+    "@types/jsdom": "28.0.3",
+    "@types/node": "^24.19.2",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vue/test-utils": "2.5.1",
+    "concurrently": "10.0.6",
+    "jsdom": "29.0.1",
+    "storybook": "10.6.2",
     "svglint": "^4.2.1",
     "tailwindcss": "^4.3.3",
-    "vite": "8.1.5",
-    "vite-svg-loader": "5.1.1",
-    "vitest": "4.1.10"
+    "vite": "8.3.4",
+    "vite-svg-loader": "5.1.3",
+    "vitest": "4.1.12"
   },
   "scripts": {
     "build": "pnpm typegen:icons && vite build && pnpm build:styles && vue-tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",

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

@@ -1,97 +0,0 @@
-import ScalarLoading_default from "../ScalarLoading/ScalarLoading.vue.js";
-import { BUTTON_VARIANT_STYLES } from "./constants.js";
-import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
-//#region src/components/ScalarButton/ScalarButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 3,
-	class: "centered"
-};
-var ScalarButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarButton",
-	props: {
-		is: { default: "button" },
-		variant: { default: "solid" },
-		size: { default: "md" },
-		disabled: { type: Boolean },
-		icon: { type: [Object, Function] },
-		loader: {}
-	},
-	setup(__props) {
-		/** Variant styles for the button (wrapper) */
-		const buttonVariants = cva({
-			base: "scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1",
-			variants: {
-				disabled: { true: "bg-b-2 text-color-3 shadow-none" },
-				size: {
-					xs: "px-2 py-1 text-xs/4",
-					sm: "px-3.5 py-2 text-sm/4",
-					md: "px-5 py-3 text-sm/4"
-				},
-				variant: BUTTON_VARIANT_STYLES
-			},
-			compoundVariants: [{
-				disabled: true,
-				variant: [
-					"solid",
-					"outlined",
-					"ghost",
-					"gradient",
-					"danger"
-				],
-				class: "bg-b-2 text-c-3 shadow-none hover:bg-b-[_] cursor-not-allowed active:bg-b-[_] hover:text-c-[_] active:text-c-[_]"
-			}, {
-				disabled: true,
-				variant: ["gradient"],
-				class: "to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t"
-			}]
-		});
-		/** Variant styles for the button icon */
-		const iconVariants = cva({
-			base: "shrink-0",
-			variants: { size: {
-				xs: "size-2.75 -ml-0.25 mr-1",
-				sm: "size-3.5 -ml-0.25 mr-1",
-				md: "size-3.5 -ml-0.5 mr-1.5"
-			} }
-		});
-		/** Variant styles for the loading icon */
-		const loadingVariants = cva({ variants: { size: {
-			xs: "size-4",
-			sm: "size-5",
-			md: "size-6"
-		} } });
-		const { cx } = useBindCx();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({
-				"aria-disabled": __props.disabled || void 0,
-				type: __props.is === "button" ? "button" : void 0
-			}, unref(cx)(unref(buttonVariants)({
-				disabled: __props.disabled,
-				size: __props.size,
-				variant: __props.variant
-			}), { relative: __props.loader?.isActive })), {
-				default: withCtx(() => [
-					_ctx.$slots.icon || __props.icon ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass([unref(iconVariants)({ size: __props.size }), { invisible: __props.loader?.isActive }])
-					}, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon), { class: "size-full" }))])], 2)) : createCommentVNode("", true),
-					__props.loader ? (openBlock(), createElementBlock("span", {
-						key: 1,
-						class: normalizeClass({ invisible: __props.loader?.isActive })
-					}, [renderSlot(_ctx.$slots, "default")], 2)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2),
-					__props.loader?.isActive ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ScalarLoading_default), {
-						class: normalizeClass(unref(loadingVariants)({ size: __props.size })),
-						loader: __props.loader
-					}, null, 8, ["class", "loader"])])) : createCommentVNode("", true)
-				]),
-				_: 3
-			}, 16, ["aria-disabled", "type"]);
-		};
-	}
-});
-//#endregion
-export { ScalarButton_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarButton.vue.script.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarButton/ScalarButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Button Component\n *\n * Provides a styled button, if you are looking for\n * an icon only button, use ScalarIconButton instead,\n * it's a helpful wrapper around this component\n *\n * @example\n * <ScalarButton>\n *   <!-- Button label -->\n * </ScalarButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarLoading } from '../ScalarLoading'\nimport { BUTTON_VARIANT_STYLES } from './constants'\nimport type { ButtonSize, ClassList, ScalarButtonProps } from './types'\n\nconst {\n  is = 'button',\n  size = 'md',\n  variant = 'solid',\n} = defineProps<ScalarButtonProps>()\n\n/** Variant styles for the button (wrapper) */\nconst buttonVariants = cva({\n  base: 'scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1',\n  variants: {\n    disabled: { true: 'bg-b-2 text-color-3 shadow-none' },\n    size: {\n      xs: 'px-2 py-1 text-xs/4',\n      sm: 'px-3.5 py-2 text-sm/4',\n      md: 'px-5 py-3 text-sm/4',\n    } satisfies Record<ButtonSize, ClassList>,\n    variant: BUTTON_VARIANT_STYLES,\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      variant: ['solid', 'outlined', 'ghost', 'gradient', 'danger'],\n      class:\n        'bg-b-2 text-c-3 shadow-none hover:bg-b-[_] cursor-not-allowed active:bg-b-[_] hover:text-c-[_] active:text-c-[_]',\n    },\n    {\n      disabled: true,\n      variant: ['gradient'],\n      class:\n        'to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t',\n    },\n  ],\n})\n\n/** Variant styles for the button icon */\nconst iconVariants = cva({\n  base: 'shrink-0',\n  variants: {\n    size: {\n      xs: 'size-2.75 -ml-0.25 mr-1',\n      sm: 'size-3.5 -ml-0.25 mr-1',\n      md: 'size-3.5 -ml-0.5 mr-1.5',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\n/** Variant styles for the loading icon */\nconst loadingVariants = cva({\n  variants: {\n    size: {\n      xs: 'size-4',\n      sm: 'size-5',\n      md: 'size-6',\n    } satisfies Record<ButtonSize, ClassList>,\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    :aria-disabled=\"disabled || undefined\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"\n      cx(buttonVariants({ disabled, size, variant }), {\n        relative: loader?.isActive,\n      })\n    \">\n    <div\n      v-if=\"$slots.icon || icon\"\n      :class=\"[iconVariants({ size }), { invisible: loader?.isActive }]\">\n      <slot name=\"icon\">\n        <component\n          :is=\"icon\"\n          class=\"size-full\" />\n      </slot>\n    </div>\n    <span\n      v-if=\"loader\"\n      :class=\"{ invisible: loader?.isActive }\">\n      <slot />\n    </span>\n    <slot v-else />\n    <div\n      v-if=\"loader?.isActive\"\n      class=\"centered\">\n      <ScalarLoading\n        :class=\"loadingVariants({ size })\"\n        :loader />\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,iBAAiB,IAAI;GACzB,MAAM;GACN,UAAU;IACR,UAAU,EAAE,MAAM,kCAAkC;IACpD,MAAM;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IACN;IACA,SAAS;GACX;GACA,kBAAkB,CAChB;IACE,UAAU;IACV,SAAS;KAAC;KAAS;KAAY;KAAS;KAAY;IAAQ;IAC5D,OACE;GACJ,GACA;IACE,UAAU;IACV,SAAS,CAAC,UAAU;IACpB,OACE;GACJ,CACF;EACF,CAAC;;EAGD,MAAM,eAAe,IAAI;GACvB,MAAM;GACN,UAAU,EACR,MAAM;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;GACN,EACF;EACF,CAAC;;EAGD,MAAM,kBAAkB,IAAI,EAC1B,UAAU,EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,EACF,EACF,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YA+BY,wBA9BL,QAAA,EAAE,GADT,WA+BY;IA7BT,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;MACrB,MAAA,EAAA,CAAE,CAAC,MAAA,cAAA,CAAc,CAAA;IAAA,UAAG,QAAA;IAAQ,MAAE,QAAA;IAAI,SAAE,QAAA;GAAO,CAAA,GAAA,EAAA,UAAyB,QAAA,QAAQ,SAAA,CAAA,CAAA,GAAA;2BAarF;KAPEA,KAAAA,OAAO,QAAQ,QAAA,QAAA,UAAA,GADvB,mBAQM,OAAA;;MANH,OAAK,eAAA,CAAG,MAAA,YAAA,CAAY,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAA,WAAkB,QAAA,QAAQ,SAAQ,CAAA,CAAA;SAC9D,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,EAAA,UAAA,GAHL,YAEsB,wBADf,QAAA,IAAI,GAAA,EACT,OAAM,YAAW,CAAA,EAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAIf,QAAA,UAAA,UAAA,GADR,mBAIO,QAAA;;MAFJ,OAAK,eAAA,EAAA,WAAe,QAAA,QAAQ,SAAQ,CAAA;SACrC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAEV,WAAe,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA;KAEP,QAAA,QAAQ,YAAA,UAAA,GADhB,mBAMM,OANN,YAMM,CAHJ,YAEY,MAAA,qBAAA,GAAA;MADT,OAAK,eAAE,MAAA,eAAA,CAAe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,CAAA;MAC7B,QAAA,QAAA"}

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

@@ -1,27 +0,0 @@
-import { useCardRegion } from "./useCardHeading.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
-var ScalarCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarCard",
-	props: { label: {} },
-	setup(__props) {
-		const { id } = useCardRegion();
-		const labelAttrs = computed(() => {
-			if (__props.label) return { "aria-label": __props.label };
-			if (id.value) return { "aria-labelledby": id.value };
-			return {};
-		});
-		const { cx } = useBindCx();
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ role: "group" }, {
-				...labelAttrs.value,
-				...unref(cx)("scalar-card bg-b-2 flex flex-col divide-y rounded-xl border")
-			}), [renderSlot(_ctx.$slots, "default")], 16);
-		};
-	}
-});
-//#endregion
-export { ScalarCard_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCard.vue.script.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCard.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx('scalar-card bg-b-2 flex flex-col divide-y rounded-xl border'),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA6BA,MAAM,EAAE,OAAO,cAAc;EAE7B,MAAM,aAAa,eAAe;GAChC,IAAI,QAAA,OAEF,OAAO,EAAE,cAAc,QAAA,MAAM;GAE/B,IAAI,GAAG,OAEL,OAAO,EAAE,mBAAmB,GAAG,MAAM;GAGvC,OAAO,CAAC;EACV,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAOM,OAPN,WAOM,EANJ,MAAK,QAAO,GAAA;OACO,WAAA;OAAqB,MAAA,EAAA,CAAE,CAAA,6DAAA;QAI1C,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/components/ScalarCard/ScalarCardFooter.vue.script.js

@@ -1,20 +0,0 @@
-import ScalarCardSection_default from "./ScalarCardSection.vue.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
-var ScalarCardFooter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarCardFooter",
-	setup(__props) {
-		const { cx } = useBindCx();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-footer"))), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16);
-		};
-	}
-});
-//#endregion
-export { ScalarCardFooter_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCardFooter.vue.script.js.map

package/dist/components/ScalarCard/ScalarCardFooter.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCardFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card footer component\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <ScalarCardSection v-bind=\"cx('scalar-card-footer')\">\n    <slot />\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;EAkBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YAEoB,2BAAA,eAAA,mBAFO,MAAA,EAAA,CAAE,CAAA,oBAAA,CAAA,CAAA,GAAA;2BACnB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/ScalarCard/ScalarCardHeader.vue.script.js

@@ -1,32 +0,0 @@
-import { useCardHeading } from "./useCardHeading.js";
-import ScalarCardSection_default from "./ScalarCardSection.vue.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, useId, withCtx } from "vue";
-//#region src/components/ScalarCard/ScalarCardHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["id"];
-var _hoisted_2 = {
-	key: 0,
-	class: "flex"
-};
-var ScalarCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarCardHeader",
-	setup(__props) {
-		const { cx } = useBindCx();
-		const id = useId();
-		useCardHeading(id);
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ScalarCardSection_default, normalizeProps(guardReactiveProps(unref(cx)("scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0"))), {
-				default: withCtx(() => [createElementVNode("div", {
-					id: unref(id),
-					class: "scalar-card-header-title min-w-0 flex-auto"
-				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)]),
-				_: 3
-			}, 16);
-		};
-	}
-});
-//#endregion
-export { ScalarCardHeader_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCardHeader.vue.script.js.map

package/dist/components/ScalarCard/ScalarCardHeader.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCardHeader.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCard/ScalarCardHeader.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card header component\n *\n * Will automatically be used as the aria-labelledby for the parent ScalarCard component\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useId } from 'vue'\n\nimport ScalarCardSection from './ScalarCardSection.vue'\nimport { useCardHeading } from './useCardHeading'\n\n/**\n * Scalar Card Header - Header section for cards with automatic accessibility setup\n */\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n// Get a unique id for the heading\nconst id = useId()\n\n// Set the heading id for the card\nuseCardHeading(id)\n</script>\n<template>\n  <ScalarCardSection\n    v-bind=\"\n      cx(\n        'scalar-card-header flex-wrap gap-y-1 leading-[22px] font-medium py-[6.75px] px-3 shrink-0',\n      )\n    \">\n    <!-- Sized to its content so the actions only drop to their own row when the title does not fit beside them -->\n    <div\n      :id=\"id\"\n      class=\"scalar-card-header-title min-w-0 flex-auto\">\n      <slot />\n    </div>\n    <div\n      v-if=\"$slots.actions\"\n      class=\"flex\">\n      <slot name=\"actions\" />\n    </div>\n  </ScalarCardSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAyBA,MAAM,EAAE,OAAO,UAAU;EAGzB,MAAM,KAAK,MAAM;EAGjB,eAAe,EAAE;;uBAGf,YAiBoB,2BAAA,eAAA,mBAhBH,MAAA,EAAA,CAAE,CAAA,2FAAA,CAAA,CAAA,GAAA;2BAUX,CAJN,mBAIM,OAAA;KAHH,IAAI,MAAA,EAAA;KACL,OAAM;QACN,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,GAGFA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/ScalarCard/ScalarCardSection.vue.script.js

@@ -1,16 +0,0 @@
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
-var ScalarCardSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarCardSection",
-	setup(__props) {
-		const { cx } = useBindCx();
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]"))), [renderSlot(_ctx.$slots, "default")], 16);
-		};
-	}
-});
-//#endregion
-export { ScalarCardSection_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCardSection.vue.script.js.map

package/dist/components/ScalarCard/ScalarCardSection.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCardSection.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAOM,OAAA,eAAA,mBANW,MAAA,EAAA,CAAE,CAAA,2FAAA,CAAA,CAAA,GAAA,CAKjB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.script.js

@@ -1,32 +0,0 @@
-import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
-import { ScalarIconCheck, ScalarIconMinus } from "@scalar/icons";
-var ScalarCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarCheckbox",
-	props: {
-		selected: { type: Boolean },
-		indeterminate: {
-			type: Boolean,
-			default: false
-		},
-		type: { default: "checkbox" }
-	},
-	setup(__props) {
-		const props = __props;
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex size-4 items-center justify-center p-0.75", [props.selected ? "bg-c-accent text-b-1" : props.indeterminate && props.type === "checkbox" ? "bg-c-accent text-b-1" : "text-transparent shadow-border", props.type === "checkbox" ? "rounded" : "rounded-full"]]) }, [props.selected ? (openBlock(), createBlock(unref(ScalarIconCheck), {
-				key: 0,
-				class: "size-3",
-				weight: "bold"
-			})) : props.indeterminate && props.type === "checkbox" ? (openBlock(), createBlock(unref(ScalarIconMinus), {
-				key: 1,
-				"aria-hidden": "true",
-				class: "size-3",
-				weight: "bold"
-			})) : createCommentVNode("", true)], 2);
-		};
-	}
-});
-//#endregion
-export { ScalarCheckbox_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCheckbox.vue.script.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCheckbox.vue.script.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar checkbox base component\n *\n * Provides a styled visual checkbox but not the underlying input element.\n *\n * This is used internally by the ScalarCheckboxInput component.\n *\n * If you're looking to create an interactive checkbox you\n * probably want the ScalarCheckboxInput component.\n *\n * @example\n * <ScalarCheckbox :selected=\"state\" type=\"radio\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCheck, ScalarIconMinus } from '@scalar/icons'\n\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    selected?: boolean\n    /** Checkbox only: shows a minus icon when true and `selected` is false (partial selection). */\n    indeterminate?: boolean\n    type?: ScalarCheckboxType\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      props.selected\n        ? 'bg-c-accent text-b-1'\n        : props.indeterminate && props.type === 'checkbox'\n          ? 'bg-c-accent text-b-1'\n          : 'text-transparent shadow-border',\n      props.type === 'checkbox' ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"props.selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n    <ScalarIconMinus\n      v-else-if=\"props.indeterminate && props.type === 'checkbox'\"\n      aria-hidden=\"true\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAqBA,MAAM,QAAQ;;uBAcZ,mBAmBM,OAAA,EAlBJ,OAAK,eAAA,CAAC,kDAAgD,CACtC,MAAM,WAAA,yBAAoD,MAAM,iBAAiB,MAAM,SAAI,aAAA,yBAAA,kCAAuG,MAAM,SAAI,aAAA,YAAA,cAAA,CAAA,CAAA,EAAA,GAAA,CASpN,MAAM,YAAA,UAAA,GADd,YAGkB,MAAA,eAAA,GAAA;;IADhB,OAAM;IACN,QAAO;SAEI,MAAM,iBAAiB,MAAM,SAAI,cAAA,UAAA,GAD9C,YAIkB,MAAA,eAAA,GAAA;;IAFhB,eAAY;IACZ,OAAM;IACN,QAAO"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.script.js

@@ -1,41 +0,0 @@
-import ScalarFormInputGroup_default from "../ScalarForm/ScalarFormInputGroup.vue.js";
-import ScalarCheckboxInput_default from "./ScalarCheckboxInput.vue.js";
-import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, mergeModels, openBlock, renderList, toDisplayString, unref, useId, useModel, withCtx } from "vue";
-var ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarCheckboxGroup",
-	props: /*@__PURE__*/ mergeModels({ options: { default: () => [] } }, {
-		"modelValue": { default: () => [] },
-		"modelModifiers": {}
-	}),
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const model = useModel(__props, "modelValue");
-		const name = useId();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScalarFormInputGroup_default), null, {
-				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
-					return openBlock(), createBlock(ScalarCheckboxInput_default, {
-						key: option.value,
-						modelValue: model.value?.some(({ value }) => value === option.value),
-						name: unref(name),
-						value: option.value,
-						"onUpdate:modelValue": (checked) => model.value = checked ? [...model.value, option] : model.value.filter(({ value }) => value !== option.value)
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
-						_: 2
-					}, 1032, [
-						"modelValue",
-						"name",
-						"value",
-						"onUpdate:modelValue"
-					]);
-				}), 128))]),
-				_: 1
-			});
-		};
-	}
-});
-//#endregion
-export { ScalarCheckboxGroup_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCheckboxGroup.vue.script.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCheckboxGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Group component\n *\n * A group of checkbox inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => value === option.value)\"\n      :name\n      :value=\"option.value\"\n      @update:modelValue=\"\n        (checked) =>\n          (model = checked\n            ? [...model, option]\n            : model.filter(({ value }) => value !== option.value))\n      \">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAmC,SAAA,YAAsB;EAEvE,MAAM,OAAO,MAAM;;uBAGjB,YAeuB,MAAA,4BAAA,GAAA,MAAA;2BAbM,EAAA,UAAA,IAAA,GAD3B,mBAasB,UAAA,MAAA,WAZH,QAAA,UAAV,WAAM;yBADf,YAasB,6BAAA;MAXnB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,KAAK;MAC7D,MAAA,MAAA,IAAA;MACA,OAAO,OAAO;MACd,wBAA6B,YAAuB,MAAA,QAAQ,UAAA,CAAA,GAA0B,MAAA,OAAO,MAAM,IAAgB,MAAA,MAAM,QAAM,EAAI,YAAY,UAAU,OAAO,KAAK;;6BAMpJ,CAAA,gBAAA,gBAAf,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}