@scalar/components 0.32.1 → 0.33.1

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInputCopy.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","ScalarTextInput","_unref","_withCtx","_createVNode","ScalarCopyButton","_withModifiers","_createSlots","ScalarCopyBackdrop","_renderSlot"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input Copy component\n *\n * A wrapper around the ScalarTextInput component that provides a\n * copy button and allows copying of the input content to the clipboard.\n *\n * @example\n *   <ScalarTextInputCopy v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport { ScalarCopyBackdrop, ScalarCopyButton } from '../ScalarCopy'\nimport ScalarTextInput from './ScalarTextInput.vue'\n\nconst { duration = 1500, immediate } = defineProps<{\n  /** The placement of the copy button */\n  duration?: number\n  /** Whether the input is writable */\n  editable?: boolean\n  /** Whether to copy the model value immediately on mount */\n  immediate?: boolean\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n  /* Override the label for the copy button */\n  copy?: () => unknown\n  /* Override the label for the copy button when the content has been copied */\n  copied?: () => unknown\n}>()\n\nonMounted(() => {\n  // Copy the model value immediately on mount if immediate is true\n  if (immediate && model.value) copy(model.value)\n})\n\nconst model = defineModel<string>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarTextInput\n    v-model=\"model\"\n    :readonly=\"!editable\"\n    @click=\"model && copy(model)\">\n    <template #aside>\n      <ScalarCopyButton\n        class=\"bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2 z-1\"\n        :copied=\"copied || clipboardCopied\"\n        placement=\"left\"\n        @click.stop=\"model && copy(model)\">\n        <template\n          v-if=\"$slots.copy\"\n          #copy>\n          <slot name=\"copy\" />\n        </template>\n        <template\n          v-if=\"$slots.copied\"\n          #copied>\n          <slot name=\"copied\" />\n        </template>\n        <template #backdrop>\n          <ScalarCopyBackdrop\n            class=\"bg-b-1 group-hover/copy-button:bg-b-1.5 dark:bg-b-1.5 dark:group-hover/copy-button:bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAyCA,gBAAgB;GAEd,IAAI,QAAA,aAAa,MAAM,OAAO,KAAK,MAAM,KAAK;EAChD,CAAC;EAED,MAAM,QAAQC,SAAmB,SAAA,YAAC;EAElC,MAAM,SAASA,SAAoB,SAAC,QAA4B;EAEhE,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;EAChB,CAAC;;EAGD,MAAM,kBAAkB,MAAO,OAAO,QAAQ,CAAE;;GAG9C,OAAAC,UAAA,GAAAC,YA0BkBC,yBAAA;IAzBP,YAAA,MAAA;IAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;IACb,UAAQ,CAAG,QAAA;IACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAASC,MAAA,IAAA,CAAI,CAAC,MAAA,KAAK;;IAChB,OAAKC,cAoBK,CAnBnBC,YAmBmBF,MAAAG,wBAAA,GAAA;KAlBjB,OAAM;KACL,QAAQ,OAAA,SAAUH,MAAA,eAAA;KACnB,WAAU;KACT,SAAK,OAAA,OAAA,OAAA,KAAAI,eAAA,WAAO,MAAA,SAASJ,MAAA,IAAA,CAAI,CAAC,MAAA,KAAK,GAAA,CAAA,MAAA,CAAA;;KAWrB,UAAQC,cAEuF,CADxGC,YACwGF,MAAAM,0BAAA,GAAA,EAAtG,OAAM,8FAA6F,CAAA,C;;I,IAX/FX,KAAAA,OAAO,O;KACZ,MAAA;KACD,IAAAM,cAAoB,CAApBM,WAAoB,KAAA,QAAA,MAAA,C;;I,YAGdZ,KAAAA,OAAO,S;KACZ,MAAA;KACD,IAAAM,cAAsB,CAAtBM,WAAsB,KAAA,QAAA,QAAA,C"}

package/dist/components/ScalarThemeSwatches/ScalarThemeSwatches.vue.js

