@scalar/components 0.32.1 → 0.33.0

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCheckboxInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Input component\n *\n * A wrapper around the HTML input element for either checkboxes or radio buttons.\n *\n * @example\n *  <ScalarCheckboxInput v-model=\"model\" type=\"checkbox\">\n *    Option Label\n *  </ScalarCheckboxInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarCheckbox from './ScalarCheckbox.vue'\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: ScalarCheckboxType\n    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */\n    indeterminate?: boolean\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\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    <ScalarCheckbox\n      class=\"shrink-0\"\n      :indeterminate=\"props.indeterminate && props.type === 'checkbox'\"\n      :selected=\"model\"\n      :type=\"props.type\" />\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      class=\"sr-only\"\n      :type=\"props.type\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAYd,MAAM,QAAQ,SAAoB,SAAA,YAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,UAAU;;uBAG/C,YAiBkB,MAAA,uBAAA,GAjBlB,WAiBkB,EAhBhB,IAAG,QAAO,GACK,MAAA,cAAA,CAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,MAAK,CAAA,CAAA,GAAA;2BAO/D;KAJvB,YAIuB,wBAAA;MAHrB,OAAM;MACL,eAAe,MAAM,iBAAiB,MAAM,SAAI;MAChD,UAAU,MAAA;MACV,MAAM,MAAM;;;;;;KACf,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;oBACvD,mBAKwB,SALxB,WAKwB;MAJtB,KAAI;yEACU,QAAA;MACd,OAAM;MACL,MAAM,MAAM;QACL,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,UAAA,GAAA,CAAA,CAAA,eAHT,MAAA,KAAK,CAAA,CAAA"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCheckboxRadioGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Radio Group component\n *\n * A group of radio inputs allowing for single selection.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption>()\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.value === option.value\"\n      :name\n      type=\"radio\"\n      :value=\"option.value\"\n      @update:modelValue=\"(checked) => (model = checked ? option : undefined)\">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAiC,SAAA,YAAC;EAEhD,MAAM,OAAO,MAAM;;uBAGjB,YAWuB,MAAA,4BAAA,GAAA,MAAA;2BATM,EAAA,UAAA,IAAA,GAD3B,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;yBADf,YASsB,6BAAA;MAPnB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,UAAU,OAAO;MACpC,MAAA,MAAA,IAAA;MACD,MAAK;MACJ,OAAO,OAAO;MACd,wBAAoB,YAAa,MAAA,QAAQ,UAAU,SAAS,KAAA;;6BAC3C,CAAA,gBAAA,gBAAf,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}

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

