@scalar/components 0.27.10 → 0.28.1

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

@@ -2,7 +2,7 @@ import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createBlock, createElementVNode, defineComponent, mergeProps, onMounted, openBlock, unref, useModel, vModelText, withCtx, withDirectives } from "vue";
 import { useTextareaAutosize } from "@vueuse/core";
-var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarTextArea",
 	props: {
@@ -21,7 +21,7 @@ var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			if ("autofocus" in otherAttrs.value) textarea.value?.focus();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex min-h-0 shrink cursor-text items-start bg-b-1 text-c-1 leading-snug dark:bg-b-1.5"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
 				default: withCtx(() => [withDirectives(createElementVNode("textarea", mergeProps({
 					ref_key: "textarea",
 					ref: textarea,

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmB,SAAA,aAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;GACZ,CAAA;EAGD,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,UAAS,OAAO,OAAM;IAC5D;;uBAGC,YAakB,MAAA,wBAAA,EAblB,WAakB,EAZhB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,sGAAA,EAAA,EAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,EAAE,OAAK,GAAA,CAAA,EAAA;2BAKqG,CAAA,eAJ5H,mBAI4H,YAJ5H,WAI4H;cAHtH;KAAJ,KAAI;wEACU,QAAA;OACN,MAAA,WAAU,EAAA,EAClB,OAAM,mHAAiH,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,YAF9G,MAAA,MAAK,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex min-h-0 shrink cursor-text items-start bg-b-1 text-c-1 leading-snug dark:bg-b-1.5',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmB,SAAA,YAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;EACb,CAAC;EAGD,MAAM,EAAE,gBAAgB,eAAe,UAAU;EAEjD,gBAAgB;GAEd,IAAI,eAAe,WAAW,OAAO,SAAS,OAAO,MAAM;EAC7D,CAAC;;uBAGC,YAakB,MAAA,uBAAA,GAblB,WAakB,EAZhB,IAAG,MAAK,GACO,MAAA,cAAA,CAAc,CAAA,sGAAA,GAAA,EAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAA,CAAQ,EAAE,MAAK,GAAA,CAAA,GAAA;2BAKqG,CAAA,eAJ5H,mBAI4H,YAJ5H,WAI4H;cAHtH;KAAJ,KAAI;wEACU,QAAA;OACN,MAAA,UAAA,GAAU,EAClB,OAAM,kHAAiH,CAAA,GAAA,MAAA,EAAA,GAAA,CAAA,CAAA,YAF9G,MAAA,KAAK,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AA6GA;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;;iBA8CP,MAAM;;;;;;eA9CN,OAAO;;iBA8CP,MAAM;;;;;aAjCR,MAAM,OAAO;aAEb,MAAM,OAAO;YAEd,MAAM,OAAO;EA0KnB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AAwGA;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;;iBA8CP,MAAM;;;;;;eA9CN,OAAO;;iBA8CP,MAAM;;;;;aAjCR,MAAM,OAAO;aAEb,MAAM,OAAO;YAEd,MAAM,OAAO;EAiKnB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.js","names":[],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\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}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'cursor-text text-c-1',\n        readonly ? '' : 'focus-within:bg-b-1',\n      )\n    \"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTextInput.vue.js","names":[],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\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}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"stylingAttrsCx('cursor-text bg-b-1 text-c-1 dark:bg-b-1.5')\"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

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

@@ -21,14 +21,14 @@ var _hoisted_7 = {
 	key: 1,
 	class: "text-c-2"
 };
-var ScalarTextInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarTextInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarTextInput",
-	props: /* @__PURE__ */ mergeModels({ readonly: { type: Boolean } }, {
+	props: /*@__PURE__*/ mergeModels({ readonly: { type: Boolean } }, {
 		"modelValue": {},
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["click"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["click"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
@@ -43,7 +43,7 @@ var ScalarTextInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			else input.value?.focus();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("cursor-text text-c-1", __props.readonly ? "" : "focus-within:bg-b-1"), { onClick: handleClick }), {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("cursor-text bg-b-1 text-c-1 dark:bg-b-1.5"), { onClick: handleClick }), {
 				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
 					_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true),
 					withDirectives(createElementVNode("input", mergeProps({

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.script.js","names":["$slots","$attrs"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\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}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'cursor-text text-c-1',\n        readonly ? '' : 'focus-within:bg-b-1',\n      )\n    \"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,OAAO;EAcb,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,QAAQ,KAAsB;EAGpC,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,OAAM,OAAO,OAAM;IACzD;EAED,SAAS,YAAY,OAAmB;AAEtC,QAAK,SAAS,MAAK;AAEnB,OAAI,QAAA,SACF,OAAM,OAAO,QAAQ;OAErB,OAAM,OAAO,OAAO;;;uBAKtB,YAuCkB,MAAA,wBAAA,EAvClB,WAuCkB,EAtChB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,wBAA0C,QAAA,WAAQ,KAAA,sBAAA,EAAA,EAM9E,SAAO,aAAW,CAAA,EAAA;2BA6Bb,CA5BN,mBA4BM,OA5BN,YA4BM;KA1BIA,KAAAA,OAAO,UAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;oBAExB,mBAMwB,SANxB,WAMwB;eALlB;MAAJ,KAAI;yEACU,QAAA;MACb,iBAAe,QAAA,YAAY,KAAA;MAC5B,OAAM;MACL,UAAA,QAAA;QACO,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,WAAA,EAAA,CAAA,CAAA,eAJT,MAAA,MAAK,CAAA,CAAA;KAMRA,KAAAA,OAAO,UAAUA,KAAAA,OAAO,UAAA,WAAA,EADhC,mBAcM,OAdN,YAcM;MAVIA,KAAAA,OAAO,UAAA,WAAA,EADf,mBAIO,QAJP,YAIO,CADL,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MAExB,mBAAuE,QAAvE,YAAuE,gBAArC,MAAA,SAASC,KAAAA,OAAO,YAAW,EAAA,EAAA;MAErDD,KAAAA,OAAO,UAAA,WAAA,EADf,mBAIO,QAJP,YAIO,CADL,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;;QAI5B,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTextInput.vue.script.js","names":["$slots","$attrs"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\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}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"stylingAttrsCx('cursor-text bg-b-1 text-c-1 dark:bg-b-1.5')\"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,OAAO;EAcb,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAElC,MAAM,QAAQ,IAAsB;EAGpC,MAAM,EAAE,gBAAgB,eAAe,UAAU;EAEjD,gBAAgB;GAEd,IAAI,eAAe,WAAW,OAAO,MAAM,OAAO,MAAM;EAC1D,CAAC;EAED,SAAS,YAAY,OAAmB;GAEtC,KAAK,SAAS,KAAK;GAEnB,IAAI,QAAA,UACF,MAAM,OAAO,OAAO;QAEpB,MAAM,OAAO,MAAM;EAEvB;;uBAGE,YAkCkB,MAAA,uBAAA,GAlClB,WAkCkB,EAjChB,IAAG,MAAK,GACA,MAAA,cAAA,CAAc,CAAA,2CAAA,GAAA,EACrB,SAAO,YAAW,CAAA,GAAA;2BA6Bb,CA5BN,mBA4BM,OA5BN,YA4BM;KA1BIA,KAAAA,OAAO,UAAA,UAAA,GADf,mBAIM,OAJN,YAIM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;oBAExB,mBAMwB,SANxB,WAMwB;eALlB;MAAJ,KAAI;yEACU,QAAA;MACb,iBAAe,QAAA,YAAY,KAAA;MAC5B,OAAM;MACL,UAAA,QAAA;QACO,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,UAAA,GAAA,CAAA,CAAA,eAJT,MAAA,KAAK,CAAA,CAAA;KAMRA,KAAAA,OAAO,UAAUA,KAAAA,OAAO,UAAA,UAAA,GADhC,mBAcM,OAdN,YAcM;MAVIA,KAAAA,OAAO,UAAA,UAAA,GADf,mBAIO,QAJP,YAIO,CADL,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAExB,mBAAuE,QAAvE,YAAuE,gBAArC,MAAA,SAASC,KAAAA,OAAO,WAAW,GAAA,CAAA;MAErDD,KAAAA,OAAO,UAAA,UAAA,GADf,mBAIO,QAJP,YAIO,CADL,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;QAI5B,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA"}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInputCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"names":[],"mappings":"AAgGA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,uCAAuC;eAC5B,MAAM;IACjB,oCAAoC;eACzB,OAAO;IAClB,2DAA2D;gBAC/C,OAAO;;iBAyCR,MAAM;aACR,OAAO;;;;;IA/ChB,uCAAuC;eAC5B,MAAM;IACjB,oCAAoC;eACzB,OAAO;IAClB,2DAA2D;gBAC/C,OAAO;;iBAyCR,MAAM;aACR,OAAO;;;;;aAnCP,MAAM,OAAO;aAEb,MAAM,OAAO;YAEd,MAAM,OAAO;WAEd,MAAM,OAAO;aAEX,MAAM,OAAO;EAiKpB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTextInputCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"names":[],"mappings":"AAiGA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,uCAAuC;eAC5B,MAAM;IACjB,oCAAoC;eACzB,OAAO;IAClB,2DAA2D;gBAC/C,OAAO;;iBAyCR,MAAM;aACR,OAAO;;;;;IA/ChB,uCAAuC;eAC5B,MAAM;IACjB,oCAAoC;eACzB,OAAO;IAClB,2DAA2D;gBAC/C,OAAO;;iBAyCR,MAAM;aACR,OAAO;;;;;aAnCP,MAAM,OAAO;aAEb,MAAM,OAAO;YAEd,MAAM,OAAO;WAEd,MAAM,OAAO;aAEX,MAAM,OAAO;EA0KpB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInputCopy.vue.js","names":[],"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=\"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 class=\"bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTextInputCopy.vue.js","names":[],"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=\"z-1 bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2\"\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":""}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.script.js

@@ -3,9 +3,9 @@ import ScalarCopyButton_default from "../ScalarCopy/ScalarCopyButton.vue.js";
 import ScalarTextInput_default from "./ScalarTextInput.vue.js";
 import { createBlock, createSlots, createVNode, defineComponent, mergeModels, onMounted, openBlock, renderSlot, unref, useModel, watch, withCtx, withModifiers } from "vue";
 import { useClipboard } from "@vueuse/core";
-var ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarTextInputCopy",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		duration: { default: 1500 },
 		editable: { type: Boolean },
 		immediate: { type: Boolean }
@@ -39,12 +39,12 @@ var ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				onClick: _cache[2] || (_cache[2] = ($event) => model.value && unref(copy)(model.value))
 			}, {
 				aside: withCtx(() => [createVNode(unref(ScalarCopyButton_default), {
-					class: "z-1",
+					class: "z-1 bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2",
 					copied: copied.value || unref(clipboardCopied),
 					placement: "left",
 					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => model.value && unref(copy)(model.value), ["stop"]))
 				}, createSlots({
-					backdrop: withCtx(() => [createVNode(unref(ScalarCopyBackdrop_default), { class: "bg-b-1.5" })]),
+					backdrop: withCtx(() => [createVNode(unref(ScalarCopyBackdrop_default), { 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" })]),
 					_: 2
 				}, [_ctx.$slots.copy ? {
 					name: "copy",

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInputCopy.vue.script.js","names":["$slots"],"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=\"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 class=\"bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyCA,kBAAgB;AAEd,OAAI,QAAA,aAAa,MAAM,MAAO,MAAK,MAAM,MAAK;IAC/C;EAED,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,SAAS,SAAoB,SAAC,SAA4B;EAEhE,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;GACf,CAAA;;AAGD,QAAM,kBAAkB,MAAO,OAAO,QAAQ,EAAE;;uBAG9C,YAyBkB,yBAAA;gBAxBP,MAAA;uEAAK,QAAA;IACb,UAAQ,CAAG,QAAA;IACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAS,MAAA,KAAI,CAAC,MAAA,MAAK;;IAChB,OAAK,cAmBK,CAlBnB,YAkBmB,MAAA,yBAAA,EAAA;KAjBjB,OAAM;KACL,QAAQ,OAAA,SAAU,MAAA,gBAAe;KAClC,WAAU;KACT,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,SAAS,MAAA,KAAI,CAAC,MAAA,MAAK,EAAA,CAAA,OAAA,CAAA;;KAWrB,UAAQ,cACsB,CAAvC,YAAuC,MAAA,2BAAA,EAAA,EAAnB,OAAM,YAAU,CAAA,CAAA,CAAA;;QAV9BA,KAAAA,OAAO,OAAA;WACZ;uBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;gBAGdA,KAAAA,OAAO,SAAA;WACZ;uBACqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTextInputCopy.vue.script.js","names":["$slots"],"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=\"z-1 bg-b-1 hover:bg-b-1.5 dark:bg-b-2 dark:hover:bg-b-2\"\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,QAAQ,SAAmB,SAAA,YAAC;EAElC,MAAM,SAAS,SAAoB,SAAC,QAA4B;EAEhE,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;EAChB,CAAC;;EAGD,MAAM,kBAAkB,MAAO,OAAO,QAAQ,CAAE;;uBAG9C,YA0BkB,yBAAA;gBAzBP,MAAA;uEAAK,QAAA;IACb,UAAQ,CAAG,QAAA;IACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAS,MAAA,IAAA,CAAI,CAAC,MAAA,KAAK;;IAChB,OAAK,cAoBK,CAnBnB,YAmBmB,MAAA,wBAAA,GAAA;KAlBjB,OAAM;KACL,QAAQ,OAAA,SAAU,MAAA,eAAA;KACnB,WAAU;KACT,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,SAAS,MAAA,IAAA,CAAI,CAAC,MAAA,KAAK,GAAA,CAAA,MAAA,CAAA;;KAWrB,UAAQ,cAEuF,CADxG,YACwG,MAAA,0BAAA,GAAA,EAAtG,OAAM,8FAA6F,CAAA,CAAA,CAAA;;QAX/FA,KAAAA,OAAO,OAAA;WACZ;uBACmB,CAApB,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA;;gBAGdA,KAAAA,OAAO,SAAA;WACZ;uBACqB,CAAtB,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA"}

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

@@ -1,7 +1,7 @@
 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({
+var ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarThemeSwatches",
 	props: { css: {} },

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarThemeSwatches.vue.script.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":";;;;;;;;EAoBA,MAAM,EAAE,WAAW,uBAAuB,QAAA,IAAG;EAG7C,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAgBM,OAhBN,WAgBM,EAfH,OAAK;kBAAwB,MAAA,OAAM,CAAC,MAAK;iBAA8C,MAAA,OAAM,CAAC,KAAI;QAIpF,MAAA,GAAE,CAAA,yCAAA,sCAAA,CAAA,EAAA,EAAA,UAAA,KAAA,EAMjB,mBAI4E,UAAA,MAAA,WAH9D,MAAA,eAAc,GAAnB,MAAC;wBADV,mBAI4E,OAAA;KAFzE,KAAK;KACN,OAAM;KACL,OAAK,eAAA;MAAA,cAAkB,MAAA,OAAM,CAAC,MAAM;MAAC,aAAgB,MAAA,OAAM,CAAC,KAAK;MAAC,CAAA"}
+{"version":3,"file":"ScalarThemeSwatches.vue.script.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":";;;;;;;;EAoBA,MAAM,EAAE,WAAW,uBAAuB,QAAA,GAAG;EAG7C,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAgBM,OAhBN,WAgBM,EAfH,OAAK;kBAAwB,MAAA,MAAA,CAAM,CAAC,MAAK;iBAA8C,MAAA,MAAA,CAAM,CAAC,KAAI;QAIpF,MAAA,EAAA,CAAE,CAAA,yCAAA,qCAAA,CAAA,GAAA,EAAA,UAAA,IAAA,GAMjB,mBAI4E,UAAA,MAAA,WAH9D,MAAA,cAAA,IAAL,MAAC;wBADV,mBAI4E,OAAA;KAFzE,KAAK;KACN,OAAM;KACL,OAAK,eAAA;MAAA,cAAkB,MAAA,MAAA,CAAM,CAAC,MAAM;MAAC,aAAgB,MAAA,MAAA,CAAM,CAAC,KAAK;KAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"useThemeSwatches.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/useThemeSwatches.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, toValue } from 'vue'\n\n/** Numbers 1 to 3 */\ntype OneToThree = 1 | 2 | 3\n\n/**\n * CSS variable names that can be extracted from theme CSS\n */\ntype ThemeCssVar = `--scalar-color-${OneToThree}` | `--scalar-background-${OneToThree}` | '--scalar-color-accent'\n\n/**\n * Theme colors for light and dark modes\n */\ntype ThemeColors = {\n  light: ThemeCssVars\n  dark: ThemeCssVars\n}\n\n/**\n * Record of theme CSS variables to their values (partial)\n */\ntype ThemeCssVars = Partial<Record<ThemeCssVar, string>>\n\n/** Theme CSS variables */\nexport const THEME_CSS_VARS = [\n  '--scalar-color-1',\n  '--scalar-color-2',\n  '--scalar-color-3',\n  '--scalar-background-1',\n  '--scalar-background-2',\n  '--scalar-background-3',\n  '--scalar-color-accent',\n] as const satisfies ThemeCssVar[]\n\n/**\n * Parses a given css string for a css variable regexp\n */\nfunction getVars(cssVarPattern: string, css: string): Partial<Record<ThemeCssVar, string>> {\n  const matches = [...css.matchAll(new RegExp(`(${cssVarPattern}): ([^;]+);`, 'gm'))]\n  if (matches.length === 0) {\n    return {}\n  }\n  return Object.fromEntries(matches.map((match) => [match[1], match[2]]))\n}\n\n/**\n * Parses a given css string for the variables we want\n */\nfunction parseRules(css?: string): ThemeCssVars {\n  if (!css) {\n    return {}\n  }\n  return {\n    ...getVars('--scalar-color-[1-3]', css),\n    ...getVars('--scalar-background-[1-3]', css),\n    ...getVars('--scalar-color-accent', css),\n  } as ThemeCssVars\n}\n\n/**\n * Returns the light and dark colors for a given css string\n */\nexport function useThemeSwatches(css: MaybeRefOrGetter<string>) {\n  return {\n    colors: computed<ThemeColors>(() => ({\n      light: parseRules(toValue(css).match(/\\.light-mode[^{]*{[^}]*}/m)?.[0]),\n      dark: parseRules(toValue(css).match(/\\.dark-mode[^{]*{[^}]*}/m)?.[0]),\n    })),\n  }\n}\n"],"mappings":";;;AAwBA,IAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;AAKD,SAAS,QAAQ,eAAuB,KAAmD;CACzF,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,OAAO,IAAI,cAAc,cAAc,KAAK,CAAC,CAAC;AACnF,KAAI,QAAQ,WAAW,EACrB,QAAO,EAAE;AAEX,QAAO,OAAO,YAAY,QAAQ,KAAK,UAAU,CAAC,MAAM,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;AAMzE,SAAS,WAAW,KAA4B;AAC9C,KAAI,CAAC,IACH,QAAO,EAAE;AAEX,QAAO;EACL,GAAG,QAAQ,wBAAwB,IAAI;EACvC,GAAG,QAAQ,6BAA6B,IAAI;EAC5C,GAAG,QAAQ,yBAAyB,IAAI;EACzC;;;;;AAMH,SAAgB,iBAAiB,KAA+B;AAC9D,QAAO,EACL,QAAQ,gBAA6B;EACnC,OAAO,WAAW,QAAQ,IAAI,CAAC,MAAM,4BAA4B,GAAG,GAAG;EACvE,MAAM,WAAW,QAAQ,IAAI,CAAC,MAAM,2BAA2B,GAAG,GAAG;EACtE,EAAE,EACJ"}
+{"version":3,"file":"useThemeSwatches.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/useThemeSwatches.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, toValue } from 'vue'\n\n/** Numbers 1 to 3 */\ntype OneToThree = 1 | 2 | 3\n\n/**\n * CSS variable names that can be extracted from theme CSS\n */\ntype ThemeCssVar = `--scalar-color-${OneToThree}` | `--scalar-background-${OneToThree}` | '--scalar-color-accent'\n\n/**\n * Theme colors for light and dark modes\n */\ntype ThemeColors = {\n  light: ThemeCssVars\n  dark: ThemeCssVars\n}\n\n/**\n * Record of theme CSS variables to their values (partial)\n */\ntype ThemeCssVars = Partial<Record<ThemeCssVar, string>>\n\n/** Theme CSS variables */\nexport const THEME_CSS_VARS = [\n  '--scalar-color-1',\n  '--scalar-color-2',\n  '--scalar-color-3',\n  '--scalar-background-1',\n  '--scalar-background-2',\n  '--scalar-background-3',\n  '--scalar-color-accent',\n] as const satisfies ThemeCssVar[]\n\n/**\n * Parses a given css string for a css variable regexp\n */\nfunction getVars(cssVarPattern: string, css: string): Partial<Record<ThemeCssVar, string>> {\n  const matches = [...css.matchAll(new RegExp(`(${cssVarPattern}): ([^;]+);`, 'gm'))]\n  if (matches.length === 0) {\n    return {}\n  }\n  return Object.fromEntries(matches.map((match) => [match[1], match[2]]))\n}\n\n/**\n * Parses a given css string for the variables we want\n */\nfunction parseRules(css?: string): ThemeCssVars {\n  if (!css) {\n    return {}\n  }\n  return {\n    ...getVars('--scalar-color-[1-3]', css),\n    ...getVars('--scalar-background-[1-3]', css),\n    ...getVars('--scalar-color-accent', css),\n  } as ThemeCssVars\n}\n\n/**\n * Returns the light and dark colors for a given css string\n */\nexport function useThemeSwatches(css: MaybeRefOrGetter<string>) {\n  return {\n    colors: computed<ThemeColors>(() => ({\n      light: parseRules(toValue(css).match(/\\.light-mode[^{]*{[^}]*}/m)?.[0]),\n      dark: parseRules(toValue(css).match(/\\.dark-mode[^{]*{[^}]*}/m)?.[0]),\n    })),\n  }\n}\n"],"mappings":";;;AAwBA,IAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;AAKA,SAAS,QAAQ,eAAuB,KAAmD;CACzF,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,OAAO,IAAI,cAAc,cAAc,IAAI,CAAC,CAAC;CAClF,IAAI,QAAQ,WAAW,GACrB,OAAO,CAAC;CAEV,OAAO,OAAO,YAAY,QAAQ,KAAK,UAAU,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC,CAAC;AACxE;;;;AAKA,SAAS,WAAW,KAA4B;CAC9C,IAAI,CAAC,KACH,OAAO,CAAC;CAEV,OAAO;EACL,GAAG,QAAQ,wBAAwB,GAAG;EACtC,GAAG,QAAQ,6BAA6B,GAAG;EAC3C,GAAG,QAAQ,yBAAyB,GAAG;CACzC;AACF;;;;AAKA,SAAgB,iBAAiB,KAA+B;CAC9D,OAAO,EACL,QAAQ,gBAA6B;EACnC,OAAO,WAAW,QAAQ,GAAG,CAAC,CAAC,MAAM,2BAA2B,CAAC,GAAG,EAAE;EACtE,MAAM,WAAW,QAAQ,GAAG,CAAC,CAAC,MAAM,0BAA0B,CAAC,GAAG,EAAE;CACtE,EAAE,EACJ;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AA6CA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;YACV,MAAM;;iBAkBH,OAAO;;;;eAnBP,OAAO;YACV,MAAM;;iBAkBH,OAAO;;;kFA4DhB,CAAC"}
+{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AA6CA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;YACV,MAAM;;iBAkBH,OAAO;;;;eAnBP,OAAO;YACV,MAAM;;iBAkBH,OAAO;;;kFA6DhB,CAAC"}

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

@@ -1,8 +1,8 @@
 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({
+var ScalarToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarToggle",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		disabled: { type: Boolean },
 		label: {}
 	}, {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.script.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":";;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAKd,MAAM,QAAQ,SAAoB,SAAA,aAAmB;EAErD,SAAS,SAAS;AAChB,OAAI,MAAM,SACR;AAEF,SAAM,QAAQ,CAAC,MAAM;;;uBAIrB,YAOoB,4BAAA;IANjB,gBAAc,MAAA;IACd,OAAK,eAAE,MAAA,QAAK,gBAAA,GAAA;IACZ,UAAA,QAAA;IACA,OAAA,QAAA;IACD,MAAK;IACJ,OAAO,MAAA,QAAK,QAAA;IACZ,SAAO"}
+{"version":3,"file":"ScalarToggle.vue.script.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":";;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAKd,MAAM,QAAQ,SAAoB,SAAA,YAAmB;EAErD,SAAS,SAAS;GAChB,IAAI,MAAM,UACR;GAEF,MAAM,QAAQ,CAAC,MAAM;EACvB;;uBAGE,YAOoB,4BAAA;IANjB,gBAAc,MAAA;IACd,OAAK,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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAKlE;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,oBAAoB,EAAE;;iBAYrB,oBAAoB,EAAE;;;;cAZvB,oBAAoB,EAAE;;iBAYrB,oBAAoB,EAAE;;;kFA6E/B,CAAC"}
+{"version":3,"file":"ScalarToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAKlE;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,oBAAoB,EAAE;;iBAYrB,oBAAoB,EAAE;;;;cAZvB,oBAAoB,EAAE;;iBAYrB,oBAAoB,EAAE;;;kFA8E/B,CAAC"}

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":[],"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.script.js

@@ -1,10 +1,10 @@
 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({
+var ScalarToggleGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarToggleGroup",
-	props: /* @__PURE__ */ mergeModels({ options: { default: () => [] } }, {
-		"modelValue": { default: [] },
+	props: /*@__PURE__*/ mergeModels({ options: { default: () => [] } }, {
+		"modelValue": { default: () => [] },
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleGroup.vue.script.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":";;;;;;;;;;;EAiBA,MAAM,QAAQ,SAAmC,SAAA,aAAgB;;uBAG/D,YAauB,MAAA,6BAAA,EAAA,MAAA;2BAXM,EAAA,UAAA,KAAA,EAD3B,mBAWoB,UAAA,MAAA,WAVD,QAAA,UAAV,WAAM;yBADf,YAWoB,2BAAA;MATjB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,MAAK;MAC7D,wBAA6B,YAAuB,MAAA,QAAQ,UAAA,CAAA,GAA0B,MAAA,OAAO,OAAM,GAAgB,MAAA,MAAM,QAAM,EAAI,YAAY,UAAU,OAAO,MAAK;;6BAMpJ,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarToggleGroup.vue.script.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":";;;;;;;;;;;EAiBA,MAAM,QAAQ,SAAmC,SAAA,YAAsB;;uBAGrE,YAauB,MAAA,4BAAA,GAAA,MAAA;2BAXM,EAAA,UAAA,IAAA,GAD3B,mBAWoB,UAAA,MAAA,WAVD,QAAA,UAAV,WAAM;yBADf,YAWoB,2BAAA;MATjB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,KAAK;MAC7D,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"}

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

@@ -4,7 +4,7 @@ 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: "flex-1 text-left min-w-0 truncate" };
-var ScalarToggleInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarToggleInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarToggleInput",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleInput.vue.script.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":";;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,YAUkB,MAAA,wBAAA,EAVlB,WAUkB,EAThB,IAAG,SAAO,EACK,MAAA,eAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,OAAK,CAAA,CAAA,EAAA;2BAGzB,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,EACvD,YAGwB,sBAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarToggleInput.vue.script.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":";;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAoB,SAAA,YAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,UAAU;;uBAG/C,YAUkB,MAAA,uBAAA,GAVlB,WAUkB,EAThB,IAAG,QAAO,GACK,MAAA,cAAA,CAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,MAAK,CAAA,CAAA,GAAA;2BAGzB,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,GACvD,YAGwB,sBAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA"}

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

@@ -6,7 +6,7 @@ var _hoisted_2 = {
 	key: 0,
 	class: "sr-only"
 };
-var ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarToggleSlider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarToggleSlider",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggleSlider.vue.script.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":";;;;;;;;;;;;;;;;;EAgBA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,UAAU,EAAE,MAAM,iCAAiC,EACpD;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAeS,UAfT,WAeS;IAdN,iBAAe,QAAA;IAChB,MAAK;MACG,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,UAAG,QAAA,UAAQ,CAAA,CAAA,CAAA,EAAA,CAC9B,mBAKO,OAAA,EAJL,OAAK,eAAA,CAAC,0HAAwH;wBACxF,QAAA,UAAK;uBAA0C,QAAA,UAAK;oBAKpF,QAAA,SAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"ScalarToggleSlider.vue.script.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":";;;;;;;;;;;;;;;;;EAgBA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,UAAU,EAAE,MAAM,gCAAgC,EACpD;EACF,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAeS,UAfT,WAeS;IAdN,iBAAe,QAAA;IAChB,MAAK;MACG,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA,EAAA,UAAG,QAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,CAC9B,mBAKO,OAAA,EAJL,OAAK,eAAA,CAAC,0HAAwH;wBACxF,QAAA,UAAK;uBAA0C,QAAA,UAAK;oBAKpF,QAAA,SAAA,UAAA,GADR,mBAIO,QAJP,YAIO,gBADF,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/ScalarToggle/ScalarTristateToggle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarTristateToggle.vue"],"names":[],"mappings":"AA0EA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,mEAAmE;eACxD,OAAO;IAClB,yDAAyD;YACjD,MAAM;;iBAqCH,OAAO,GAAG,SAAS;;;;IAxC9B,mEAAmE;eACxD,OAAO;IAClB,yDAAyD;YACjD,MAAM;;iBAqCH,OAAO,GAAG,SAAS;;;kFA4D5B,CAAC"}
+{"version":3,"file":"ScalarTristateToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarTristateToggle.vue"],"names":[],"mappings":"AA0EA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,mEAAmE;eACxD,OAAO;IAClB,yDAAyD;YACjD,MAAM;;iBAqCH,OAAO,GAAG,SAAS;;;;IAxC9B,mEAAmE;eACxD,OAAO;IAClB,yDAAyD;YACjD,MAAM;;iBAqCH,OAAO,GAAG,SAAS;;;kFA6D5B,CAAC"}

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

@@ -1,8 +1,8 @@
 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({
+var ScalarTristateToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarTristateToggle",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		disabled: { type: Boolean },
 		label: {}
 	}, {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggle.vue.script.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":";;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgC,SAAA,aAAC;;EAG/C,MAAM,QAAQ,eAAuC;AACnD,OAAI,MAAM,UAAU,KAAA,EAClB,QAAO;AAET,UAAO,MAAM,QAAQ,OAAO;IAC7B;;EAGD,MAAM,eAAe;GACnB,OAAO;IAAE,OAAO;IAAI,OAAO;IAAU;GACrC,IAAI;IAAE,OAAO;IAAY,OAAO;IAAO;GACvC,KAAK;IAAE,OAAO;IAAe,OAAO;IAAS;GAC9C;;EAGD,SAAS,SAAS;AAChB,OAAI,MAAM,SACR;AAEF,OAAI,MAAM,UAAU,KAAA,EAClB,OAAM,QAAQ;YACL,MAAM,UAAU,KACzB,OAAM,QAAQ;OAEd,OAAM,QAAQ,KAAA;;;uBAKhB,YAMoB,4BANpB,WAMoB;IALjB,gBAAc,MAAA,UAAK,UAAA,UAAyB,MAAA;IAC5C,UAAA,QAAA;IACA,OAAA,QAAA;IACD,MAAK;MACG,aAAa,MAAA,QAAK,EACzB,SAAO,QAAM,CAAA,EAAA,MAAA,IAAA;IAAA;IAAA;IAAA;IAAA,CAAA"}
+{"version":3,"file":"ScalarTristateToggle.vue.script.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":";;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAOd,MAAM,QAAQ,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;;uBAGE,YAMoB,4BANpB,WAMoB;IALjB,gBAAc,MAAA,UAAK,UAAA,UAAyB,MAAA;IAC5C,UAAA,QAAA;IACA,OAAA,QAAA;IACD,MAAK;MACG,aAAa,MAAA,QAAK,EACzB,SAAO,OAAM,CAAA,GAAA,MAAA,IAAA;IAAA;IAAA;IAAA;GAAA,CAAA"}

package/dist/components/ScalarToggle/ScalarTristateToggleGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarTristateToggleGroup.vue"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAGlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,oBAAoB,EAAE;;iBAuBrB,oBAAoB,EAAE;;;;cAvBvB,oBAAoB,EAAE;;iBAuBrB,oBAAoB,EAAE;;;kFAyE/B,CAAC"}
+{"version":3,"file":"ScalarTristateToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarTristateToggleGroup.vue"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAGlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,oBAAoB,EAAE;;iBAuBrB,oBAAoB,EAAE;;;;cAvBvB,oBAAoB,EAAE;;iBAuBrB,oBAAoB,EAAE;;;kFA0E/B,CAAC"}

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":[],"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.script.js

@@ -1,10 +1,10 @@
 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({
+var ScalarTristateToggleGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarTristateToggleGroup",
-	props: /* @__PURE__ */ mergeModels({ options: { default: () => [] } }, {
-		"modelValue": { default: [] },
+	props: /*@__PURE__*/ mergeModels({ options: { default: () => [] } }, {
+		"modelValue": { default: () => [] },
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggleGroup.vue.script.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":";;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmC,SAAA,aAAgB;;EAGjE,SAAS,SAAS,QAAmD;AACnE,UAAO,MAAM,MAAM,MAAM,UAAU,MAAM,UAAU,OAAO,MAAM,EAAE;;;EAIpE,SAAS,SAAS,QAA8B,SAA8B;GAC5E,MAAM,OAAO,MAAM,MAAM,QAAQ,UAAU,MAAM,UAAU,OAAO,MAAK;AACvE,SAAM,QAAQ,YAAY,KAAA,IAAY,OAAO,CAAC,GAAG,MAAM;IAAE,GAAG;IAAQ;IAAS,CAAA;;;uBAI7E,YAQuB,MAAA,6BAAA,EAAA,MAAA;2BANM,EAAA,UAAA,KAAA,EAD3B,mBAM4B,UAAA,MAAA,WALT,QAAA,UAAV,WAAM;yBADf,YAM4B,mCAAA;MAJzB,KAAK,OAAO;MACZ,YAAY,SAAS,OAAM;MAC3B,wBAAoB,YAAY,SAAS,QAAQ,QAAO;;6BACvC,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTristateToggleGroup.vue.script.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":";;;;;;;;;;;EAkBA,MAAM,QAAQ,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;;uBAGE,YAQuB,MAAA,4BAAA,GAAA,MAAA;2BANM,EAAA,UAAA,IAAA,GAD3B,mBAM4B,UAAA,MAAA,WALT,QAAA,UAAV,WAAM;yBADf,YAM4B,mCAAA;MAJzB,KAAK,OAAO;MACZ,YAAY,SAAS,MAAM;MAC3B,wBAAoB,YAAY,SAAS,QAAQ,OAAO;;6BACvC,CAAA,gBAAA,gBAAf,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}

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

@@ -4,7 +4,7 @@ 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: "flex-1 text-left min-w-0 truncate" };
-var ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarTristateToggleInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarTristateToggleInput",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggleInput.vue.script.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":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ,SAAgC,SAAA,aAAC;EAG/C,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,YAYkB,MAAA,wBAAA,EAZlB,WAYkB,EAXhB,IAAG,SAAO,EACK,MAAA,eAAc,CAAA,qCAAA,EAAA,YAA4D,MAAA,UAAU,KAAA,GAAA,CAAA,CAAA,EAAA;2BAKtC,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,EACvD,YAGwB,8BAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTristateToggleInput.vue.script.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":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ,SAAgC,SAAA,YAAC;EAG/C,MAAM,EAAE,gBAAgB,eAAe,UAAU;;uBAG/C,YAYkB,MAAA,uBAAA,GAZlB,WAYkB,EAXhB,IAAG,QAAO,GACK,MAAA,cAAA,CAAc,CAAA,qCAAA,EAAA,YAA4D,MAAA,UAAU,KAAA,EAAA,CAAA,CAAA,GAAA;2BAKtC,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,GACvD,YAGwB,8BAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA"}

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

@@ -1,7 +1,7 @@
 import ScalarHotkey_default from "../ScalarHotkey/ScalarHotkey.vue.js";
 import { useTooltip } from "./useTooltip.js";
 import { computed, createElementBlock, defineComponent, h, normalizeClass, openBlock, ref, render, renderSlot } from "vue";
-var ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarHotkeyTooltip",
 	props: {
 		content: { default: "" },

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"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":";;;;;;;;;;;;;;EAwCA,MAAM,aAAsC,IAAI,KAAI;AA4CpD,aAAW;GACT,SAxCsB,eAAuB;AAC7C,QAAI,CAAC,SAAU,QAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,MAAK;IAEvC,MAAM,cACJ;AAEF,QAAI,QAAA,QAEF,QACE,EAAE,OAAO,EAAE,OAAO,2BAA2B,EAAE,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,CACH,CAAC,EACF,GACF;QAEA,QACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,EACF,GACF;AAMF,WAHa,GAAG;KAIjB;GAIC,eAAe;GACf,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"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":";;;;;;;;;;;;;;EAwCA,MAAM,aAAsC,IAAI,IAAI;EA4CpD,WAAW;GACT,SAxCsB,eAAuB;IAC7C,IAAI,CAAC,UAAU,OAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,KAAK;IAEvC,MAAM,cACJ;IAEF,IAAI,QAAA,SAEF,OACE,EAAE,OAAO,EAAE,OAAO,0BAA0B,GAAG,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;IACT,CAAC,CACH,CAAC,GACD,EACF;SAEA,OACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;IACT,CAAC,GACD,EACF;IAMF,OAHa,GAAG;GAIlB,CAGW;GACT,eAAe;GACf,OAAO,eAAe,QAAA,KAAK;GAC3B,WAAW,eAAe,QAAA,SAAS;GACnC,QAAQ,eAAe,QAAA,MAAM;GAC7B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,CAC/D;EACF,CAAC;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\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<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\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<style>\n@reference \"../../style.css\";\n\n/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import { useTooltip } from "./useTooltip.js";
 import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot } from "vue";
-var ScalarTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarTooltip",
 	props: {
 		content: { default: "" },

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\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<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,KAAI;AAEpD,aAAW;GACT,SAAS,eAAe,QAAA,QAAQ;GAChC,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\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<style>\n@reference \"../../style.css\";\n\n/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,IAAI;EAEpD,WAAW;GACT,SAAS,eAAe,QAAA,OAAO;GAC/B,OAAO,eAAe,QAAA,KAAK;GAC3B,WAAW,eAAe,QAAA,SAAS;GACnC,QAAQ,eAAe,QAAA,MAAM;GAC7B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,CAC/D;EACF,CAAC;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}