@@ -1,4 +1,4 @@
-import ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default from "./ScalarThemeSwatches.vue.script.js";
+import ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default from "./ScalarThemeSwatches.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarThemeSwatches/ScalarThemeSwatches.vue
 var ScalarThemeSwatches_default = ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarThemeSwatches/ScalarThemeSwatches.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarThemeSwatches.vue.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/ScalarThemeSwatches.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Theme Swatches component\n *\n * Displays the light and dark mode swatches for a given theme CSS string\n *\n * @example\n * <ScalarThemeSwatches :css=\"theme\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { THEME_CSS_VARS, useThemeSwatches } from './useThemeSwatches'\n\nconst { css } = defineProps<{\n  css: string\n}>()\n\nconst { colors } = useThemeSwatches(() => css)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    :style=\"{\n      '--bg-light': colors.light['--scalar-background-1'],\n      '--bg-dark': colors.dark['--scalar-background-1'],\n    }\"\n    v-bind=\"\n      cx(\n        'flex *:size-3 overflow-hidden rounded',\n        'bg-(--bg-light) dark:bg-(--bg-dark)',\n      )\n    \">\n    <div\n      v-for=\"v in THEME_CSS_VARS\"\n      :key=\"v\"\n      class=\"bg-(--bg-light) dark:bg-(--bg-dark)\"\n      :style=\"{ '--bg-light': colors.light[v], '--bg-dark': colors.dark[v] }\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarThemeSwatches.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarThemeSwatches/ScalarThemeSwatches.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Theme Swatches component\n *\n * Displays the light and dark mode swatches for a given theme CSS string\n *\n * @example\n * <ScalarThemeSwatches :css=\"theme\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { THEME_CSS_VARS, useThemeSwatches } from './useThemeSwatches'\n\nconst { css } = defineProps<{\n  css: string\n}>()\n\nconst { colors } = useThemeSwatches(() => css)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    :style=\"{\n      '--bg-light': colors.light['--scalar-background-1'],\n      '--bg-dark': colors.dark['--scalar-background-1'],\n    }\"\n    v-bind=\"\n      cx(\n        'flex *:size-3 overflow-hidden rounded',\n        'bg-(--bg-light) dark:bg-(--bg-dark)',\n      )\n    \">\n    <div\n      v-for=\"v in THEME_CSS_VARS\"\n      :key=\"v\"\n      class=\"bg-(--bg-light) dark:bg-(--bg-dark)\"\n      :style=\"{ '--bg-light': colors.light[v], '--bg-dark': colors.dark[v] }\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarThemeSwatches/ScalarThemeSwatches.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { THEME_CSS_VARS, useThemeSwatches } from "./useThemeSwatches.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { Fragment, createElementBlock, defineComponent, mergeProps, normalizeStyle, openBlock, renderList, unref } from "vue";
+var ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarThemeSwatches",
+	props: { css: {} },
+	setup(__props) {
+		const { colors } = useThemeSwatches(() => __props.css);
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ style: {
+				"--bg-light": unref(colors).light["--scalar-background-1"],
+				"--bg-dark": unref(colors).dark["--scalar-background-1"]
+			} }, unref(cx)("flex *:size-3 overflow-hidden rounded", "bg-(--bg-light) dark:bg-(--bg-dark)")), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(THEME_CSS_VARS), (v) => {
+				return openBlock(), createElementBlock("div", {
+					key: v,
+					class: "bg-(--bg-light) dark:bg-(--bg-dark)",
+					style: normalizeStyle({
+						"--bg-light": unref(colors).light[v],
+						"--bg-dark": unref(colors).dark[v]
+					})
+				}, null, 4);
+			}), 128))], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarThemeSwatches.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarThemeSwatches/ScalarThemeSwatches.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarThemeSwatches.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeStyle"],"sources":["../../../src/components/ScalarThemeSwatches/ScalarThemeSwatches.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Theme Swatches component\n *\n * Displays the light and dark mode swatches for a given theme CSS string\n *\n * @example\n * <ScalarThemeSwatches :css=\"theme\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { THEME_CSS_VARS, useThemeSwatches } from './useThemeSwatches'\n\nconst { css } = defineProps<{\n  css: string\n}>()\n\nconst { colors } = useThemeSwatches(() => css)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    :style=\"{\n      '--bg-light': colors.light['--scalar-background-1'],\n      '--bg-dark': colors.dark['--scalar-background-1'],\n    }\"\n    v-bind=\"\n      cx(\n        'flex *:size-3 overflow-hidden rounded',\n        'bg-(--bg-light) dark:bg-(--bg-dark)',\n      )\n    \">\n    <div\n      v-for=\"v in THEME_CSS_VARS\"\n      :key=\"v\"\n      class=\"bg-(--bg-light) dark:bg-(--bg-dark)\"\n      :style=\"{ '--bg-light': colors.light[v], '--bg-dark': colors.dark[v] }\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAoBA,MAAM,EAAE,WAAW,uBAAuB,QAAA,GAAG;EAG7C,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAgBM,OAhBNC,WAgBM,EAfH,OAAK;IAAwB,cAAAC,MAAA,MAAA,CAAM,CAAC,MAAK;IAA8C,aAAAA,MAAA,MAAA,CAAM,CAAC,KAAI;G,KAIpFA,MAAA,EAAA,CAAE,C,oFAMjBH,UAAA,IAAA,GAAAC,mBAI4EG,UAAA,MAAAC,WAH9DF,MAAA,cAAA,IAAL,MAAC;IADV,OAAAH,UAAA,GAAAC,mBAI4E,OAAA;KAFzE,KAAK;KACN,OAAM;KACL,OAAKK,eAAA;MAAA,cAAkBH,MAAA,MAAA,CAAM,CAAC,MAAM;MAAC,aAAgBA,MAAA,MAAA,CAAM,CAAC,KAAK;KAAC,CAAA"}

package/dist/components/ScalarToggle/ScalarToggle.vue.js