@@ -1,91 +0,0 @@
-import ScalarCopyBackdrop_default from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
-import ScalarCodeBlockCopy_default from "./ScalarCodeBlockCopy.vue.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, unref, useId, withCtx } from "vue";
-import { standardLanguages, syntaxHighlight } from "@scalar/code-highlight";
-import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
-//#region src/components/ScalarCodeBlock/ScalarCodeBlock.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
-var _hoisted_2 = ["id", "innerHTML"];
-var ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarCodeBlock",
-	props: {
-		content: {},
-		prettyPrintedContent: {},
-		lang: { default: "plaintext" },
-		lineNumbers: {
-			type: Boolean,
-			default: false
-		},
-		hideCredentials: {},
-		copy: {
-			type: [String, Boolean],
-			default: "hover"
-		},
-		label: { default: "Code sample" },
-		copyLabel: {}
-	},
-	setup(__props) {
-		/** Base id for the code block */
-		const id = useId();
-		/** Formatted the content into an indented json string */
-		const prettyContent = computed(() => __props.prettyPrintedContent || prettyPrintJson(__props.content ?? ""));
-		const highlightedCode = computed(() => {
-			return syntaxHighlight(prettyContent.value, {
-				lang: __props.lang.trim(),
-				languages: standardLanguages,
-				lineNumbers: __props.lineNumbers,
-				maskCredentials: __props.hideCredentials
-			}).slice(5, -6);
-		});
-		/** Determine if the content is a single line */
-		const isOneLine = computed(() => !prettyContent.value.includes("\n"));
-		const isContentValid = computed(() => {
-			return prettyContent.value !== null && prettyContent.value !== "null" && prettyContent.value !== "404 Not Found";
-		});
-		/** Whether the copy button is rendered on top of the code */
-		const showCopy = computed(() => __props.copy && isContentValid.value);
-		/**
-		* A one-liner has the copy button floating over the end of the line, so the line needs room to
-		* scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about
-		* whether trailing padding on an `overflow-x` container is scrollable.
-		*/
-		const reserveCopySpace = computed(() => isOneLine.value && showCopy.value);
-		const { cx } = useBindCx();
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-code-block group/code-block flex flex-col", "relative bg-b-1 min-h-0 min-w-0 focus-visible:outline"))), [createElementVNode("div", {
-				"aria-label": __props.label,
-				class: "custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1",
-				role: "group",
-				tabindex: "0"
-			}, [createElementVNode("pre", {
-				id: unref(id),
-				class: normalizeClass(["m-0 p-0 border-0 bg-transparent text-nowrap whitespace-pre w-fit", { "pr-6": reserveCopySpace.value }]),
-				innerHTML: highlightedCode.value
-			}, null, 10, _hoisted_2)], 8, _hoisted_1), showCopy.value ? (openBlock(), createBlock(unref(ScalarCodeBlockCopy_default), {
-				key: 0,
-				"aria-controls": unref(id),
-				class: normalizeClass(["scalar-code-copy absolute", [isOneLine.value ? "top-1/2 -translate-y-1/2 m-0 right-1" : "top-2.5 right-2.5", { "opacity-100": __props.copy === "always" }]]),
-				content: prettyContent.value,
-				copyLabel: __props.copyLabel,
-				lang: __props.lang,
-				showLang: !isOneLine.value
-			}, {
-				backdrop: withCtx(() => [createVNode(ScalarCopyBackdrop_default, { class: normalizeClass(["scalar-code-copy-backdrop", [isOneLine.value ? "-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3" : "-right-1.5 -top-1"]]) }, null, 8, ["class"])]),
-				_: 1
-			}, 8, [
-				"aria-controls",
-				"class",
-				"content",
-				"copyLabel",
-				"lang",
-				"showLang"
-			])) : createCommentVNode("", true)], 16);
-		};
-	}
-});
-//#endregion
-export { ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCodeBlock.vue.script.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCodeBlock.vue.script.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using highlight.js.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 p-0 border-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,MAAM,KAAK,MAAM;;EAGjB,MAAM,gBAAgB,eACd,QAAA,wBAAwB,gBAAgB,QAAA,WAAW,EAAE,CAC7D;EAEA,MAAM,kBAAkB,eAAe;GASrC,OARa,gBAAgB,cAAc,OAAO;IAChD,MAAM,QAAA,KAAK,KAAK;IAChB,WAAW;IACX,aAAa,QAAA;IACb,iBAAiB,QAAA;GACnB,CAGO,CAAA,CAAK,MAAM,GAAG,EAAE;EACzB,CAAC;;EAGD,MAAM,YAAY,eAAe,CAAC,cAAc,MAAM,SAAS,IAAI,CAAC;EAEpE,MAAM,iBAAiB,eAAe;GACpC,OACE,cAAc,UAAU,QACxB,cAAc,UAAU,UACxB,cAAc,UAAU;EAE5B,CAAC;;EAGD,MAAM,WAAW,eAAe,QAAA,QAAQ,eAAe,KAAK;;;;;;EAO5D,MAAM,mBAAmB,eAAe,UAAU,SAAS,SAAS,KAAK;EAGzE,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBA+CM,OAAA,eAAA,mBA9CW,MAAA,EAAA,CAAE,CAAA,oDAAA,uDAAA,CAAA,CAAA,GAAA,CAWjB,mBAUM,OAAA;IATH,cAAY,QAAA;IACb,OAAM;IACN,MAAK;IACL,UAAS;OACT,mBAI6B,OAAA;IAH1B,IAAI,MAAA,EAAA;IACL,OAAK,eAAA,CAAC,oEAAkE,EAAA,QACtD,iBAAA,MAAgB,CAAA,CAAA;IAClC,WAAQ,gBAAA;8CAGJ,SAAA,SAAA,UAAA,GADR,YAuBsB,MAAA,2BAAA,GAAA;;IArBnB,iBAAe,MAAA,EAAA;IAChB,OAAK,eAAA,CAAC,6BAA2B,CACf,UAAA,QAAA,yCAAA,qBAAA,EAAA,eAAuH,QAAA,SAAI,SAAA,CAAA,CAAA,CAAA;IAM5I,SAAS,cAAA;IACT,WAAW,QAAA;IACX,MAAM,QAAA;IACN,UAAQ,CAAG,UAAA;;IACD,UAAQ,cAOV,CANP,YAMO,4BAAA,EALL,OAAK,eAAA,CAAC,6BAA2B,CACX,UAAA,QAAA,0EAAA,mBAAA,CAAA,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.script.js

@@ -1,75 +0,0 @@
-import ScalarCopy_default from "../ScalarCopy/ScalarCopy.vue.js";
-import { LANGUAGE_LABELS } from "./constants.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
-//#region src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "hidden group-hocus-within/code-block:inline" };
-var ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarCodeBlockCopy",
-	props: /*@__PURE__*/ mergeModels({
-		showLang: { type: Boolean },
-		content: {},
-		lang: {},
-		copyLabel: {}
-	}, {
-		"copied": {
-			type: Boolean,
-			default: false
-		},
-		"copiedModifiers": {}
-	}),
-	emits: ["update:copied"],
-	setup(__props) {
-		const copied = useModel(__props, "copied");
-		/** Handles the copy button click */
-		const contentToCopy = computed(() => {
-			return typeof __props.content === "string" ? __props.content : JSON.stringify(__props.content, null, 2);
-		});
-		/** Type guard to check if the language is a standard language */
-		const isStandardLanguage = (lang) => lang in LANGUAGE_LABELS;
-		/** The human readable language name shown next to the copy label */
-		const langLabel = computed(() => {
-			if (!__props.lang) return;
-			return isStandardLanguage(__props.lang) ? LANGUAGE_LABELS[__props.lang] : __props.lang;
-		});
-		/**
-		* Names the button in every state, including while its visible label is `display: none`.
-		* The language is included only when it is shown, so the name always contains the visible text
-		* (WCAG 2.5.3) and request and response buttons on one page get distinct names.
-		*/
-		const accessibleName = computed(() => {
-			if (__props.copyLabel) return __props.copyLabel;
-			return __props.showLang && langLabel.value ? `Copy ${langLabel.value} code` : "Copy code";
-		});
-		const { cx } = useBindCx();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScalarCopy_default), mergeProps({
-				copied: copied.value,
-				"onUpdate:copied": _cache[0] || (_cache[0] = ($event) => copied.value = $event),
-				"aria-label": accessibleName.value,
-				content: contentToCopy.value,
-				placement: "left",
-				showLabel: ""
-			}, { ...unref(cx)(copied.value ? "opacity-100" : "opacity-0 group-hocus-within/code-block:opacity-100") }), createSlots({
-				backdrop: withCtx(() => [renderSlot(_ctx.$slots, "backdrop")]),
-				_: 2
-			}, [__props.lang ? {
-				name: "copy",
-				fn: withCtx(() => [createElementVNode("span", _hoisted_1, [__props.showLang ? (openBlock(), createElementBlock("span", {
-					key: 0,
-					class: normalizeClass(["group-hocus/copy-button:sr-only", { capitalize: !isStandardLanguage(__props.lang) }])
-				}, toDisplayString(langLabel.value), 3)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass({ "group-hocus/copy-button:not-sr-only sr-only": __props.showLang }) }, "Copy", 2)])]),
-				key: "0"
-			} : void 0]), 1040, [
-				"copied",
-				"aria-label",
-				"content"
-			]);
-		};
-	}
-});
-//#endregion
-export { ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCodeBlockCopy.vue.script.js.map

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCodeBlockCopy.vue.script.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block Copy button\n *\n * Displays a copy-to-clipboard button with an optional language label.\n * Used internally by ScalarCodeBlock.\n *\n * @example\n * <ScalarCodeBlockCopy content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarCopy } from '@/components/ScalarCopy'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { LANGUAGE_LABELS } from './constants'\nimport type { StandardLanguageKey } from './types'\n\nconst { content, lang, showLang, copyLabel } = defineProps<{\n  /** Whether to show the language label */\n  showLang?: boolean\n  /** Content to copy to clipboard */\n  content: string | object\n  /** Language of the code block */\n  lang?: StandardLanguageKey | string\n  /**\n   * Accessible name for the copy button.\n   *\n   * The visible label is hidden until the code block is hovered, so without an explicit name\n   * screen readers announce an empty button (found by an accessibility audit). Defaults to\n   * \"Copy <language> code\" so the name contains every word the button can show.\n   */\n  copyLabel?: string\n}>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\n/** Handles the copy button click */\nconst contentToCopy = computed<string>(() => {\n  return typeof content === 'string'\n    ? content\n    : JSON.stringify(content, null, 2)\n})\n\n/** Type guard to check if the language is a standard language */\nconst isStandardLanguage = (lang: string): lang is StandardLanguageKey =>\n  lang in LANGUAGE_LABELS\n\n/** The human readable language name shown next to the copy label */\nconst langLabel = computed<string | undefined>(() => {\n  if (!lang) {\n    return undefined\n  }\n  return isStandardLanguage(lang) ? LANGUAGE_LABELS[lang] : lang\n})\n\n/**\n * Names the button in every state, including while its visible label is `display: none`.\n * The language is included only when it is shown, so the name always contains the visible text\n * (WCAG 2.5.3) and request and response buttons on one page get distinct names.\n */\nconst accessibleName = computed<string>(() => {\n  if (copyLabel) {\n    return copyLabel\n  }\n  return showLang && langLabel.value\n    ? `Copy ${langLabel.value} code`\n    : 'Copy code'\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <!-- The aria-label comes first so a consumer supplied aria-label attr still wins in the merge -->\n  <ScalarCopy\n    v-model:copied=\"copied\"\n    :aria-label=\"accessibleName\"\n    :content=\"contentToCopy\"\n    placement=\"left\"\n    showLabel\n    v-bind=\"{\n      ...cx(\n        copied\n          ? 'opacity-100'\n          : 'opacity-0 group-hocus-within/code-block:opacity-100',\n      ),\n    }\">\n    <template\n      v-if=\"lang\"\n      #copy>\n      <span class=\"hidden group-hocus-within/code-block:inline\">\n        <span\n          v-if=\"showLang\"\n          class=\"group-hocus/copy-button:sr-only\"\n          :class=\"{ capitalize: !isStandardLanguage(lang) }\">\n          {{ langLabel }}\n        </span>\n        <span\n          :class=\"{\n            'group-hocus/copy-button:not-sr-only sr-only': showLang,\n          }\"\n          >Copy</span\n        >\n      </span>\n    </template>\n    <template #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopy>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAqCA,MAAM,SAAS,SAAoB,SAAC,QAA4B;;EAGhE,MAAM,gBAAgB,eAAuB;GAC3C,OAAO,OAAO,QAAA,YAAY,WACtB,QAAA,UACA,KAAK,UAAU,QAAA,SAAS,MAAM,CAAC;EACrC,CAAC;;EAGD,MAAM,sBAAsB,SAC1B,QAAQ;;EAGV,MAAM,YAAY,eAAmC;GACnD,IAAI,CAAC,QAAA,MACH;GAEF,OAAO,mBAAmB,QAAA,IAAI,IAAI,gBAAgB,QAAA,QAAQ,QAAA;EAC5D,CAAC;;;;;;EAOD,MAAM,iBAAiB,eAAuB;GAC5C,IAAI,QAAA,WACF,OAAO,QAAA;GAET,OAAO,QAAA,YAAY,UAAU,QACzB,QAAQ,UAAU,MAAM,SACxB;EACN,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;uBAKvB,YAkCa,MAAA,kBAAA,GAlCb,WAkCa;IAjCH,QAAQ,OAAA;oEAAM,QAAA;IACrB,cAAY,eAAA;IACZ,SAAS,cAAA;IACV,WAAU;IACV,WAAA;WACmB,MAAA,EAAA,CAAE,CAAU,OAAA,QAAA,gBAAA,qDAAA,EAAA,CAAA,GAAA,YAAA;IAyBpB,UAAQ,cACO,CAAxB,WAAwB,KAAA,QAAA,UAAA,CAAA,CAAA;;OAlBlB,QAAA,OAAA;UACL;sBAcM,CAbP,mBAaO,QAbP,YAaO,CAXG,QAAA,YAAA,UAAA,GADR,mBAKO,QAAA;;KAHL,OAAK,eAAA,CAAC,mCAAiC,EAAA,YAAA,CAChB,mBAAmB,QAAA,IAAI,EAAA,CAAA,CAAA;uBAC3C,UAAA,KAAS,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEd,mBAKC,QAAA,EAJE,OAAK,eAAA,EAAA,+CAA+D,QAAA,SAAA,CAAA,EAAA,GAGpE,QAAI,CAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1,33 +0,0 @@
-import ScalarColorModeToggleIcon_default from "./ScalarColorModeToggleIcon.vue.js";
-import ScalarColorModeToggleButton_default from "./ScalarColorModeToggleButton.vue.js";
-import { computed, createBlock, defineComponent, isRef, openBlock, unref } from "vue";
-import { useColorMode } from "@scalar/use-hooks/useColorMode";
-var ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarColorModeToggle",
-	props: { variant: { default: "switch" } },
-	setup(__props) {
-		const { isDarkMode, toggleColorMode, darkLightMode } = useColorMode();
-		const ariaLabel = computed(() => isDarkMode.value ? "Set light mode" : "Set dark mode");
-		return (_ctx, _cache) => {
-			return __props.variant === "switch" ? (openBlock(), createBlock(ScalarColorModeToggleButton_default, {
-				key: 0,
-				modelValue: unref(isDarkMode),
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isDarkMode) ? isDarkMode.value = $event : null),
-				"aria-label": ariaLabel.value
-			}, null, 8, ["modelValue", "aria-label"])) : (openBlock(), createBlock(ScalarColorModeToggleIcon_default, {
-				key: 1,
-				"aria-label": ariaLabel.value,
-				mode: unref(darkLightMode),
-				onClick: unref(toggleColorMode)
-			}, null, 8, [
-				"aria-label",
-				"mode",
-				"onClick"
-			]));
-		};
-	}
-});
-//#endregion
-export { ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarColorModeToggle.vue.script.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarColorModeToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { computed } from 'vue'\n\nimport ScalarColorModeToggleButton from './ScalarColorModeToggleButton.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle component\n *\n * A toggle that toggles between light and dark mode\n * using the {@link useColorMode} hook.\n *\n * @example\n *   <ScalarColorModeToggle />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { variant = 'switch' } = defineProps<{\n  /**\n   * The style of the toggle.\n   * @default 'switch'\n   */\n  variant?: 'switch' | 'icon'\n}>()\n\nconst { isDarkMode, toggleColorMode, darkLightMode } = useColorMode()\n\nconst ariaLabel = computed<string>(() =>\n  isDarkMode.value ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <ScalarColorModeToggleButton\n    v-if=\"variant === 'switch'\"\n    v-model=\"isDarkMode\"\n    :aria-label=\"ariaLabel\" />\n  <ScalarColorModeToggleIcon\n    v-else\n    :aria-label=\"ariaLabel\"\n    :mode=\"darkLightMode\"\n    @click=\"toggleColorMode\" />\n</template>\n"],"mappings":";;;;;;;;EA2BA,MAAM,EAAE,YAAY,iBAAiB,kBAAkB,aAAa;EAEpE,MAAM,YAAY,eAChB,WAAW,QAAQ,mBAAmB,eACxC;;UAIU,QAAA,YAAO,YAAA,UAAA,GADf,YAG4B,qCAAA;;gBADjB,MAAA,UAAA;gGAAU,QAAA,SAAA;IAClB,cAAY,UAAA;8DACf,YAI6B,mCAAA;;IAF1B,cAAY,UAAA;IACZ,MAAM,MAAA,aAAA;IACN,SAAO,MAAA,eAAA"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js

@@ -1,32 +0,0 @@
-import ScalarColorModeToggleIcon_default from "./ScalarColorModeToggleIcon.vue.js";
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, unref, useModel } from "vue";
-//#region src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-pressed"];
-var ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarColorModeToggleButton",
-	props: {
-		"modelValue": { type: Boolean },
-		"modelModifiers": {}
-	},
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const { cx } = useBindCx();
-		/** Whether the toggle is in dark mode */
-		const model = useModel(__props, "modelValue");
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", mergeProps({
-				"aria-pressed": model.value,
-				type: "button"
-			}, unref(cx)("group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none"), { onClick: _cache[0] || (_cache[0] = ($event) => model.value = !model.value) }), [_cache[1] || (_cache[1] = createElementVNode("div", { class: "h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1" }, null, -1)), createElementVNode("div", { class: normalizeClass(["size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out", { "translate-x-[14px]": model.value }]) }, [createVNode(ScalarColorModeToggleIcon_default, {
-				is: "div",
-				mode: model.value ? "dark" : "light"
-			}, null, 8, ["mode"])], 2)], 16, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarColorModeToggleButton.vue.script.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarColorModeToggleButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAsBA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,QAAQ,SAAoB,SAAA,YAAC;;uBAGjC,mBAqBS,UArBT,WAqBS;IApBN,gBAAc,MAAA;IACf,MAAK;MACU,MAAA,EAAA,CAAE,CAAA,yFAAA,GAAA,EAKhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,CAAI,MAAA,OAAA,CAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAEjB,mBACuG,OAAA,EAArG,OAAM,6FAA4F,GAAA,MAAA,EAAA,IAEpG,mBAOM,OAAA,EANJ,OAAK,eAAA,CAAC,iNAA+M,EAAA,sBACrL,MAAA,MAAK,CAAA,CAAA,EAAA,GAAA,CAErC,YAEqC,mCAAA;IADnC,IAAG;IACF,MAAM,MAAA,QAAK,SAAA"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.script.js