@@ -1,4 +1,4 @@
-import ScalarToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarToggle.vue.script.js";
+import ScalarToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarToggle.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarToggle.vue
 var ScalarToggle_default = ScalarToggle_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarToggle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle component\n *\n * A switch-style toggle control with support for\n * disabled state and accessible labeling.\n *\n * @example\n * <ScalarToggle v-model=\"enabled\" label=\"Enable feature\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport ScalarToggleSlider from './ScalarToggleSlider.vue'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n</script>\n<template>\n  <ScalarToggleSlider\n    :aria-checked=\"model\"\n    :class=\"model ? 'bg-c-accent' : ''\"\n    :disabled\n    :label\n    role=\"switch\"\n    :thumb=\"model ? 'end' : 'start'\"\n    @click=\"toggle\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarToggle.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle component\n *\n * A switch-style toggle control with support for\n * disabled state and accessible labeling.\n *\n * @example\n * <ScalarToggle v-model=\"enabled\" label=\"Enable feature\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport ScalarToggleSlider from './ScalarToggleSlider.vue'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n</script>\n<template>\n  <ScalarToggleSlider\n    :aria-checked=\"model\"\n    :class=\"model ? 'bg-c-accent' : ''\"\n    :disabled\n    :label\n    role=\"switch\"\n    :thumb=\"model ? 'end' : 'start'\"\n    @click=\"toggle\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarToggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,45 @@