@@ -1,38 +0,0 @@
-import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { computed, createBlock, createElementVNode, defineComponent, mergeProps, openBlock, resolveDynamicComponent, unref, withCtx } from "vue";
-var ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "ScalarColorModeToggleIcon",
-	props: {
-		is: { default: "button" },
-		mode: { default: "light" }
-	},
-	setup(__props) {
-		const { cx } = useBindCx();
-		const ariaLabel = computed(() => __props.mode === "dark" ? "Set light mode" : "Set dark mode");
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({
-				"aria-label": ariaLabel.value,
-				class: `toggle-icon-${__props.mode}`,
-				type: __props.is === "button" ? "button" : void 0
-			}, unref(cx)("size-3 flex items-center justify-center text-c-1")), {
-				default: withCtx(() => [..._cache[0] || (_cache[0] = [
-					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
-					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
-					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
-					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
-					createElementVNode("span", { class: "toggle-icon-ellipse" }, [createElementVNode("span", { class: "toggle-icon-moon-mask" })], -1)
-				])]),
-				_: 1
-			}, 16, [
-				"aria-label",
-				"class",
-				"type"
-			]);
-		};
-	}
-});
-//#endregion
-export { ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarColorModeToggleIcon.vue.script.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.script.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarColorModeToggleIcon.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\n\n/**\n * Scalar Color Mode Toggle Icon component\n *\n * An icon that toggles between a sun and moon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleIcon v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { is = 'button', mode = 'light' } = defineProps<{\n  /** The element or component this component should render as. */\n  is?: string | Component\n  /** Whether the toggle is a sun or moon icon */\n  mode?: 'light' | 'dark'\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst ariaLabel = computed<string>(() =>\n  mode === 'dark' ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <!-- Icon -->\n  <component\n    :is=\"is\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`toggle-icon-${mode}`\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx('size-3 flex items-center justify-center text-c-1')\">\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-ellipse\">\n      <span class=\"toggle-icon-moon-mask\" />\n    </span>\n  </component>\n</template>\n<style scoped>\n.toggle-icon-ellipse {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px currentColor;\n  overflow: hidden;\n  position: relative;\n  background: var(--scalar-background-1);\n  display: inline-block;\n  transition:\n    width 0.3s ease-in-out,\n    height 0.3s ease-in-out;\n}\n.toggle-icon-moon-mask {\n  width: 100%;\n  height: 100%;\n  border: 1px solid currentColor;\n  display: block;\n  left: 2.5px;\n  bottom: 2.5px;\n  position: absolute;\n  border-radius: 50%;\n  background: var(--scalar-background-1);\n  transition: transform 0.3s ease-in-out;\n  transform: translate3d(4px, -4px, 0);\n}\n.toggle-icon-sun-ray {\n  width: 12px;\n  height: 1px;\n  border-radius: 8px;\n  background: currentColor;\n  position: absolute;\n  transition: transform 0.3s ease-in-out;\n}\n.toggle-icon-sun-ray:nth-of-type(2) {\n  transform: rotate(90deg);\n}\n.toggle-icon-sun-ray:nth-of-type(3) {\n  transform: rotate(45deg);\n}\n.toggle-icon-sun-ray:nth-of-type(4) {\n  transform: rotate(-45deg);\n}\n.toggle-icon-dark .toggle-icon-ellipse {\n  width: 10px;\n  height: 10px;\n  mask-image: radial-gradient(\n    circle at bottom left,\n    pink 10px,\n    transparent 12px\n  );\n}\n.toggle-icon-dark .toggle-icon-sun-ray {\n  transform: scale(0);\n}\n.toggle-icon-dark .toggle-icon-moon-mask {\n  transform: translate3d(0, 0, 0);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA6BA,MAAM,EAAE,OAAO,UAAU;EAEzB,MAAM,YAAY,eAChB,QAAA,SAAS,SAAS,mBAAmB,eACvC;;uBAIE,YAaY,wBAZL,QAAA,EAAE,GADT,WAaY;IAXT,cAAY,UAAA;IACZ,OAAK,eAAiB,QAAA;IACtB,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;MAC5B,MAAA,EAAA,CAAE,CAAA,kDAAA,CAAA,GAAA;2BAC0B,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAApC,mBAAoC,QAAA,EAA9B,OAAM,sBAAqB,GAAA,MAAA,EAAA;KACjC,mBAAoC,QAAA,EAA9B,OAAM,sBAAqB,GAAA,MAAA,EAAA;KACjC,mBAAoC,QAAA,EAA9B,OAAM,sBAAqB,GAAA,MAAA,EAAA;KACjC,mBAAoC,QAAA,EAA9B,OAAM,sBAAqB,GAAA,MAAA,EAAA;KACjC,mBAEO,QAAA,EAFD,OAAM,sBAAqB,GAAA,CAC/B,mBAAsC,QAAA,EAAhC,OAAM,wBAAuB,CAAA,CAAA,GAAA,EAAA"}

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

@@ -1,109 +0,0 @@
-import ScalarComboboxOptions_default from "./ScalarComboboxOptions.vue.js";
-import ScalarComboboxPopover_default from "./ScalarComboboxPopover.vue.js";
-import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, renderSlot, useModel, withCtx } from "vue";
-var ScalarCombobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ScalarCombobox",
-	props: /*@__PURE__*/ mergeModels({
-		options: {},
-		placeholder: {},
-		inputLabel: {},
-		noResults: {},
-		filterFn: { type: Function },
-		loader: {},
-		placement: {},
-		offset: { type: [
-			Number,
-			Object,
-			Function
-		] },
-		resize: { type: Boolean },
-		target: {},
-		middleware: {},
-		teleport: { type: [Boolean, String] }
-	}, {
-		"modelValue": {},
-		"modelModifiers": {},
-		"query": { default: "" },
-		"queryModifiers": {}
-	}),
-	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue", "update:query"]),
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const model = useModel(__props, "modelValue");
-		/** The search query, bind it to search the options yourself */
-		const query = useModel(__props, "query");
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ScalarComboboxPopover_default, {
-				middleware: __props.middleware,
-				offset: __props.offset,
-				placement: __props.placement ?? "bottom-start",
-				resize: __props.resize,
-				target: __props.target,
-				teleport: __props.teleport
-			}, {
-				default: withCtx(({ open }) => [renderSlot(_ctx.$slots, "default", { open })]),
-				popover: withCtx(({ open, close }) => [createVNode(ScalarComboboxOptions_default, {
-					query: query.value,
-					"onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event),
-					close,
-					filterFn: __props.filterFn,
-					inputLabel: __props.inputLabel,
-					loader: __props.loader,
-					modelValue: model.value ? [model.value] : [],
-					noResults: __props.noResults,
-					open,
-					options: __props.options,
-					placeholder: __props.placeholder,
-					onAdd: () => (close(), emit("add")),
-					"onUpdate:modelValue": (v) => (close(), model.value = v[0])
-				}, createSlots({ _: 2 }, [
-					_ctx.$slots["search-end"] ? {
-						name: "search-end",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "search-end", normalizeProps(guardReactiveProps(props)))]),
-						key: "0"
-					} : void 0,
-					_ctx.$slots.option ? {
-						name: "option",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(props)))]),
-						key: "1"
-					} : void 0,
-					_ctx.$slots.group ? {
-						name: "group",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "group", normalizeProps(guardReactiveProps(props)))]),
-						key: "2"
-					} : void 0,
-					_ctx.$slots.add ? {
-						name: "add",
-						fn: withCtx((props) => [renderSlot(_ctx.$slots, "add", normalizeProps(guardReactiveProps(props)))]),
-						key: "3"
-					} : void 0
-				]), 1032, [
-					"query",
-					"close",
-					"filterFn",
-					"inputLabel",
-					"loader",
-					"modelValue",
-					"noResults",
-					"open",
-					"options",
-					"placeholder",
-					"onAdd",
-					"onUpdate:modelValue"
-				])]),
-				_: 3
-			}, 8, [
-				"middleware",
-				"offset",
-				"placement",
-				"resize",
-				"target",
-				"teleport"
-			]);
-		};
-	}
-});
-//#endregion
-export { ScalarCombobox_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=ScalarCombobox.vue.script.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScalarCombobox.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox component\n *\n * A searchable select input with support for filtering, option groups,\n * and custom option rendering.\n *\n * @example\n * <ScalarCombobox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarCombobox>\n */\nexport default {}\n</script>\n\n<!-- prettier-ignore-attribute generic -->\n<script\n  setup\n  lang=\"ts\"\n  generic=\"O extends Option = Option, G extends OptionGroup<O> = OptionGroup<O>\">\nimport type { ScalarFloatingOptions } from '../ScalarFloating'\nimport type { LoadingState } from '../ScalarLoading'\nimport ComboboxOptions from './ScalarComboboxOptions.vue'\nimport ComboboxPopover from './ScalarComboboxPopover.vue'\nimport type {\n  ComboboxEmits,\n  ComboboxSlots,\n  FilterFunction,\n  Option,\n  OptionGroup,\n  OptionsOrGroups,\n} from './types'\n\ndefineProps<\n  {\n    /** The options to display in the combobox */\n    options: OptionsOrGroups<O, G>\n    /** The placeholder text to display in the combobox */\n    placeholder?: string\n    /** An accessible label for the search input */\n    inputLabel?: string\n    /** The message to display when filtering returns no options */\n    noResults?: string\n    /** A function to filter the options based on a query,\n     * if not provided, the options will be filtered by option label\n     *\n     * Pass `(_, options) => options` when the caller searches the options itself (e.g. on a\n     * server) using the `query` model, so results the server already matched are shown as given.\n     *\n     * @see {@link FilterFunction} for more information\n     */\n    filterFn?: FilterFunction<O, G>\n    /**\n     * The loading state of the options, see `useLoadingState`\n     *\n     * Shows a spinner at the end of the search input while active, or an X when the state is\n     * invalidated (e.g. a failed request).\n     */\n    loader?: LoadingState\n  } & ScalarFloatingOptions\n>()\n\nconst emit = defineEmits<ComboboxEmits>()\n\nconst model = defineModel<O>()\n\n/** The search query, bind it to search the options yourself */\nconst query = defineModel<string>('query', { default: '' })\n\ndefineSlots<ComboboxSlots<O, G>>()\n</script>\n<template>\n  <ComboboxPopover\n    :middleware\n    :offset\n    :placement=\"placement ?? 'bottom-start'\"\n    :resize\n    :target\n    :teleport>\n    <template #default=\"{ open }\">\n      <slot :open />\n    </template>\n    <template #popover=\"{ open, close }\">\n      <ComboboxOptions\n        v-model:query=\"query\"\n        :close\n        :filterFn\n        :inputLabel\n        :loader\n        :modelValue=\"model ? [model] : []\"\n        :noResults\n        :open\n        :options\n        :placeholder\n        @add=\"() => (close(), emit('add'))\"\n        @update:modelValue=\"(v) => (close(), (model = v[0]))\">\n        <!-- Pass through the combobox slots -->\n        <template\n          v-if=\"$slots['search-end']\"\n          #search-end=\"props\">\n          <slot\n            name=\"search-end\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.option\"\n          #option=\"props\">\n          <slot\n            name=\"option\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.group\"\n          #group=\"props\">\n          <slot\n            name=\"group\"\n            v-bind=\"props\" />\n        </template>\n        <template\n          v-if=\"$slots.add\"\n          #add=\"props\">\n          <slot\n            name=\"add\"\n            v-bind=\"props\" />\n        </template>\n      </ComboboxOptions>\n    </template>\n  </ComboboxPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DA,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAc,SAAA,YAAC;;EAG7B,MAAM,QAAQ,SAAmB,SAAC,OAAwB;;uBAKxD,YAuDkB,+BAAA;IAtDf,YAAA,QAAA;IACA,QAAA,QAAA;IACA,WAAW,QAAA,aAAS;IACpB,QAAA,QAAA;IACA,QAAA,QAAA;IACA,UAAA,QAAA;;IACU,SAAO,SACF,EADM,WAAI,CACxB,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;IAEF,SAAO,SA2CE,EA3CE,MAAM,YAAK,CAC/B,YA0CkB,+BAAA;KAzCR,OAAO,MAAA;mEAAK,QAAA;KACnB;KACA,UAAA,QAAA;KACA,YAAA,QAAA;KACA,QAAA,QAAA;KACA,YAAY,MAAA,QAAK,CAAI,MAAA,KAAK,IAAA,CAAA;KAC1B,WAAA,QAAA;KACA;KACA,SAAA,QAAA;KACA,aAAA,QAAA;KACA,cAAY,MAAK,GAAI,KAAI,KAAA;KACzB,wBAAoB,OAAO,MAAK,GAAK,MAAA,QAAQ,EAAC;;KAGvCA,KAAAA,OAAM,gBAAA;YACX;mBAAY,UAAK,CAClB,WAEmB,KAAA,QAAA,cAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,SAAA;YACZ;mBAAQ,UAAK,CACd,WAEmB,KAAA,QAAA,UAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,QAAA;YACZ;mBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA;;;KAGTA,KAAAA,OAAO,MAAA;YACZ;mBAAK,UAAK,CACX,WAEmB,KAAA,QAAA,OAAA,eAAA,mBAAT,KAAK,CAAA,CAAA,CAAA,CAAA"}