+import ScalarToggleSlider_default from "./ScalarToggleSlider.vue.js";
+import { createBlock, defineComponent, mergeModels, normalizeClass, openBlock, useModel } from "vue";
+var ScalarToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarToggle",
+	props: /*@__PURE__*/ mergeModels({
+		disabled: { type: Boolean },
+		label: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		function toggle() {
+			if (props.disabled) return;
+			model.value = !model.value;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarToggleSlider_default, {
+				"aria-checked": model.value,
+				class: normalizeClass(model.value ? "bg-c-accent" : ""),
+				disabled: __props.disabled,
+				label: __props.label,
+				role: "switch",
+				thumb: model.value ? "end" : "start",
+				onClick: toggle
+			}, null, 8, [
+				"aria-checked",
+				"class",
+				"disabled",
+				"label",
+				"thumb"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarToggle_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarToggle.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarToggle.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggle.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ScalarToggleSlider","_normalizeClass"],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle component\n *\n * A switch-style toggle control with support for\n * disabled state and accessible labeling.\n *\n * @example\n * <ScalarToggle v-model=\"enabled\" label=\"Enable feature\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport ScalarToggleSlider from './ScalarToggleSlider.vue'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n</script>\n<template>\n  <ScalarToggleSlider\n    :aria-checked=\"model\"\n    :class=\"model ? 'bg-c-accent' : ''\"\n    :disabled\n    :label\n    role=\"switch\"\n    :thumb=\"model ? 'end' : 'start'\"\n    @click=\"toggle\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAKd,MAAM,QAAQA,SAAoB,SAAA,YAAmB;EAErD,SAAS,SAAS;GAChB,IAAI,MAAM,UACR;GAEF,MAAM,QAAQ,CAAC,MAAM;EACvB;;GAGE,OAAAC,UAAA,GAAAC,YAOoBC,4BAAA;IANjB,gBAAc,MAAA;IACd,OAAKC,eAAE,MAAA,QAAK,gBAAA,EAAA;IACZ,UAAA,QAAA;IACA,OAAA,QAAA;IACD,MAAK;IACJ,OAAO,MAAA,QAAK,QAAA;IACZ,SAAO"}

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.js

@@ -1,4 +1,4 @@
-import ScalarToggleGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarToggleGroup.vue.script.js";
+import ScalarToggleGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarToggleGroup.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarToggleGroup.vue
 var ScalarToggleGroup_default = ScalarToggleGroup_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleGroup.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Group component\n *\n * A group of toggle inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarToggleInput from './ScalarToggleInput.vue'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => 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    </ScalarToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarToggleGroup.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Group component\n *\n * A group of toggle inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarToggleInput from './ScalarToggleInput.vue'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => 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    </ScalarToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import ScalarFormInputGroup_default from "../ScalarForm/ScalarFormInputGroup.vue.js";
+import ScalarToggleInput_default from "./ScalarToggleInput.vue.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, mergeModels, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+var ScalarToggleGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarToggleGroup",
+	props: /*@__PURE__*/ mergeModels({ options: { default: () => [] } }, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInputGroup_default), null, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+					return openBlock(), createBlock(ScalarToggleInput_default, {
+						key: option.value,
+						modelValue: model.value?.some(({ value }) => 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", "onUpdate:modelValue"]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarToggleGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarToggleGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarToggleGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInputGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ScalarToggleInput","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Group component\n *\n * A group of toggle inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarToggleInput from './ScalarToggleInput.vue'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: () => [] })\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => 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    </ScalarToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAiBA,MAAM,QAAQA,SAAmC,SAAA,YAAsB;;GAGrE,OAAAC,UAAA,GAAAC,YAauBC,MAAAC,4BAAA,GAAA,MAAA;IAXnB,SAAAC,cAAyB,EAD3BJ,UAAA,IAAA,GAAAK,mBAWoBC,UAAA,MAAAC,WAVD,QAAA,UAAV,WAAM;KADf,OAAAP,UAAA,GAAAC,YAWoBO,2BAAA;MATjB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,KAAK;MAC7D,wBAA6B,YAAuB,MAAA,QAAQ,UAA0B,CAAA,GAAA,MAAA,OAAO,MAAM,IAAgB,MAAA,MAAM,QAAM,EAAI,YAAY,UAAU,OAAO,KAAK;;MAMtK,SAAAJ,cAAkB,CAAfK,gBAAAC,gBAAA,OAAO,KAAK,GAAA,CAAA,C"}

package/dist/components/ScalarToggle/ScalarToggleInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarToggleInput_vue_vue_type_script_setup_true_lang_default from "./ScalarToggleInput.vue.script.js";
+import ScalarToggleInput_vue_vue_type_script_setup_true_lang_default from "./ScalarToggleInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarToggleInput.vue
 var ScalarToggleInput_default = ScalarToggleInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarToggleInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleInput.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Input component\n *\n * A create a toggle input component for use in forms.\n *\n * @example\n *  <ScalarToggleInput v-model=\"model\" type=\"checkbox\">\n *    Label\n *  </ScalarToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarToggle from './ScalarToggle.vue'\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarToggleInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Input component\n *\n * A create a toggle input component for use in forms.\n *\n * @example\n *  <ScalarToggleInput v-model=\"model\" type=\"checkbox\">\n *    Label\n *  </ScalarToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarToggle from './ScalarToggle.vue'\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <ScalarToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarToggleInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import ScalarToggle_default from "./ScalarToggle.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+//#region src/components/ScalarToggle/ScalarToggleInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1 truncate text-left" };
+var ScalarToggleInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarToggleInput",
+	props: {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "label" }, unref(stylingAttrsCx)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": model.value })), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createVNode(ScalarToggle_default, mergeProps({
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					class: "shrink-0"
+				}, unref(otherAttrs)), null, 16, ["modelValue"])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarToggleInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarToggleInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarToggleInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleInput.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInput","_mergeProps","_withCtx","_createElementVNode","_renderSlot","_createVNode","ScalarToggle"],"sources":["../../../src/components/ScalarToggle/ScalarToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Input component\n *\n * A create a toggle input component for use in forms.\n *\n * @example\n *  <ScalarToggleInput v-model=\"model\" type=\"checkbox\">\n *    Label\n *  </ScalarToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarToggle from './ScalarToggle.vue'\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <ScalarToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,MAAM,QAAQA,SAAoB,SAAA,YAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,UAAU;;GAG/C,OAAAC,UAAA,GAAAC,YAUkBC,MAAAC,uBAAA,GAVlBC,WAUkB,EAThB,IAAG,QAAO,GACKF,MAAA,cAAA,CAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,MAAK,CAAA,C;IAGtF,SAAAG,cAA6D,CAA7DC,mBAA6D,OAA7D,YAA6D,CAAdC,WAAQ,KAAA,QAAA,SAAA,C,IACvDC,YAGwBC,sBAHxBL,WAGwB;KAFb,YAAA,MAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KACd,OAAM;IACE,GAAAF,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA,C"}

package/dist/components/ScalarToggle/ScalarToggleSlider.vue.js

@@ -1,4 +1,4 @@
-import ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default from "./ScalarToggleSlider.vue.script.js";
+import ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default from "./ScalarToggleSlider.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarToggleSlider.vue
 var ScalarToggleSlider_default = ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarToggleSlider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleSlider.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst {\n  thumb = 'start',\n  disabled,\n  label,\n} = defineProps<{\n  /** Resting position of the thumb within the track */\n  thumb?: 'start' | 'center' | 'end'\n  /** Visually dims the control and applies a not-allowed cursor */\n  disabled?: boolean\n  /** Accessible label announced to assistive technology */\n  label?: string\n}>()\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    :aria-disabled=\"disabled\"\n    type=\"button\"\n    v-bind=\"cx(variants({ disabled }))\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 transition-transform duration-300\"\n      :class=\"{\n        'translate-x-1.25': thumb === 'center',\n        'translate-x-2.5': thumb === 'end',\n      }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarToggleSlider.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarToggleSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst {\n  thumb = 'start',\n  disabled,\n  label,\n} = defineProps<{\n  /** Resting position of the thumb within the track */\n  thumb?: 'start' | 'center' | 'end'\n  /** Visually dims the control and applies a not-allowed cursor */\n  disabled?: boolean\n  /** Accessible label announced to assistive technology */\n  label?: string\n}>()\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    :aria-disabled=\"disabled\"\n    type=\"button\"\n    v-bind=\"cx(variants({ disabled }))\">\n    <div\n      class=\"bg-b-1 absolute top-px left-px flex h-3 w-3 items-center justify-center rounded-full transition-transform duration-300\"\n      :class=\"{\n        'translate-x-1.25': thumb === 'center',\n        'translate-x-2.5': thumb === 'end',\n      }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarToggleSlider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/ScalarToggle/ScalarToggleSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "sr-only"
+};
+var ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarToggleSlider",
+	props: {
+		thumb: { default: "start" },
+		disabled: { type: Boolean },
+		label: {}
+	},
+	setup(__props) {
+		const variants = cva({
+			base: "relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300",
+			variants: { disabled: { true: "cursor-not-allowed opacity-40" } }
+		});
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({
+				"aria-disabled": __props.disabled,
+				type: "button"
+			}, unref(cx)(unref(variants)({ disabled: __props.disabled }))), [createElementVNode("div", { class: normalizeClass(["bg-b-1 absolute top-px left-px flex h-3 w-3 items-center justify-center rounded-full transition-transform duration-300", {
+				"translate-x-1.25": __props.thumb === "center",
+				"translate-x-2.5": __props.thumb === "end"
+			}]) }, null, 2), __props.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarToggleSlider.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarToggleSlider.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleSlider.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeClass","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/ScalarToggle/ScalarToggleSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst {\n  thumb = 'start',\n  disabled,\n  label,\n} = defineProps<{\n  /** Resting position of the thumb within the track */\n  thumb?: 'start' | 'center' | 'end'\n  /** Visually dims the control and applies a not-allowed cursor */\n  disabled?: boolean\n  /** Accessible label announced to assistive technology */\n  label?: string\n}>()\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    :aria-disabled=\"disabled\"\n    type=\"button\"\n    v-bind=\"cx(variants({ disabled }))\">\n    <div\n      class=\"bg-b-1 absolute top-px left-px flex h-3 w-3 items-center justify-center rounded-full transition-transform duration-300\"\n      :class=\"{\n        'translate-x-1.25': thumb === 'center',\n        'translate-x-2.5': thumb === 'end',\n      }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAgBA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,UAAU,EAAE,MAAM,gCAAgC,EACpD;EACF,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBAeS,UAfTC,WAeS;IAdN,iBAAe,QAAA;IAChB,MAAK;GACG,GAAAC,MAAA,EAAA,CAAE,CAACA,MAAA,QAAA,CAAQ,CAAA,EAAA,UAAG,QAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,CAC9BC,mBAKO,OAAA,EAJL,OAAKC,eAAA,CAAC,0HAAwH;IACxF,oBAAA,QAAA,UAAK;IAA0C,mBAAA,QAAA,UAAK;G,iBAKpF,QAAA,SADRL,UAAA,GAAAC,mBAIO,QAJP,YAIOK,gBADF,QAAA,KAAK,GAAA,CAAA,K"}

package/dist/components/ScalarToggle/ScalarTristateToggle.vue.js

@@ -1,4 +1,4 @@
-import ScalarTristateToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarTristateToggle.vue.script.js";
+import ScalarTristateToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarTristateToggle.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarTristateToggle.vue
 var ScalarTristateToggle_default = ScalarTristateToggle_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarTristateToggle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggle.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle component\n *\n * A switch-style toggle control with three states — unset, on, and off —\n * useful for representing an optional boolean that can also be left\n * unset (e.g. \"inherit\"). Supports a disabled state and accessible\n * labeling.\n *\n * @example\n * <ScalarTristateToggle v-model=\"overridden\" label=\"Override default\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport ScalarToggleSlider from './ScalarToggleSlider.vue'\n\nconst props = defineProps<{\n  /** Prevents the toggle from being cycled, and dims it visually. */\n  disabled?: boolean\n  /** Accessible label announced to assistive technology */\n  label?: string\n}>()\n\nconst model = defineModel<boolean | undefined>()\n\n/** The current tristate value, derived from the boolean | undefined model. */\nconst state = computed<'unset' | 'on' | 'off'>(() => {\n  if (model.value === undefined) {\n    return 'unset'\n  }\n  return model.value ? 'on' : 'off'\n})\n\n/** Slider appearance for each tristate value. */\nconst SLIDER_PROPS = {\n  unset: { class: '', thumb: 'center' },\n  on: { class: 'bg-green', thumb: 'end' },\n  off: { class: 'bg-c-danger', thumb: 'start' },\n} as const\n\n/** Cycles unset -> on -> off -> unset. */\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  if (model.value === undefined) {\n    model.value = true\n  } else if (model.value === true) {\n    model.value = false\n  } else {\n    model.value = undefined\n  }\n}\n</script>\n<template>\n  <ScalarToggleSlider\n    :aria-checked=\"state === 'unset' ? 'mixed' : model\"\n    :disabled\n    :label\n    role=\"checkbox\"\n    v-bind=\"SLIDER_PROPS[state]\"\n    @click=\"toggle\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTristateToggle.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle component\n *\n * A switch-style toggle control with three states — unset, on, and off —\n * useful for representing an optional boolean that can also be left\n * unset (e.g. \"inherit\"). Supports a disabled state and accessible\n * labeling.\n *\n * @example\n * <ScalarTristateToggle v-model=\"overridden\" label=\"Override default\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport ScalarToggleSlider from './ScalarToggleSlider.vue'\n\nconst props = defineProps<{\n  /** Prevents the toggle from being cycled, and dims it visually. */\n  disabled?: boolean\n  /** Accessible label announced to assistive technology */\n  label?: string\n}>()\n\nconst model = defineModel<boolean | undefined>()\n\n/** The current tristate value, derived from the boolean | undefined model. */\nconst state = computed<'unset' | 'on' | 'off'>(() => {\n  if (model.value === undefined) {\n    return 'unset'\n  }\n  return model.value ? 'on' : 'off'\n})\n\n/** Slider appearance for each tristate value. */\nconst SLIDER_PROPS = {\n  unset: { class: '', thumb: 'center' },\n  on: { class: 'bg-green', thumb: 'end' },\n  off: { class: 'bg-c-danger', thumb: 'start' },\n} as const\n\n/** Cycles unset -> on -> off -> unset. */\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  if (model.value === undefined) {\n    model.value = true\n  } else if (model.value === true) {\n    model.value = false\n  } else {\n    model.value = undefined\n  }\n}\n</script>\n<template>\n  <ScalarToggleSlider\n    :aria-checked=\"state === 'unset' ? 'mixed' : model\"\n    :disabled\n    :label\n    role=\"checkbox\"\n    v-bind=\"SLIDER_PROPS[state]\"\n    @click=\"toggle\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarTristateToggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,60 @@
+import ScalarToggleSlider_default from "./ScalarToggleSlider.vue.js";
+import { computed, createBlock, defineComponent, mergeModels, mergeProps, openBlock, useModel } from "vue";
+var ScalarTristateToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarTristateToggle",
+	props: /*@__PURE__*/ mergeModels({
+		disabled: { type: Boolean },
+		label: {}
+	}, {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		/** The current tristate value, derived from the boolean | undefined model. */
+		const state = computed(() => {
+			if (model.value === void 0) return "unset";
+			return model.value ? "on" : "off";
+		});
+		/** Slider appearance for each tristate value. */
+		const SLIDER_PROPS = {
+			unset: {
+				class: "",
+				thumb: "center"
+			},
+			on: {
+				class: "bg-green",
+				thumb: "end"
+			},
+			off: {
+				class: "bg-c-danger",
+				thumb: "start"
+			}
+		};
+		/** Cycles unset -> on -> off -> unset. */
+		function toggle() {
+			if (props.disabled) return;
+			if (model.value === void 0) model.value = true;
+			else if (model.value === true) model.value = false;
+			else model.value = void 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarToggleSlider_default, mergeProps({
+				"aria-checked": state.value === "unset" ? "mixed" : model.value,
+				disabled: __props.disabled,
+				label: __props.label,
+				role: "checkbox"
+			}, SLIDER_PROPS[state.value], { onClick: toggle }), null, 16, [
+				"aria-checked",
+				"disabled",
+				"label"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarTristateToggle_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTristateToggle.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarTristateToggle.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTristateToggle.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ScalarToggleSlider","_mergeProps"],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggle.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle component\n *\n * A switch-style toggle control with three states — unset, on, and off —\n * useful for representing an optional boolean that can also be left\n * unset (e.g. \"inherit\"). Supports a disabled state and accessible\n * labeling.\n *\n * @example\n * <ScalarTristateToggle v-model=\"overridden\" label=\"Override default\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport ScalarToggleSlider from './ScalarToggleSlider.vue'\n\nconst props = defineProps<{\n  /** Prevents the toggle from being cycled, and dims it visually. */\n  disabled?: boolean\n  /** Accessible label announced to assistive technology */\n  label?: string\n}>()\n\nconst model = defineModel<boolean | undefined>()\n\n/** The current tristate value, derived from the boolean | undefined model. */\nconst state = computed<'unset' | 'on' | 'off'>(() => {\n  if (model.value === undefined) {\n    return 'unset'\n  }\n  return model.value ? 'on' : 'off'\n})\n\n/** Slider appearance for each tristate value. */\nconst SLIDER_PROPS = {\n  unset: { class: '', thumb: 'center' },\n  on: { class: 'bg-green', thumb: 'end' },\n  off: { class: 'bg-c-danger', thumb: 'start' },\n} as const\n\n/** Cycles unset -> on -> off -> unset. */\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  if (model.value === undefined) {\n    model.value = true\n  } else if (model.value === true) {\n    model.value = false\n  } else {\n    model.value = undefined\n  }\n}\n</script>\n<template>\n  <ScalarToggleSlider\n    :aria-checked=\"state === 'unset' ? 'mixed' : model\"\n    :disabled\n    :label\n    role=\"checkbox\"\n    v-bind=\"SLIDER_PROPS[state]\"\n    @click=\"toggle\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAOd,MAAM,QAAQA,SAAgC,SAAA,YAAC;;EAG/C,MAAM,QAAQ,eAAuC;GACnD,IAAI,MAAM,UAAU,KAAA,GAClB,OAAO;GAET,OAAO,MAAM,QAAQ,OAAO;EAC9B,CAAC;;EAGD,MAAM,eAAe;GACnB,OAAO;IAAE,OAAO;IAAI,OAAO;GAAS;GACpC,IAAI;IAAE,OAAO;IAAY,OAAO;GAAM;GACtC,KAAK;IAAE,OAAO;IAAe,OAAO;GAAQ;EAC9C;;EAGA,SAAS,SAAS;GAChB,IAAI,MAAM,UACR;GAEF,IAAI,MAAM,UAAU,KAAA,GAClB,MAAM,QAAQ;QACT,IAAI,MAAM,UAAU,MACzB,MAAM,QAAQ;QAEd,MAAM,QAAQ,KAAA;EAElB;;GAGE,OAAAC,UAAA,GAAAC,YAMoBC,4BANpBC,WAMoB;IALjB,gBAAc,MAAA,UAAK,UAAA,UAAyB,MAAA;IAC5C,UAAA,QAAA;IACA,OAAA,QAAA;IACD,MAAK;GACG,GAAA,aAAa,MAAA,QAAK,EACzB,SAAO,OAAM,CAAA,GAAA,MAAA,IAAA;IAAA;IAAA;IAAA;GAAA,CAAA"}

package/dist/components/ScalarToggle/ScalarTristateToggleGroup.vue.js

@@ -1,4 +1,4 @@
-import ScalarTristateToggleGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarTristateToggleGroup.vue.script.js";
+import ScalarTristateToggleGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarTristateToggleGroup.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarTristateToggleGroup.vue
 var ScalarTristateToggleGroup_default = ScalarTristateToggleGroup_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarTristateToggleGroup.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggleGroup.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Group component\n *\n * A group of tristate toggle inputs, each independently unset, on, or off.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarTristateToggleInput from './ScalarTristateToggleInput.vue'\nimport type { ScalarTristateOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarTristateOption[]>({ default: () => [] })\n\n/** Looks up an option's current tristate value; undefined if it has no entry in the model. */\nfunction getValue(option: ScalarCheckboxOption): boolean | undefined {\n  return model.value.find((entry) => entry.value === option.value)?.checked\n}\n\n/** Upserts or removes an option's entry in the model based on its new tristate value. */\nfunction setValue(option: ScalarCheckboxOption, checked: boolean | undefined) {\n  const rest = model.value.filter((entry) => entry.value !== option.value)\n  model.value = checked === undefined ? rest : [...rest, { ...option, checked }]\n}\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarTristateToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"getValue(option)\"\n      @update:modelValue=\"(checked) => setValue(option, checked)\">\n      {{ option.label }}\n    </ScalarTristateToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTristateToggleGroup.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Group component\n *\n * A group of tristate toggle inputs, each independently unset, on, or off.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarTristateToggleInput from './ScalarTristateToggleInput.vue'\nimport type { ScalarTristateOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarTristateOption[]>({ default: () => [] })\n\n/** Looks up an option's current tristate value; undefined if it has no entry in the model. */\nfunction getValue(option: ScalarCheckboxOption): boolean | undefined {\n  return model.value.find((entry) => entry.value === option.value)?.checked\n}\n\n/** Upserts or removes an option's entry in the model based on its new tristate value. */\nfunction setValue(option: ScalarCheckboxOption, checked: boolean | undefined) {\n  const rest = model.value.filter((entry) => entry.value !== option.value)\n  model.value = checked === undefined ? rest : [...rest, { ...option, checked }]\n}\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarTristateToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"getValue(option)\"\n      @update:modelValue=\"(checked) => setValue(option, checked)\">\n      {{ option.label }}\n    </ScalarTristateToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarTristateToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,45 @@
+import ScalarFormInputGroup_default from "../ScalarForm/ScalarFormInputGroup.vue.js";
+import ScalarTristateToggleInput_default from "./ScalarTristateToggleInput.vue.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, mergeModels, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+var ScalarTristateToggleGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarTristateToggleGroup",
+	props: /*@__PURE__*/ mergeModels({ options: { default: () => [] } }, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		/** Looks up an option's current tristate value; undefined if it has no entry in the model. */
+		function getValue(option) {
+			return model.value.find((entry) => entry.value === option.value)?.checked;
+		}
+		/** Upserts or removes an option's entry in the model based on its new tristate value. */
+		function setValue(option, checked) {
+			const rest = model.value.filter((entry) => entry.value !== option.value);
+			model.value = checked === void 0 ? rest : [...rest, {
+				...option,
+				checked
+			}];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInputGroup_default), null, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+					return openBlock(), createBlock(ScalarTristateToggleInput_default, {
+						key: option.value,
+						modelValue: getValue(option),
+						"onUpdate:modelValue": (checked) => setValue(option, checked)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+						_: 2
+					}, 1032, ["modelValue", "onUpdate:modelValue"]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarTristateToggleGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTristateToggleGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarTristateToggleGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTristateToggleGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInputGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ScalarTristateToggleInput","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Group component\n *\n * A group of tristate toggle inputs, each independently unset, on, or off.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarTristateToggleInput from './ScalarTristateToggleInput.vue'\nimport type { ScalarTristateOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarTristateOption[]>({ default: () => [] })\n\n/** Looks up an option's current tristate value; undefined if it has no entry in the model. */\nfunction getValue(option: ScalarCheckboxOption): boolean | undefined {\n  return model.value.find((entry) => entry.value === option.value)?.checked\n}\n\n/** Upserts or removes an option's entry in the model based on its new tristate value. */\nfunction setValue(option: ScalarCheckboxOption, checked: boolean | undefined) {\n  const rest = model.value.filter((entry) => entry.value !== option.value)\n  model.value = checked === undefined ? rest : [...rest, { ...option, checked }]\n}\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarTristateToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"getValue(option)\"\n      @update:modelValue=\"(checked) => setValue(option, checked)\">\n      {{ option.label }}\n    </ScalarTristateToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAkBA,MAAM,QAAQA,SAAmC,SAAA,YAAsB;;EAGvE,SAAS,SAAS,QAAmD;GACnE,OAAO,MAAM,MAAM,MAAM,UAAU,MAAM,UAAU,OAAO,KAAK,CAAC,EAAE;EACpE;;EAGA,SAAS,SAAS,QAA8B,SAA8B;GAC5E,MAAM,OAAO,MAAM,MAAM,QAAQ,UAAU,MAAM,UAAU,OAAO,KAAK;GACvE,MAAM,QAAQ,YAAY,KAAA,IAAY,OAAO,CAAC,GAAG,MAAM;IAAE,GAAG;IAAQ;GAAQ,CAAC;EAC/E;;GAGE,OAAAC,UAAA,GAAAC,YAQuBC,MAAAC,4BAAA,GAAA,MAAA;IANnB,SAAAC,cAAyB,EAD3BJ,UAAA,IAAA,GAAAK,mBAM4BC,UAAA,MAAAC,WALT,QAAA,UAAV,WAAM;KADf,OAAAP,UAAA,GAAAC,YAM4BO,mCAAA;MAJzB,KAAK,OAAO;MACZ,YAAY,SAAS,MAAM;MAC3B,wBAAoB,YAAY,SAAS,QAAQ,OAAO;;MACzD,SAAAJ,cAAkB,CAAfK,gBAAAC,gBAAA,OAAO,KAAK,GAAA,CAAA,C"}

package/dist/components/ScalarToggle/ScalarTristateToggleInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default from "./ScalarTristateToggleInput.vue.script.js";
+import ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default from "./ScalarTristateToggleInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarToggle/ScalarTristateToggleInput.vue
 var ScalarTristateToggleInput_default = ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarToggle/ScalarTristateToggleInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggleInput.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Input component\n *\n * A tristate toggle input component for use in forms, supporting an\n * additional \"unset\" state alongside on/off.\n *\n * @example\n *  <ScalarTristateToggleInput v-model=\"model\">\n *    Label\n *  </ScalarTristateToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarTristateToggle from './ScalarTristateToggle.vue'\n\nconst model = defineModel<boolean | undefined>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', {\n        'text-c-1': model !== undefined,\n      })\n    \">\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarTristateToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTristateToggleInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Input component\n *\n * A tristate toggle input component for use in forms, supporting an\n * additional \"unset\" state alongside on/off.\n *\n * @example\n *  <ScalarTristateToggleInput v-model=\"model\">\n *    Label\n *  </ScalarTristateToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarTristateToggle from './ScalarTristateToggle.vue'\n\nconst model = defineModel<boolean | undefined>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', {\n        'text-c-1': model !== undefined,\n      })\n    \">\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <ScalarTristateToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarTristateToggleInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import ScalarTristateToggle_default from "./ScalarTristateToggle.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+//#region src/components/ScalarToggle/ScalarTristateToggleInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1 truncate text-left" };
+var ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTristateToggleInput",
+	props: {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "label" }, unref(stylingAttrsCx)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": model.value !== void 0 })), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createVNode(ScalarTristateToggle_default, mergeProps({
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					class: "shrink-0"
+				}, unref(otherAttrs)), null, 16, ["modelValue"])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTristateToggleInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarToggle/ScalarTristateToggleInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTristateToggleInput.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInput","_mergeProps","_withCtx","_createElementVNode","_renderSlot","_createVNode","ScalarTristateToggle"],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Input component\n *\n * A tristate toggle input component for use in forms, supporting an\n * additional \"unset\" state alongside on/off.\n *\n * @example\n *  <ScalarTristateToggleInput v-model=\"model\">\n *    Label\n *  </ScalarTristateToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarTristateToggle from './ScalarTristateToggle.vue'\n\nconst model = defineModel<boolean | undefined>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', {\n        'text-c-1': model !== undefined,\n      })\n    \">\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <ScalarTristateToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQA,SAAgC,SAAA,YAAC;EAG/C,MAAM,EAAE,gBAAgB,eAAe,UAAU;;GAG/C,OAAAC,UAAA,GAAAC,YAYkBC,MAAAC,uBAAA,GAZlBC,WAYkB,EAXhB,IAAG,QAAO,GACKF,MAAA,cAAA,CAAc,CAAA,qCAAA,EAA4D,YAAA,MAAA,UAAU,KAAA,E;IAKnG,SAAAG,cAA6D,CAA7DC,mBAA6D,OAA7D,YAA6D,CAAdC,WAAQ,KAAA,QAAA,SAAA,C,IACvDC,YAGwBC,8BAHxBL,WAGwB;KAFb,YAAA,MAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KACd,OAAM;IACE,GAAAF,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA,C"}

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.js

@@ -1,4 +1,4 @@
-import ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default from "./ScalarHotkeyTooltip.vue.script.js";
+import ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default from "./ScalarHotkeyTooltip.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarTooltip/ScalarHotkeyTooltip.vue
 var ScalarHotkeyTooltip_default = ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkeyTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHotkeyTooltip.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, h, ref, render, type Ref } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}