@scalar/components 0.32.1 → 0.33.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarIconButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","ScalarIconLegacyAdapter","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar icon button component\n *\n * Should be used in conjunction with an icon from `@scalar/icons`\n *\n * @example\n * import { ScalarIconAcorn } from '@scalar/icons'\n * ...\n * <ScalarIconButton\n *   :icon=\"ScalarIconAcorn\"\n *   label=\"It's an acorn\"\n * />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useTemplateRef } from 'vue'\n\nimport { BUTTON_VARIANT_STYLES } from '../ScalarButton/constants'\nimport { ScalarIconLegacyAdapter } from '../ScalarIcon'\nimport { useTooltip } from '../ScalarTooltip'\nimport type { ScalarIconButtonProps } from './types'\n\nconst {\n  label,\n  variant = 'ghost',\n  size = 'md',\n  tooltip,\n} = defineProps<ScalarIconButtonProps>()\n\nconst variants = cva({\n  base: 'scalar-icon-button grid aspect-square cursor-pointer rounded',\n  variants: {\n    size: {\n      xxs: 'size-3.5 p-0.5',\n      xs: 'size-5 p-1',\n      sm: 'size-6 p-1',\n      md: 'size-10 p-3',\n      full: 'size-full',\n    },\n    disabled: {\n      true: 'cursor-not-allowed shadow-none',\n    },\n    // We use the same button styles for the icon buttons\n    variant: BUTTON_VARIANT_STYLES,\n  },\n  compoundVariants: [\n    {\n      size: 'md',\n      variant: 'ghost',\n      class: 'size-8 p-2 m-1 -outline-offset-2 rounded-lg',\n    },\n  ],\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst button = useTemplateRef('ref')\n\nuseTooltip({\n  content: computed(() => label),\n  offset: computed(() => (variant === 'ghost' ? 0 : 4)),\n  placement: computed(() =>\n    typeof tooltip === 'boolean' ? undefined : tooltip,\n  ),\n  targetRef: computed(() => (tooltip ? button.value : undefined)),\n})\n</script>\n<template>\n  <button\n    ref=\"ref\"\n    :aria-disabled=\"disabled\"\n    type=\"button\"\n    v-bind=\"cx(variants({ size, variant, disabled }))\">\n    <ScalarIconLegacyAdapter\n      :icon=\"icon\"\n      :thickness=\"thickness\"\n      :weight=\"weight\" />\n    <span\n      v-if=\"!tooltip\"\n      class=\"sr-only\"\n      >{{ label }}</span\n    >\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,MAAM;KACJ,KAAK;KACL,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,MAAM;IACR;IACA,UAAU,EACR,MAAM,iCACR;IAEA,SAAS;GACX;GACA,kBAAkB,CAChB;IACE,MAAM;IACN,SAAS;IACT,OAAO;GACT,CACF;EACF,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;EAEzB,MAAM,SAAS,eAAe,KAAK;EAEnC,WAAW;GACT,SAAS,eAAe,QAAA,KAAK;GAC7B,QAAQ,eAAgB,QAAA,YAAY,UAAU,IAAI,CAAE;GACpD,WAAW,eACT,OAAO,QAAA,YAAY,YAAY,KAAA,IAAY,QAAA,OAC7C;GACA,WAAW,eAAgB,QAAA,UAAU,OAAO,QAAQ,KAAA,CAAU;EAChE,CAAC;;GAGC,OAAAA,UAAA,GAAAC,mBAcS,UAdTC,WAcS;IAbP,KAAI;IACH,iBAAe,QAAA;IAChB,MAAK;GACG,GAAAC,MAAA,EAAA,CAAE,CAACA,MAAA,QAAA,CAAQ,CAAA;IAAA,MAAG,QAAA;IAAI,SAAE,QAAA;IAAO,UAAE,QAAA;GAAQ,CAAA,CAAA,CAAA,GAAA,CAC7CC,YAGqBD,MAAAE,+BAAA,GAAA;IAFlB,MAAM,QAAA;IACN,WAAW,QAAA;IACX,QAAQ,QAAA;;;;;G,IAEF,CAAA,QAAA,WADTL,UAAA,GAAAC,mBAIC,QAJD,YAICK,gBADK,QAAA,KAAK,GAAA,CAAA,K"}

package/dist/components/ScalarIconButton/index.js

@@ -1,2 +1 @@
-import ScalarIconButton_default from "./ScalarIconButton.vue.js";
-export { ScalarIconButton_default as ScalarIconButton };
+export { default as ScalarIconButton } from "./ScalarIconButton.vue.js";

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -1,4 +1,4 @@
-import ScalarListbox_vue_vue_type_script_setup_true_lang_default from "./ScalarListbox.vue.script.js";
+import ScalarListbox_vue_vue_type_script_setup_true_lang_default from "./ScalarListbox.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarListbox/ScalarListbox.vue
 var ScalarListbox_default = ScalarListbox_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarListbox.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":""}

package/dist/components/ScalarListbox/ScalarListbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
+import ScalarListboxItem_default from "./ScalarListboxItem.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Listbox, ListboxButton, ListboxLabel, ListboxOptions } from "@headlessui/vue";
+//#region src/components/ScalarListbox/ScalarListbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1 rounded-[inherit]" };
+var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarListbox",
+	props: {
+		options: {},
+		id: {},
+		label: {},
+		multiple: { type: Boolean },
+		modelValue: {},
+		placement: {},
+		offset: { type: [
+			Number,
+			Object,
+			Function
+		] },
+		resize: { type: Boolean },
+		target: {},
+		middleware: {},
+		teleport: { type: [Boolean, String] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Listbox), {
+				modelValue: __props.modelValue,
+				multiple: __props.multiple,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v))
+			}, {
+				default: withCtx(({ open }) => [__props.label ? (openBlock(), createBlock(unref(ListboxLabel), {
+					key: 0,
+					class: "sr-only"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				})) : createCommentVNode("", true), createVNode(unref(ScalarFloating_default), mergeProps(_ctx.$props, { placement: __props.placement ?? "bottom-start" }), {
+					floating: withCtx(({ width }) => [open ? (openBlock(), createElementBlock("div", mergeProps({
+						key: 0,
+						style: { width }
+					}, unref(cx)("relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border")), [createElementVNode("div", _hoisted_1, [createVNode(unref(ListboxOptions), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+							return openBlock(), createBlock(ScalarListboxItem_default, {
+								key: option.id,
+								multiselect: __props.multiple,
+								option
+							}, null, 8, ["multiselect", "option"]);
+						}), 128))]),
+						_: 1
+					})])], 16)) : createCommentVNode("", true)]),
+					default: withCtx(() => [createVNode(unref(ListboxButton), {
+						id: __props.id,
+						as: "template"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open })]),
+						_: 2
+					}, 1032, ["id"])]),
+					_: 2
+				}, 1040, ["placement"])]),
+				_: 3
+			}, 8, ["modelValue", "multiple"]);
+		};
+	}
+});
+//#endregion
+export { ScalarListbox_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarListbox.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListbox.vue_vue_type_script_setup_true_lang.js","names":["$emit","$props","_openBlock","_createBlock","_unref","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","ScalarFloating","_mergeProps","_createElementBlock","_createElementVNode","_Fragment","_renderList","ScalarListboxOption","_renderSlot"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAE,UAAA,GAAAC,YA2CUC,MAAA,OAAA,GAAA;IAzCP,YAAY,QAAA;IACZ,UAAU,QAAA;IACV,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAMJ,KAAAA,MAAK,qBAAsB,CAAC;;IACvD,SAAAK,SAIe,EARL,WAAI,CAKN,QAAA,SADRH,UAAA,GAAAC,YAIeC,MAAA,YAAA,GAAA;;KAFb,OAAM;;KACN,SAAAC,cAAW,CAARC,gBAAAC,gBAAA,QAAA,KAAK,GAAA,CAAA,C;;I,oCAEVE,YAgCiBL,MAAAM,sBAAA,GAhCjBC,WACUV,KA+BO,QA/BD,EACb,WAAW,QAAA,aAAS,e;KAMV,UAAQI,SAsBX,EAtBe,YAAK,CAGlB,QADRH,UAAA,GAAAU,mBAoBM,OApBND,WAoBM;;MAlBH,OAAK,EAAI,MAAK;K,GACMP,MAAA,EAAA,CAAE,C,+HAMvBS,mBAUM,OAVN,YAUM,CARJJ,YAOiBL,MAAA,cAAA,GAAA,EANf,OAAM,kDAAiD,GAAA;MAErD,SAAAC,cAAyB,EAD3BH,UAAA,IAAA,GAAAU,mBAIqBE,UAAA,MAAAC,WAHF,QAAA,UAAV,WAAM;OADf,OAAAb,UAAA,GAAAC,YAIqBa,2BAAA;QAFlB,KAAK,OAAO;QACZ,aAAa,QAAA;QACL;;;;;KAxBnB,SAAAX,cAIgB,CAJhBI,YAIgBL,MAAA,aAAA,GAAA;MAHb,IAAI,QAAA;MACL,IAAG;;MACH,SAAAC,cAAqB,CAArBY,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,C"}

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.js

@@ -1,4 +1,4 @@
-import ScalarListboxCheckbox_vue_vue_type_script_setup_true_lang_default from "./ScalarListboxCheckbox.vue.script.js";
+import ScalarListboxCheckbox_vue_vue_type_script_setup_true_lang_default from "./ScalarListboxCheckbox.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarListbox/ScalarListboxCheckbox.vue
 var ScalarListboxCheckbox_default = ScalarListboxCheckbox_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxCheckbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Checkbox component\n *\n * A visual checkbox indicator used within listbox and combobox items\n * to show selection state. Renders as a circle for single-select\n * or a rounded square for multi-select.\n *\n * @example\n * <ScalarListboxCheckbox :selected=\"true\" :multiselect=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCheck } from '@scalar/icons'\n\ndefineProps<{\n  selected?: boolean\n  multiselect?: boolean\n}>()\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      selected ? 'bg-c-accent text-b-1' : 'text-transparent shadow-border',\n      multiselect ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarListboxCheckbox.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Checkbox component\n *\n * A visual checkbox indicator used within listbox and combobox items\n * to show selection state. Renders as a circle for single-select\n * or a rounded square for multi-select.\n *\n * @example\n * <ScalarListboxCheckbox :selected=\"true\" :multiselect=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCheck } from '@scalar/icons'\n\ndefineProps<{\n  selected?: boolean\n  multiselect?: boolean\n}>()\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      selected ? 'bg-c-accent text-b-1' : 'shadow-border text-transparent',\n      multiselect ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListboxCheckbox.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","_unref","_createCommentVNode"],"sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Checkbox component\n *\n * A visual checkbox indicator used within listbox and combobox items\n * to show selection state. Renders as a circle for single-select\n * or a rounded square for multi-select.\n *\n * @example\n * <ScalarListboxCheckbox :selected=\"true\" :multiselect=\"false\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarIconCheck } from '@scalar/icons'\n\ndefineProps<{\n  selected?: boolean\n  multiselect?: boolean\n}>()\n</script>\n<template>\n  <div\n    class=\"flex size-4 items-center justify-center p-0.75\"\n    :class=\"[\n      selected ? 'bg-c-accent text-b-1' : 'shadow-border text-transparent',\n      multiselect ? 'rounded' : 'rounded-full',\n    ]\">\n    <ScalarIconCheck\n      v-if=\"selected\"\n      class=\"size-3\"\n      weight=\"bold\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;GAuBE,OAAAA,UAAA,GAAAC,mBAUM,OAAA,EATJ,OAAKC,eAAA,CAAC,kDAAgD,CACtC,QAAA,WAAQ,yBAAA,kCAAoE,QAAA,cAAW,YAAA,c,QAK/F,QAAA,YADRF,UAAA,GAAAG,YAGkBC,MAAA,eAAA,GAAA;;IADhB,OAAM;IACN,QAAO"}

package/dist/components/ScalarListbox/ScalarListboxInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarListboxInput_vue_vue_type_script_setup_true_lang_default from "./ScalarListboxInput.vue.script.js";
+import ScalarListboxInput_vue_vue_type_script_setup_true_lang_default from "./ScalarListboxInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarListbox/ScalarListboxInput.vue
 var ScalarListboxInput_default = ScalarListboxInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarListbox/ScalarListboxInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxInput.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Input component\n *\n * Provides a standard button for opening a listbox.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options v-slot=\"{ open }\">\n *   <ScalarListboxInput :open>{{ selected.label }}</ScalarListboxInput>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\ndefineProps<{ open?: boolean }>()\n</script>\n<template>\n  <ScalarFormInput>\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarIconCaretDown\n      class=\"transition-transform size-3.5\"\n      :class=\"{ 'rotate-180': open }\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarListboxInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarListbox/ScalarListboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Input component\n *\n * Provides a standard button for opening a listbox.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options v-slot=\"{ open }\">\n *   <ScalarListboxInput :open>{{ selected.label }}</ScalarListboxInput>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\ndefineProps<{ open?: boolean }>()\n</script>\n<template>\n  <ScalarFormInput>\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <ScalarIconCaretDown\n      class=\"size-3.5 transition-transform\"\n      :class=\"{ 'rotate-180': open }\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarListbox/ScalarListboxInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,21 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { ScalarIconCaretDown } from "@scalar/icons";
+//#region src/components/ScalarListbox/ScalarListboxInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1 truncate text-left" };
+var ScalarListboxInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarListboxInput",
+	props: { open: { type: Boolean } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), null, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createVNode(unref(ScalarIconCaretDown), { class: normalizeClass(["size-3.5 transition-transform", { "rotate-180": __props.open }]) }, null, 8, ["class"])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarListboxInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarListboxInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarListbox/ScalarListboxInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListboxInput.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","ScalarFormInput","_withCtx","_createElementVNode","_renderSlot","_createVNode","_normalizeClass"],"sources":["../../../src/components/ScalarListbox/ScalarListboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Input component\n *\n * Provides a standard button for opening a listbox.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options v-slot=\"{ open }\">\n *   <ScalarListboxInput :open>{{ selected.label }}</ScalarListboxInput>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\ndefineProps<{ open?: boolean }>()\n</script>\n<template>\n  <ScalarFormInput>\n    <div class=\"min-w-0 flex-1 truncate text-left\"><slot /></div>\n    <ScalarIconCaretDown\n      class=\"size-3.5 transition-transform\"\n      :class=\"{ 'rotate-180': open }\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;GAqBE,OAAAA,UAAA,GAAAC,YAKkBC,MAAAC,uBAAA,GAAA,MAAA;IAJhB,SAAAC,cAA6D,CAA7DC,mBAA6D,OAA7D,YAA6D,CAAdC,WAAQ,KAAA,QAAA,SAAA,C,IACvDC,YAEoCL,MAAA,mBAAA,GAAA,EADlC,OAAKM,eAAA,CAAC,iCAA+B,EAAA,cACb,QAAA,KAAI,CAAA,CAAA,E"}

package/dist/components/ScalarListbox/ScalarListboxItem.vue.js

@@ -1,4 +1,4 @@
-import ScalarListboxItem_vue_vue_type_script_setup_true_lang_default from "./ScalarListboxItem.vue.script.js";
+import ScalarListboxItem_vue_vue_type_script_setup_true_lang_default from "./ScalarListboxItem.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarListbox/ScalarListboxItem.vue
 var ScalarListboxItem_default = ScalarListboxItem_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarListbox/ScalarListboxItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxItem.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Item component\n *\n * A single option within a ScalarListbox dropdown.\n * Handles active, selected, and disabled states.\n *\n * @example\n * <ScalarListboxItem :option=\"{ id: '1', label: 'Option 1' }\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxOption } from '@headlessui/vue'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarListboxCheckbox from './ScalarListboxCheckbox.vue'\nimport type { Option } from './types'\n\ndefineProps<{\n  option: Option\n  multiselect?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'group/item',\n    'flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left',\n    // Text / background style\n    'truncate bg-transparent text-c-1',\n    // Interaction\n    'cursor-pointer hover:bg-b-2',\n  ],\n  variants: {\n    selected: { true: 'text-c-1' },\n    active: { true: 'bg-b-2' },\n    disabled: { true: 'pointer-events-none opacity-50' },\n  },\n})\n</script>\n<template>\n  <ListboxOption\n    v-slot=\"{ active, selected }\"\n    as=\"template\"\n    :disabled=\"option.disabled\"\n    :value=\"option\">\n    <li :class=\"cx(variants({ active, selected, disabled: option.disabled }))\">\n      <ScalarListboxCheckbox\n        :multiselect\n        :selected />\n      <span\n        class=\"inline-block min-w-0 flex-1 truncate\"\n        :class=\"option.color ? option.color : 'text-c-1'\">\n        {{ option.label }}\n      </span>\n    </li>\n  </ListboxOption>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarListboxItem.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Item component\n *\n * A single option within a ScalarListbox dropdown.\n * Handles active, selected, and disabled states.\n *\n * @example\n * <ScalarListboxItem :option=\"{ id: '1', label: 'Option 1' }\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxOption } from '@headlessui/vue'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarListboxCheckbox from './ScalarListboxCheckbox.vue'\nimport type { Option } from './types'\n\ndefineProps<{\n  option: Option\n  multiselect?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'group/item',\n    'flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left',\n    // Text / background style\n    'truncate bg-transparent text-c-1',\n    // Interaction\n    'cursor-pointer hover:bg-b-2',\n  ],\n  variants: {\n    selected: { true: 'text-c-1' },\n    active: { true: 'bg-b-2' },\n    disabled: { true: 'pointer-events-none opacity-50' },\n  },\n})\n</script>\n<template>\n  <ListboxOption\n    v-slot=\"{ active, selected }\"\n    as=\"template\"\n    :disabled=\"option.disabled\"\n    :value=\"option\">\n    <li :class=\"cx(variants({ active, selected, disabled: option.disabled }))\">\n      <ScalarListboxCheckbox\n        :multiselect\n        :selected />\n      <span\n        class=\"inline-block min-w-0 flex-1 truncate\"\n        :class=\"option.color ? option.color : 'text-c-1'\">\n        {{ option.label }}\n      </span>\n    </li>\n  </ListboxOption>\n</template>\n"],"mappings":""}

package/dist/components/ScalarListbox/ScalarListboxItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,47 @@
+import ScalarListboxCheckbox_default from "./ScalarListboxCheckbox.vue.js";
+import { cva, cx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ListboxOption } from "@headlessui/vue";
+var ScalarListboxItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarListboxItem",
+	props: {
+		option: {},
+		multiselect: { type: Boolean }
+	},
+	setup(__props) {
+		const variants = cva({
+			base: [
+				"group/item",
+				"flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left",
+				"truncate bg-transparent text-c-1",
+				"cursor-pointer hover:bg-b-2"
+			],
+			variants: {
+				selected: { true: "text-c-1" },
+				active: { true: "bg-b-2" },
+				disabled: { true: "pointer-events-none opacity-50" }
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ListboxOption), {
+				as: "template",
+				disabled: __props.option.disabled,
+				value: __props.option
+			}, {
+				default: withCtx(({ active, selected }) => [createElementVNode("li", { class: normalizeClass(unref(cx)(unref(variants)({
+					active,
+					selected,
+					disabled: __props.option.disabled
+				}))) }, [createVNode(ScalarListboxCheckbox_default, {
+					multiselect: __props.multiselect,
+					selected
+				}, null, 8, ["multiselect", "selected"]), createElementVNode("span", { class: normalizeClass(["inline-block min-w-0 flex-1 truncate", __props.option.color ? __props.option.color : "text-c-1"]) }, toDisplayString(__props.option.label), 3)], 2)]),
+				_: 1
+			}, 8, ["disabled", "value"]);
+		};
+	}
+});
+//#endregion
+export { ScalarListboxItem_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarListboxItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarListbox/ScalarListboxItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListboxItem.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","ScalarListboxCheckbox","_toDisplayString"],"sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox Item component\n *\n * A single option within a ScalarListbox dropdown.\n * Handles active, selected, and disabled states.\n *\n * @example\n * <ScalarListboxItem :option=\"{ id: '1', label: 'Option 1' }\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxOption } from '@headlessui/vue'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarListboxCheckbox from './ScalarListboxCheckbox.vue'\nimport type { Option } from './types'\n\ndefineProps<{\n  option: Option\n  multiselect?: boolean\n}>()\n\nconst variants = cva({\n  base: [\n    // Layout\n    'group/item',\n    'flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left',\n    // Text / background style\n    'truncate bg-transparent text-c-1',\n    // Interaction\n    'cursor-pointer hover:bg-b-2',\n  ],\n  variants: {\n    selected: { true: 'text-c-1' },\n    active: { true: 'bg-b-2' },\n    disabled: { true: 'pointer-events-none opacity-50' },\n  },\n})\n</script>\n<template>\n  <ListboxOption\n    v-slot=\"{ active, selected }\"\n    as=\"template\"\n    :disabled=\"option.disabled\"\n    :value=\"option\">\n    <li :class=\"cx(variants({ active, selected, disabled: option.disabled }))\">\n      <ScalarListboxCheckbox\n        :multiselect\n        :selected />\n      <span\n        class=\"inline-block min-w-0 flex-1 truncate\"\n        :class=\"option.color ? option.color : 'text-c-1'\">\n        {{ option.label }}\n      </span>\n    </li>\n  </ListboxOption>\n</template>\n"],"mappings":";;;;;;;;;;;EAyBA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IACA;IAEA;IAEA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,WAAW;IAC7B,QAAQ,EAAE,MAAM,SAAS;IACzB,UAAU,EAAE,MAAM,iCAAiC;GACrD;EACF,CAAC;;GAGC,OAAAA,UAAA,GAAAC,YAegBC,MAAA,aAAA,GAAA;IAbd,IAAG;IACF,UAAU,QAAA,OAAO;IACjB,OAAO,QAAA;;IACR,SAAAC,SASK,EAbK,QAAQ,eAAQ,CAI1BC,mBASK,MAAA,EATA,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAACA,MAAA,QAAA,CAAQ,CAAA;KAAG;KAAQ;KAAQ,UAAY,QAAA,OAAO;IAAQ,CAAA,CAAA,CAAA,E,IACnEI,YAEcC,+BAAA;KADX,aAAA,QAAA;KACA;I,0CACHH,mBAIO,QAAA,EAHL,OAAKC,eAAA,CAAC,wCACE,QAAA,OAAO,QAAQ,QAAA,OAAO,QAAK,UAAA,CAAA,EAChC,GAAAG,gBAAA,QAAA,OAAO,KAAK,GAAA,CAAA,C"}

package/dist/components/ScalarLoading/ScalarLoading.vue.js

@@ -1,5 +1,5 @@
-import ScalarLoading_vue_vue_type_script_setup_true_lang_default from "./ScalarLoading.vue.script.js";
-/* empty css                            */
+import ScalarLoading_vue_vue_type_script_setup_true_lang_default from "./ScalarLoading.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                  */
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 //#region src/components/ScalarLoading/ScalarLoading.vue
 var ScalarLoading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarLoading_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-27df5cd8"]]);

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarLoading.vue.js","names":[],"sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Loading Component\n *\n * Displays a loading state for the application\n *\n * @example\n * import { ScalarLoading, useLoadingState } from '@scalar/components'\n *\n * const loader = useLoadingState()\n * loader.start()\n * ...\n * <ScalarLoading :loader=\"loader\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { VariantProps } from 'cva'\n\nimport type { LoadingState } from './types'\n\ntype Variants = VariantProps<typeof variants>\n\ndefineProps<{\n  loader?: LoadingState\n  size?: Variants['size']\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst variants = cva({\n  variants: {\n    size: {\n      'xs': 'size-3',\n      'sm': 'size-3.5',\n      'md': 'size-4',\n      'lg': 'size-5',\n      'xl': 'size-6',\n      '2xl': 'size-8',\n      '3xl': 'size-10',\n      'full': 'size-full',\n    },\n  },\n  defaultVariants: {\n    size: 'full',\n  },\n})\n</script>\n<template>\n  <div\n    v-if=\"loader\"\n    v-bind=\"cx('loader-wrapper', variants({ size }))\">\n    <svg\n      class=\"svg-loader\"\n      :class=\"{\n        'icon-is-valid': loader.isValid,\n        'icon-is-invalid': loader.isInvalid,\n      }\"\n      viewBox=\"0 0 100 100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <path\n        class=\"svg-path svg-check-mark\"\n        d=\"m 0 60 l 30 30 l 70 -80\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l 40 -40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l 40 40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l -40 -40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l -40 40\" />\n      <g class=\"circular-loader\">\n        <circle\n          class=\"loader-path\"\n          :class=\"{\n            'loader-path-off': !loader.isLoading,\n          }\"\n          cx=\"50\"\n          cy=\"50\"\n          fill=\"none\"\n          r=\"20\"\n          stroke-width=\"3\" />\n      </g>\n    </svg>\n  </div>\n</template>\n<style scoped>\n.loader-wrapper {\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  --loader-size: 50%;\n}\n\n/*SVG Positioning for Loader Objects*/\n.svg-loader {\n  width: var(--loader-size);\n  height: var(--loader-size);\n  top: 1rem;\n  right: 0.9rem;\n  overflow: visible;\n\n  fill: none;\n  background-color: transparent;\n  stroke: currentColor;\n}\n\n.svg-path {\n  stroke-width: 12;\n  fill: none;\n  transition: 0.3s;\n}\n\n.svg-x-mark {\n  stroke-dasharray: 57;\n  stroke-dashoffset: 57;\n  transition-delay: 0s;\n}\n\n.svg-check-mark {\n  stroke-dasharray: 149;\n  stroke-dashoffset: 149;\n  transition-delay: 0s;\n}\n\n.icon-is-invalid .svg-x-mark {\n  stroke-dashoffset: 0;\n  transition-delay: 0.3s;\n}\n\n.icon-is-valid .svg-check-mark {\n  stroke-dashoffset: 0;\n  transition-delay: 0.3s;\n}\n\n.circular-loader {\n  animation:\n    rotate 0.7s linear infinite,\n    fade-in 0.4s;\n\n  transform-origin: center center;\n  transform: scale(3.5);\n\n  background: transparent;\n}\n\n.loader-path {\n  stroke-dasharray: 50, 200;\n  stroke-dashoffset: -100;\n  stroke-linecap: round;\n}\n\n.loader-path-off {\n  stroke-dasharray: 50, 200;\n  stroke-dashoffset: -100;\n  transition: opacity 0.3s;\n  opacity: 0;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes rotate {\n  from {\n    transform: scale(3.5) rotate(0deg);\n  }\n  to {\n    transform: scale(3.5) rotate(360deg);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarLoading.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Loading Component\n *\n * Displays a loading state for the application\n *\n * @example\n * import { ScalarLoading, useLoadingState } from '@scalar/components'\n *\n * const loader = useLoadingState()\n * loader.start()\n * ...\n * <ScalarLoading :loader=\"loader\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { VariantProps } from 'cva'\n\nimport type { LoadingState } from './types'\n\ntype Variants = VariantProps<typeof variants>\n\ndefineProps<{\n  loader?: LoadingState\n  size?: Variants['size']\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst variants = cva({\n  variants: {\n    size: {\n      'xs': 'size-3',\n      'sm': 'size-3.5',\n      'md': 'size-4',\n      'lg': 'size-5',\n      'xl': 'size-6',\n      '2xl': 'size-8',\n      '3xl': 'size-10',\n      'full': 'size-full',\n    },\n  },\n  defaultVariants: {\n    size: 'full',\n  },\n})\n</script>\n<template>\n  <div\n    v-if=\"loader\"\n    v-bind=\"cx('loader-wrapper', variants({ size }))\">\n    <svg\n      class=\"svg-loader\"\n      :class=\"{\n        'icon-is-valid': loader.isValid,\n        'icon-is-invalid': loader.isInvalid,\n      }\"\n      viewBox=\"0 0 100 100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <path\n        class=\"svg-path svg-check-mark\"\n        d=\"m 0 60 l 30 30 l 70 -80\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l 40 -40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l 40 40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l -40 -40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l -40 40\" />\n      <g class=\"circular-loader\">\n        <circle\n          class=\"loader-path\"\n          :class=\"{\n            'loader-path-off': !loader.isLoading,\n          }\"\n          cx=\"50\"\n          cy=\"50\"\n          fill=\"none\"\n          r=\"20\"\n          stroke-width=\"3\" />\n      </g>\n    </svg>\n  </div>\n</template>\n<style scoped>\n.loader-wrapper {\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  --loader-size: 50%;\n}\n\n/*SVG Positioning for Loader Objects*/\n.svg-loader {\n  width: var(--loader-size);\n  height: var(--loader-size);\n  top: 1rem;\n  right: 0.9rem;\n  overflow: visible;\n\n  fill: none;\n  background-color: transparent;\n  stroke: currentColor;\n}\n\n.svg-path {\n  stroke-width: 12;\n  fill: none;\n  transition: 0.3s;\n}\n\n.svg-x-mark {\n  stroke-dasharray: 57;\n  stroke-dashoffset: 57;\n  transition-delay: 0s;\n}\n\n.svg-check-mark {\n  stroke-dasharray: 149;\n  stroke-dashoffset: 149;\n  transition-delay: 0s;\n}\n\n.icon-is-invalid .svg-x-mark {\n  stroke-dashoffset: 0;\n  transition-delay: 0.3s;\n}\n\n.icon-is-valid .svg-check-mark {\n  stroke-dashoffset: 0;\n  transition-delay: 0.3s;\n}\n\n.circular-loader {\n  animation:\n    rotate 0.7s linear infinite,\n    fade-in 0.4s;\n\n  transform-origin: center center;\n  transform: scale(3.5);\n\n  background: transparent;\n}\n\n.loader-path {\n  stroke-dasharray: 50, 200;\n  stroke-dashoffset: -100;\n  stroke-linecap: round;\n}\n\n.loader-path-off {\n  stroke-dasharray: 50, 200;\n  stroke-dashoffset: -100;\n  transition: opacity 0.3s;\n  opacity: 0;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes rotate {\n  from {\n    transform: scale(3.5) rotate(0deg);\n  }\n  to {\n    transform: scale(3.5) rotate(360deg);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarLoading/ScalarLoading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,50 @@
+import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, unref } from "vue";
+//#region src/components/ScalarLoading/ScalarLoading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "circular-loader" };
+var ScalarLoading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarLoading",
+	props: {
+		loader: {},
+		size: {}
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		const variants = cva({
+			variants: { size: {
+				"xs": "size-3",
+				"sm": "size-3.5",
+				"md": "size-4",
+				"lg": "size-5",
+				"xl": "size-6",
+				"2xl": "size-8",
+				"3xl": "size-10",
+				"full": "size-full"
+			} },
+			defaultVariants: { size: "full" }
+		});
+		return (_ctx, _cache) => {
+			return __props.loader ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, unref(cx)("loader-wrapper", unref(variants)({ size: __props.size })))), [(openBlock(), createElementBlock("svg", {
+				class: normalizeClass(["svg-loader", {
+					"icon-is-valid": __props.loader.isValid,
+					"icon-is-invalid": __props.loader.isInvalid
+				}]),
+				viewBox: "0 0 100 100",
+				xmlns: "http://www.w3.org/2000/svg",
+				"xmlns:xlink": "http://www.w3.org/1999/xlink"
+			}, [_cache[0] || (_cache[0] = createStaticVNode("<path class=\"svg-path svg-check-mark\" d=\"m 0 60 l 30 30 l 70 -80\" data-v-27df5cd8></path><path class=\"svg-path svg-x-mark\" d=\"m 50 50 l 40 -40\" data-v-27df5cd8></path><path class=\"svg-path svg-x-mark\" d=\"m 50 50 l 40 40\" data-v-27df5cd8></path><path class=\"svg-path svg-x-mark\" d=\"m 50 50 l -40 -40\" data-v-27df5cd8></path><path class=\"svg-path svg-x-mark\" d=\"m 50 50 l -40 40\" data-v-27df5cd8></path>", 5)), createElementVNode("g", _hoisted_1, [createElementVNode("circle", {
+				class: normalizeClass(["loader-path", { "loader-path-off": !__props.loader.isLoading }]),
+				cx: "50",
+				cy: "50",
+				fill: "none",
+				r: "20",
+				"stroke-width": "3"
+			}, null, 2)])], 2))], 16)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { ScalarLoading_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarLoading.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarLoading.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_mergeProps","_unref","_normalizeClass","_createStaticVNode","_createElementVNode","_createCommentVNode"],"sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Loading Component\n *\n * Displays a loading state for the application\n *\n * @example\n * import { ScalarLoading, useLoadingState } from '@scalar/components'\n *\n * const loader = useLoadingState()\n * loader.start()\n * ...\n * <ScalarLoading :loader=\"loader\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { VariantProps } from 'cva'\n\nimport type { LoadingState } from './types'\n\ntype Variants = VariantProps<typeof variants>\n\ndefineProps<{\n  loader?: LoadingState\n  size?: Variants['size']\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst variants = cva({\n  variants: {\n    size: {\n      'xs': 'size-3',\n      'sm': 'size-3.5',\n      'md': 'size-4',\n      'lg': 'size-5',\n      'xl': 'size-6',\n      '2xl': 'size-8',\n      '3xl': 'size-10',\n      'full': 'size-full',\n    },\n  },\n  defaultVariants: {\n    size: 'full',\n  },\n})\n</script>\n<template>\n  <div\n    v-if=\"loader\"\n    v-bind=\"cx('loader-wrapper', variants({ size }))\">\n    <svg\n      class=\"svg-loader\"\n      :class=\"{\n        'icon-is-valid': loader.isValid,\n        'icon-is-invalid': loader.isInvalid,\n      }\"\n      viewBox=\"0 0 100 100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <path\n        class=\"svg-path svg-check-mark\"\n        d=\"m 0 60 l 30 30 l 70 -80\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l 40 -40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l 40 40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l -40 -40\" />\n      <path\n        class=\"svg-path svg-x-mark\"\n        d=\"m 50 50 l -40 40\" />\n      <g class=\"circular-loader\">\n        <circle\n          class=\"loader-path\"\n          :class=\"{\n            'loader-path-off': !loader.isLoading,\n          }\"\n          cx=\"50\"\n          cy=\"50\"\n          fill=\"none\"\n          r=\"20\"\n          stroke-width=\"3\" />\n      </g>\n    </svg>\n  </div>\n</template>\n<style scoped>\n.loader-wrapper {\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  --loader-size: 50%;\n}\n\n/*SVG Positioning for Loader Objects*/\n.svg-loader {\n  width: var(--loader-size);\n  height: var(--loader-size);\n  top: 1rem;\n  right: 0.9rem;\n  overflow: visible;\n\n  fill: none;\n  background-color: transparent;\n  stroke: currentColor;\n}\n\n.svg-path {\n  stroke-width: 12;\n  fill: none;\n  transition: 0.3s;\n}\n\n.svg-x-mark {\n  stroke-dasharray: 57;\n  stroke-dashoffset: 57;\n  transition-delay: 0s;\n}\n\n.svg-check-mark {\n  stroke-dasharray: 149;\n  stroke-dashoffset: 149;\n  transition-delay: 0s;\n}\n\n.icon-is-invalid .svg-x-mark {\n  stroke-dashoffset: 0;\n  transition-delay: 0.3s;\n}\n\n.icon-is-valid .svg-check-mark {\n  stroke-dashoffset: 0;\n  transition-delay: 0.3s;\n}\n\n.circular-loader {\n  animation:\n    rotate 0.7s linear infinite,\n    fade-in 0.4s;\n\n  transform-origin: center center;\n  transform: scale(3.5);\n\n  background: transparent;\n}\n\n.loader-path {\n  stroke-dasharray: 50, 200;\n  stroke-dashoffset: -100;\n  stroke-linecap: round;\n}\n\n.loader-path-off {\n  stroke-dasharray: 50, 200;\n  stroke-dashoffset: -100;\n  transition: opacity 0.3s;\n  opacity: 0;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes rotate {\n  from {\n    transform: scale(3.5) rotate(0deg);\n  }\n  to {\n    transform: scale(3.5) rotate(360deg);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EA8BA,MAAM,EAAE,OAAO,UAAU;EAEzB,MAAM,WAAW,IAAI;GACnB,UAAU,EACR,MAAM;IACJ,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,OAAO;IACP,QAAQ;GACV,EACF;GACA,iBAAiB,EACf,MAAM,OACR;EACF,CAAC;;GAIS,OAAA,QAAA,UADRA,UAAA,GAAAC,mBAwCM,OAAAC,eAAAC,WAAA,EAAA,KAAA,EAAA,GAtCIC,MAAA,EAAA,CAAE,CAAA,kBAAmBA,MAAA,QAAA,CAAQ,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,CAAA,CAAA,CAAA,GAAA,EAC5CJ,UAAA,GAAAC,mBAoCM,OAAA;IAnCJ,OAAKI,eAAA,CAAC,cAAY;KACiB,iBAAA,QAAA,OAAO;KAAoC,mBAAA,QAAA,OAAO;;IAIrF,SAAQ;IACR,OAAM;IACN,eAAY;G,8dAgBZE,mBAWI,KAXJ,YAWI,CAVFA,mBASqB,UAAA;IARnB,OAAKF,eAAA,CAAC,eAAa,EACuB,mBAAA,CAAA,QAAA,OAAO,U;IAGjD,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAE;IACF,gBAAa"}

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue.js

@@ -1,5 +1,5 @@
-import ScalarMarkdown_vue_vue_type_script_setup_true_lang_default from "./ScalarMarkdown.vue.script.js";
-/* empty css                             */
+import ScalarMarkdown_vue_vue_type_script_setup_true_lang_default from "./ScalarMarkdown.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                   */
 //#region src/components/ScalarMarkdown/ScalarMarkdown.vue
 var ScalarMarkdown_default = ScalarMarkdown_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMarkdown.vue.js","names":[],"sources":["../../../src/components/ScalarMarkdown/ScalarMarkdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Markdown component\n *\n * Renders a markdown string as styled HTML with support for\n * headings, links, code blocks, tables, alerts, and more.\n *\n * @example\n * <ScalarMarkdown value=\"# Hello World\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  type Node,\n  htmlFromMarkdown,\n  isHeading,\n  textFromNode,\n} from '@scalar/code-highlight'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useTemplateRef } from 'vue'\n\nimport type { ScalarMarkdownProps } from './types'\nimport { useMarkdownRenderHooks } from './useMarkdownRenderHooks'\n\nconst {\n  value,\n  transform,\n  transformType,\n  withImages = false,\n  withAnchors = false,\n  anchorPrefix,\n} = defineProps<ScalarMarkdownProps>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\n// Expose the element ref to the parent component\nconst templateRef = useTemplateRef('div')\ndefineExpose({ el: templateRef })\n\nconst transformHeading = (node: Node) => {\n  if (!withAnchors) {\n    return transform?.(node) || node\n  }\n\n  if (!isHeading(node)) {\n    return node\n  }\n\n  const headingText = textFromNode(node)\n\n  /** Basic slugify for the heading text */\n  const slug = headingText.toLowerCase().replace(/\\s+/g, '-')\n\n  /** Return adding anchor prefix if present or just the slug */\n  const id = anchorPrefix ? `${anchorPrefix}/description/${slug}` : slug\n\n  // Add the id to the heading\n  node.data = {\n    hProperties: {\n      id,\n    },\n  }\n\n  if (transform) {\n    return transform(node)\n  }\n\n  return node\n}\n\nconst html = computed(() => {\n  return htmlFromMarkdown(value ?? '', {\n    removeTags: withImages ? [] : ['img', 'picture'],\n    transform:\n      withAnchors && transformType === 'heading' ? transformHeading : transform,\n    transformType,\n  })\n})\nuseMarkdownRenderHooks(\n  templateRef,\n  () => value ?? '',\n  () => html.value,\n)\n</script>\n<template>\n  <div\n    ref=\"div\"\n    v-bind=\"cx('markdown', { 'line-clamp-(--markdown-clamp)': !!clamp })\"\n    :style=\"{ '--markdown-clamp': clamp }\"\n    v-html=\"html\" />\n</template>\n<style>\n@import '@scalar/code-highlight/css/code.css';\n\n.scalar-app {\n  /* Base container and variables */\n  .markdown {\n    --scalar-refs-heading-spacing: 24px;\n    --markdown-border: var(--scalar-border-width) solid\n      var(--scalar-border-color);\n    --markdown-spacing-sm: 12px;\n    --markdown-spacing-md: 16px;\n    --markdown-line-height: 1.625;\n    --markdown-heading-line-height: 1.15;\n\n    font-family: var(--scalar-font);\n    word-break: break-word;\n    line-height: var(--markdown-line-height);\n  }\n\n  .markdown > * {\n    margin-bottom: var(--markdown-spacing-md);\n  }\n\n  /* margin gets doubled between heading + non heading elements if we don't do this*/\n  .markdown > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):last-child {\n    margin-bottom: 0;\n  }\n  /* Headings */\n  .markdown h1,\n  .markdown h2,\n  .markdown h3,\n  .markdown h4,\n  .markdown h5,\n  .markdown h6 {\n    display: block;\n    font-weight: var(--scalar-bold);\n    margin-top: var(--scalar-refs-heading-spacing);\n    margin-bottom: var(--markdown-spacing-sm);\n    line-height: var(--markdown-heading-line-height, 1.15);\n    scroll-margin-top: 1rem;\n  }\n  .markdown h1 {\n    font-size: 1.5rem;\n  }\n  .markdown h2,\n  .markdown h3 {\n    font-size: 1.25rem;\n  }\n  .markdown h4,\n  .markdown h5,\n  .markdown h6 {\n    font-size: 1rem;\n  }\n\n  /* Text formatting and paragraphs */\n  .markdown b,\n  .markdown strong {\n    font-weight: var(--scalar-bold);\n  }\n\n  .markdown p {\n    color: inherit;\n    display: block;\n    line-height: var(--markdown-line-height);\n  }\n\n  /* Images */\n  .markdown img {\n    /**\n    * With `display: block` <a><img></a> will take the whole width.\n    *\n    * @see https://github.com/scalar/scalar/issues/3961\n    */\n    display: inline-block;\n    overflow: hidden;\n    border-radius: var(--scalar-radius-md);\n    max-width: 100%;\n  }\n\n  /* Lists */\n  .markdown ul,\n  .markdown ol {\n    display: flex;\n    flex-direction: column;\n    padding-left: 1.6em;\n    gap: 2px;\n    line-height: var(--markdown-line-height);\n  }\n\n  .markdown li {\n    margin-top: 2px;\n    padding-left: 7px;\n  }\n\n  ol > li::marker,\n  ol > * > li::marker {\n    font: var(--scalar-font);\n    font-variant-numeric: tabular-nums;\n    font-weight: var(--scalar-semibold);\n    white-space: nowrap;\n  }\n\n  /* Level 1, 4, 7 → decimal */\n  .markdown ol {\n    list-style-type: decimal;\n  }\n  /* Level 2, 5, 8 → lower-alpha */\n  .markdown ol ol {\n    list-style-type: lower-alpha;\n  }\n\n  .markdown ol ol ol ol,\n  .markdown ol ol ol ol ol ol ol {\n    list-style-type: decimal;\n  }\n\n  .markdown ol ol ol ol ol,\n  .markdown ol ol ol ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n\n  /* Level 3, 6, 9 → lower-roman */\n  .markdown ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  .markdown ol ol ol ol ol ol,\n  .markdown ol ol ol ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  .markdown ul > li,\n  .markdown ul > * > li {\n    list-style-type: disc;\n  }\n\n  /* Tables */\n  .markdown table {\n    display: table;\n    table-layout: fixed;\n    overflow-x: auto;\n    position: relative;\n    width: max-content;\n    max-width: 100%;\n    margin: 1em 0;\n    border: var(--scalar-border-width) solid var(--scalar-border-color);\n    border-radius: var(--scalar-radius-md);\n    border-spacing: 0;\n  }\n\n  .markdown tbody,\n  .markdown thead {\n    vertical-align: middle;\n  }\n\n  .markdown tbody {\n    display: table-row-group;\n  }\n\n  .markdown thead {\n    display: table-header-group;\n  }\n\n  .markdown tr {\n    display: table-row;\n    border-color: inherit;\n    vertical-align: inherit;\n  }\n\n  .markdown td,\n  .markdown th {\n    display: table-cell;\n    vertical-align: top;\n    min-width: 1em;\n    padding: 8.5px 16px;\n    line-height: var(--markdown-line-height);\n    position: relative;\n    /** Break long words in tables */\n    word-break: break-word;\n    font-size: var(--scalar-small);\n    color: var(--scalar-color-1);\n    border-right: var(--markdown-border);\n    border-bottom: var(--markdown-border);\n  }\n\n  .markdown td > *,\n  .markdown th > * {\n    margin-bottom: 0;\n  }\n\n  .markdown th:empty {\n    display: none;\n  }\n\n  .markdown td:first-of-type,\n  .markdown th:first-of-type {\n    border-left: none;\n  }\n\n  .markdown td:last-of-type,\n  .markdown th:last-of-type {\n    border-right: none;\n  }\n\n  .markdown tr:last-of-type td {\n    border-bottom: none;\n  }\n\n  .markdown th {\n    font-weight: var(--scalar-bold);\n    text-align: left;\n    border-left-color: transparent;\n    background: var(--scalar-background-2);\n  }\n\n  .markdown th:first-of-type {\n    border-top-left-radius: var(--scalar-radius-md);\n  }\n\n  .markdown th:last-of-type {\n    border-top-right-radius: var(--scalar-radius-md);\n  }\n\n  .markdown tr > [align='left'] {\n    text-align: left;\n  }\n\n  .markdown tr > [align='right'] {\n    text-align: right;\n  }\n\n  .markdown tr > [align='center'] {\n    text-align: center;\n  }\n\n  /* Details */\n  .markdown details {\n    border: var(--markdown-border);\n    border-radius: var(--scalar-radius-xl);\n    color: var(--scalar-color-1);\n  }\n\n  .markdown details > :not(summary) {\n    margin: var(--markdown-spacing-md);\n    margin-bottom: 0;\n  }\n\n  .markdown details > p:has(> strong):not(:has(:not(strong))) {\n    margin-bottom: 8px;\n  }\n\n  .markdown details > p:has(> strong):not(:has(:not(strong))) + * {\n    margin-top: 0;\n  }\n\n  .markdown details > table {\n    width: calc(100% - calc(var(--markdown-spacing-md) * 2));\n  }\n\n  .markdown summary {\n    border-radius: var(--scalar-radius);\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    min-height: 40px;\n    padding: 7px 14px;\n    position: relative;\n    font-weight: var(--scalar-semibold);\n    line-height: var(--markdown-line-height);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .markdown summary:hover {\n    background-color: var(--scalar-background-2);\n  }\n\n  .markdown details[open] {\n    padding-bottom: var(--markdown-spacing-md);\n  }\n\n  .markdown details[open] > summary {\n    border-bottom: var(--markdown-border);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .markdown summary::before {\n    display: block;\n    content: '';\n    flex-shrink: 0;\n    width: var(--markdown-spacing-md);\n    height: var(--markdown-spacing-md);\n    background-color: var(--scalar-color-3);\n    mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" width=\"1em\" height=\"1em\"><path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"></path></svg>');\n    margin-top: 5px;\n  }\n\n  .markdown summary:hover::before {\n    background-color: var(--scalar-color-1);\n  }\n\n  .markdown details[open] > summary::before {\n    transform: rotate(90deg);\n    transition: transform 0.1s ease-in-out;\n  }\n\n  .markdown details:has(+ details) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    margin-bottom: 0;\n  }\n\n  .markdown details:has(+ details) + details,\n  .markdown details:has(+ details) + details > summary {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  /* Links */\n  .markdown a {\n    --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n    --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n    text-decoration: var(--scalar-text-decoration);\n\n    color: var(--font-color);\n    font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n    text-underline-offset: 0.25rem;\n    text-decoration-thickness: 1px;\n    text-decoration-color: color-mix(\n      in srgb,\n      var(--font-color) 30%,\n      transparent\n    );\n  }\n\n  .markdown a:hover {\n    text-decoration-color: var(--scalar-color-1, currentColor);\n    color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n    -webkit-text-decoration: var(--scalar-text-decoration-hover);\n    text-decoration: var(--scalar-text-decoration-hover);\n  }\n\n  .markdown a:visited {\n    color: var(--font-visited);\n  }\n\n  /* Text effects and formatting */\n  .markdown em {\n    font-style: italic;\n  }\n\n  .markdown sup,\n  .markdown sub {\n    font-size: var(--scalar-micro);\n    font-weight: 450;\n  }\n\n  .markdown sup {\n    vertical-align: super;\n  }\n\n  .markdown sub {\n    vertical-align: sub;\n  }\n\n  .markdown del {\n    text-decoration: line-through;\n  }\n\n  /* Code blocks and inline code */\n  .markdown code {\n    font-family: var(--scalar-font-code);\n    background-color: var(--scalar-background-2);\n    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n    font-size: var(--scalar-micro);\n    border-radius: var(--scalar-radius-md);\n    padding: 0 3px;\n  }\n\n  .markdown .hljs {\n    font-size: var(--scalar-small);\n  }\n\n  .markdown pre code {\n    display: block;\n    white-space: pre;\n    padding: var(--markdown-spacing-sm);\n    line-height: 1.5;\n    margin: var(--markdown-spacing-sm) 0;\n    -webkit-overflow-scrolling: touch;\n    overflow-x: auto;\n    max-width: 100%;\n    min-width: 100px;\n  }\n\n  /* Horizontal rules */\n  .markdown hr {\n    border: none;\n    border-bottom: var(--markdown-border);\n  }\n\n  /* Blockquotes */\n  .markdown blockquote {\n    border-left: 2px solid var(--scalar-border-color);\n    padding-left: var(--markdown-spacing-sm);\n  }\n\n  .markdown blockquote > * {\n    margin-bottom: var(--markdown-spacing-sm);\n  }\n\n  /* Markdown Checklist */\n  .markdown li.task-list-item {\n    position: relative;\n    list-style: none;\n  }\n\n  .markdown li.task-list-item > input {\n    display: inline;\n    position: absolute;\n    top: 0.225em;\n    left: -1.4em;\n    appearance: none;\n    width: var(--markdown-spacing-md);\n    height: var(--markdown-spacing-md);\n    border: 1px solid var(--scalar-color-3);\n    border-radius: var(--scalar-radius);\n  }\n\n  .markdown li.task-list-item > input[type='checkbox']:checked {\n    background-color: var(--scalar-color-1);\n    border-color: var(--scalar-color-1);\n  }\n\n  .markdown li.task-list-item > input[type='checkbox']::before {\n    content: '';\n    position: absolute;\n    left: 5px;\n    top: 1px;\n    width: 5px;\n    height: 10px;\n    border: solid var(--scalar-background-1);\n    border-width: 0 1.5px 1.5px 0;\n    transform: rotate(45deg);\n    opacity: 0;\n  }\n\n  .markdown li.task-list-item > input[type='checkbox']:checked::before {\n    opacity: 1;\n  }\n\n  /* Markdown Alert */\n  .markdown .markdown-alert {\n    align-items: stretch;\n    border-radius: var(--scalar-radius-md);\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-background-2),\n      transparent\n    );\n    border: var(--markdown-border);\n    display: flex;\n    gap: var(--markdown-spacing-sm);\n    padding: 10px 14px;\n    position: relative;\n  }\n\n  .markdown .markdown-alert .markdown-alert-icon::before {\n    content: '';\n    display: block;\n    width: 18px;\n    height: 18px;\n    background-color: currentColor;\n    flex-shrink: 0;\n    margin-top: 3px;\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    mask-position: center;\n  }\n\n  .markdown .markdown-alert.markdown-alert-note {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-blue),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-blue), transparent 50%);\n  }\n\n  .markdown .markdown-alert.markdown-alert-tip {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-2),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-2), transparent 50%);\n  }\n\n  .markdown .markdown-alert.markdown-alert-note .markdown-alert-icon::before,\n  .markdown .markdown-alert.markdown-alert-tip .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z\"></path></svg>');\n    color: var(--scalar-color-blue);\n  }\n\n  .markdown .markdown-alert.markdown-alert-important,\n  .markdown .markdown-alert.markdown-alert-warning {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-orange),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-orange), transparent 50%);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-important\n    .markdown-alert-icon::before,\n  .markdown\n    .markdown-alert.markdown-alert-warning\n    .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z\"></path></svg>');\n  }\n\n  .markdown .markdown-alert.markdown-alert-caution {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-red),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-red), transparent 50%);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-caution\n    .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z\"></path></svg>');\n    color: var(--scalar-color-red);\n  }\n\n  .markdown .markdown-alert.markdown-alert-success {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-green),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-green), transparent 50%);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-success\n    .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\"></path></svg>');\n    color: var(--scalar-color-green);\n  }\n\n  .markdown .markdown-alert.markdown-alert-note .markdown-alert-icon::before {\n    color: var(--scalar-color-blue);\n  }\n\n  .markdown .markdown-alert.markdown-alert-tip .markdown-alert-icon::before {\n    color: var(--scalar-color-2);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-important\n    .markdown-alert-icon::before {\n    color: var(--scalar-color-purple);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-warning\n    .markdown-alert-icon::before {\n    color: var(--scalar-color-orange);\n  }\n\n  .markdown .markdown-alert .markdown-alert-content {\n    margin: 0;\n    line-height: var(--markdown-line-height);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarMarkdown.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarMarkdown/ScalarMarkdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Markdown component\n *\n * Renders a markdown string as styled HTML with support for\n * headings, links, code blocks, tables, alerts, and more.\n *\n * @example\n * <ScalarMarkdown value=\"# Hello World\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  htmlFromMarkdown,\n  isHeading,\n  textFromNode,\n  type Node,\n} from '@scalar/code-highlight'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useTemplateRef } from 'vue'\n\nimport type { ScalarMarkdownProps } from './types'\nimport { useMarkdownRenderHooks } from './useMarkdownRenderHooks'\n\nconst {\n  value,\n  transform,\n  transformType,\n  withImages = false,\n  withAnchors = false,\n  anchorPrefix,\n} = defineProps<ScalarMarkdownProps>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\n// Expose the element ref to the parent component\nconst templateRef = useTemplateRef('div')\ndefineExpose({ el: templateRef })\n\nconst transformHeading = (node: Node) => {\n  if (!withAnchors) {\n    return transform?.(node) || node\n  }\n\n  if (!isHeading(node)) {\n    return node\n  }\n\n  const headingText = textFromNode(node)\n\n  /** Basic slugify for the heading text */\n  const slug = headingText.toLowerCase().replace(/\\s+/g, '-')\n\n  /** Return adding anchor prefix if present or just the slug */\n  const id = anchorPrefix ? `${anchorPrefix}/description/${slug}` : slug\n\n  // Add the id to the heading\n  node.data = {\n    hProperties: {\n      id,\n    },\n  }\n\n  if (transform) {\n    return transform(node)\n  }\n\n  return node\n}\n\nconst html = computed(() => {\n  return htmlFromMarkdown(value ?? '', {\n    removeTags: withImages ? [] : ['img', 'picture'],\n    transform:\n      withAnchors && transformType === 'heading' ? transformHeading : transform,\n    transformType,\n  })\n})\nuseMarkdownRenderHooks(\n  templateRef,\n  () => value ?? '',\n  () => html.value,\n)\n</script>\n<template>\n  <div\n    ref=\"div\"\n    v-bind=\"cx('markdown', { 'line-clamp-(--markdown-clamp)': !!clamp })\"\n    :style=\"{ '--markdown-clamp': clamp }\"\n    v-html=\"html\" />\n</template>\n<style>\n@import '@scalar/code-highlight/css/code.css';\n\n.scalar-app {\n  /* Base container and variables */\n  .markdown {\n    --scalar-refs-heading-spacing: 24px;\n    --markdown-border: var(--scalar-border-width) solid\n      var(--scalar-border-color);\n    --markdown-spacing-sm: 12px;\n    --markdown-spacing-md: 16px;\n    --markdown-line-height: 1.625;\n    --markdown-heading-line-height: 1.15;\n\n    font-family: var(--scalar-font);\n    word-break: break-word;\n    line-height: var(--markdown-line-height);\n  }\n\n  .markdown > * {\n    margin-bottom: var(--markdown-spacing-md);\n  }\n\n  /* margin gets doubled between heading + non heading elements if we don't do this*/\n  .markdown > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):last-child {\n    margin-bottom: 0;\n  }\n  /* Headings */\n  .markdown h1,\n  .markdown h2,\n  .markdown h3,\n  .markdown h4,\n  .markdown h5,\n  .markdown h6 {\n    display: block;\n    font-weight: var(--scalar-bold);\n    margin-top: var(--scalar-refs-heading-spacing);\n    margin-bottom: var(--markdown-spacing-sm);\n    line-height: var(--markdown-heading-line-height, 1.15);\n    scroll-margin-top: 1rem;\n  }\n  .markdown h1 {\n    font-size: 1.5rem;\n  }\n  .markdown h2,\n  .markdown h3 {\n    font-size: 1.25rem;\n  }\n  .markdown h4,\n  .markdown h5,\n  .markdown h6 {\n    font-size: 1rem;\n  }\n\n  /* Text formatting and paragraphs */\n  .markdown b,\n  .markdown strong {\n    font-weight: var(--scalar-bold);\n  }\n\n  .markdown p {\n    color: inherit;\n    display: block;\n    line-height: var(--markdown-line-height);\n  }\n\n  /* Images */\n  .markdown img {\n    /**\n    * With `display: block` <a><img></a> will take the whole width.\n    *\n    * @see https://github.com/scalar/scalar/issues/3961\n    */\n    display: inline-block;\n    overflow: hidden;\n    border-radius: var(--scalar-radius-md);\n    max-width: 100%;\n  }\n\n  /* Lists */\n  .markdown ul,\n  .markdown ol {\n    display: flex;\n    flex-direction: column;\n    padding-left: 1.6em;\n    gap: 2px;\n    line-height: var(--markdown-line-height);\n  }\n\n  .markdown li {\n    margin-top: 2px;\n    padding-left: 7px;\n  }\n\n  ol > li::marker,\n  ol > * > li::marker {\n    font: var(--scalar-font);\n    font-variant-numeric: tabular-nums;\n    font-weight: var(--scalar-semibold);\n    white-space: nowrap;\n  }\n\n  /* Level 1, 4, 7 → decimal */\n  .markdown ol {\n    list-style-type: decimal;\n  }\n  /* Level 2, 5, 8 → lower-alpha */\n  .markdown ol ol {\n    list-style-type: lower-alpha;\n  }\n\n  .markdown ol ol ol ol,\n  .markdown ol ol ol ol ol ol ol {\n    list-style-type: decimal;\n  }\n\n  .markdown ol ol ol ol ol,\n  .markdown ol ol ol ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n\n  /* Level 3, 6, 9 → lower-roman */\n  .markdown ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  .markdown ol ol ol ol ol ol,\n  .markdown ol ol ol ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  .markdown ul > li,\n  .markdown ul > * > li {\n    list-style-type: disc;\n  }\n\n  /* Tables */\n  .markdown table {\n    display: table;\n    table-layout: fixed;\n    overflow-x: auto;\n    position: relative;\n    width: max-content;\n    max-width: 100%;\n    margin: 1em 0;\n    border: var(--scalar-border-width) solid var(--scalar-border-color);\n    border-radius: var(--scalar-radius-md);\n    border-spacing: 0;\n  }\n\n  .markdown tbody,\n  .markdown thead {\n    vertical-align: middle;\n  }\n\n  .markdown tbody {\n    display: table-row-group;\n  }\n\n  .markdown thead {\n    display: table-header-group;\n  }\n\n  .markdown tr {\n    display: table-row;\n    border-color: inherit;\n    vertical-align: inherit;\n  }\n\n  .markdown td,\n  .markdown th {\n    display: table-cell;\n    vertical-align: top;\n    min-width: 1em;\n    padding: 8.5px 16px;\n    line-height: var(--markdown-line-height);\n    position: relative;\n    /** Break long words in tables */\n    word-break: break-word;\n    font-size: var(--scalar-small);\n    color: var(--scalar-color-1);\n    border-right: var(--markdown-border);\n    border-bottom: var(--markdown-border);\n  }\n\n  .markdown td > *,\n  .markdown th > * {\n    margin-bottom: 0;\n  }\n\n  .markdown th:empty {\n    display: none;\n  }\n\n  .markdown td:first-of-type,\n  .markdown th:first-of-type {\n    border-left: none;\n  }\n\n  .markdown td:last-of-type,\n  .markdown th:last-of-type {\n    border-right: none;\n  }\n\n  .markdown tr:last-of-type td {\n    border-bottom: none;\n  }\n\n  .markdown th {\n    font-weight: var(--scalar-bold);\n    text-align: left;\n    border-left-color: transparent;\n    background: var(--scalar-background-2);\n  }\n\n  .markdown th:first-of-type {\n    border-top-left-radius: var(--scalar-radius-md);\n  }\n\n  .markdown th:last-of-type {\n    border-top-right-radius: var(--scalar-radius-md);\n  }\n\n  .markdown tr > [align='left'] {\n    text-align: left;\n  }\n\n  .markdown tr > [align='right'] {\n    text-align: right;\n  }\n\n  .markdown tr > [align='center'] {\n    text-align: center;\n  }\n\n  /* Details */\n  .markdown details {\n    border: var(--markdown-border);\n    border-radius: var(--scalar-radius-xl);\n    color: var(--scalar-color-1);\n  }\n\n  .markdown details > :not(summary) {\n    margin: var(--markdown-spacing-md);\n    margin-bottom: 0;\n  }\n\n  .markdown details > p:has(> strong):not(:has(:not(strong))) {\n    margin-bottom: 8px;\n  }\n\n  .markdown details > p:has(> strong):not(:has(:not(strong))) + * {\n    margin-top: 0;\n  }\n\n  .markdown details > table {\n    width: calc(100% - calc(var(--markdown-spacing-md) * 2));\n  }\n\n  .markdown summary {\n    border-radius: var(--scalar-radius);\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    min-height: 40px;\n    padding: 7px 14px;\n    position: relative;\n    font-weight: var(--scalar-semibold);\n    line-height: var(--markdown-line-height);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .markdown summary:hover {\n    background-color: var(--scalar-background-2);\n  }\n\n  .markdown details[open] {\n    padding-bottom: var(--markdown-spacing-md);\n  }\n\n  .markdown details[open] > summary {\n    border-bottom: var(--markdown-border);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .markdown summary::before {\n    display: block;\n    content: '';\n    flex-shrink: 0;\n    width: var(--markdown-spacing-md);\n    height: var(--markdown-spacing-md);\n    background-color: var(--scalar-color-3);\n    mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" width=\"1em\" height=\"1em\"><path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"></path></svg>');\n    margin-top: 5px;\n  }\n\n  .markdown summary:hover::before {\n    background-color: var(--scalar-color-1);\n  }\n\n  .markdown details[open] > summary::before {\n    transform: rotate(90deg);\n    transition: transform 0.1s ease-in-out;\n  }\n\n  .markdown details:has(+ details) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    margin-bottom: 0;\n  }\n\n  .markdown details:has(+ details) + details,\n  .markdown details:has(+ details) + details > summary {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  /* Links */\n  .markdown a {\n    --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n    --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n    text-decoration: var(--scalar-text-decoration);\n\n    color: var(--font-color);\n    font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n    text-underline-offset: 0.25rem;\n    text-decoration-thickness: 1px;\n    text-decoration-color: color-mix(\n      in srgb,\n      var(--font-color) 30%,\n      transparent\n    );\n  }\n\n  .markdown a:hover {\n    text-decoration-color: var(--scalar-color-1, currentColor);\n    color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n    -webkit-text-decoration: var(--scalar-text-decoration-hover);\n    text-decoration: var(--scalar-text-decoration-hover);\n  }\n\n  .markdown a:visited {\n    color: var(--font-visited);\n  }\n\n  /* Text effects and formatting */\n  .markdown em {\n    font-style: italic;\n  }\n\n  .markdown sup,\n  .markdown sub {\n    font-size: var(--scalar-micro);\n    font-weight: 450;\n  }\n\n  .markdown sup {\n    vertical-align: super;\n  }\n\n  .markdown sub {\n    vertical-align: sub;\n  }\n\n  .markdown del {\n    text-decoration: line-through;\n  }\n\n  /* Code blocks and inline code */\n  .markdown code {\n    font-family: var(--scalar-font-code);\n    background-color: var(--scalar-background-2);\n    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n    font-size: var(--scalar-micro);\n    border-radius: var(--scalar-radius-md);\n    padding: 0 3px;\n  }\n\n  .markdown .hljs {\n    font-size: var(--scalar-small);\n  }\n\n  .markdown pre code {\n    display: block;\n    white-space: pre;\n    padding: var(--markdown-spacing-sm);\n    line-height: 1.5;\n    margin: var(--markdown-spacing-sm) 0;\n    -webkit-overflow-scrolling: touch;\n    overflow-x: auto;\n    max-width: 100%;\n    min-width: 100px;\n  }\n\n  /* Horizontal rules */\n  .markdown hr {\n    border: none;\n    border-bottom: var(--markdown-border);\n  }\n\n  /* Blockquotes */\n  .markdown blockquote {\n    border-left: 2px solid var(--scalar-border-color);\n    padding-left: var(--markdown-spacing-sm);\n  }\n\n  .markdown blockquote > * {\n    margin-bottom: var(--markdown-spacing-sm);\n  }\n\n  /* Markdown Checklist */\n  .markdown li.task-list-item {\n    position: relative;\n    list-style: none;\n  }\n\n  .markdown li.task-list-item > input {\n    display: inline;\n    position: absolute;\n    top: 0.225em;\n    left: -1.4em;\n    appearance: none;\n    width: var(--markdown-spacing-md);\n    height: var(--markdown-spacing-md);\n    border: 1px solid var(--scalar-color-3);\n    border-radius: var(--scalar-radius);\n  }\n\n  .markdown li.task-list-item > input[type='checkbox']:checked {\n    background-color: var(--scalar-color-1);\n    border-color: var(--scalar-color-1);\n  }\n\n  .markdown li.task-list-item > input[type='checkbox']::before {\n    content: '';\n    position: absolute;\n    left: 5px;\n    top: 1px;\n    width: 5px;\n    height: 10px;\n    border: solid var(--scalar-background-1);\n    border-width: 0 1.5px 1.5px 0;\n    transform: rotate(45deg);\n    opacity: 0;\n  }\n\n  .markdown li.task-list-item > input[type='checkbox']:checked::before {\n    opacity: 1;\n  }\n\n  /* Markdown Alert */\n  .markdown .markdown-alert {\n    align-items: stretch;\n    border-radius: var(--scalar-radius-md);\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-background-2),\n      transparent\n    );\n    border: var(--markdown-border);\n    display: flex;\n    gap: var(--markdown-spacing-sm);\n    padding: 10px 14px;\n    position: relative;\n  }\n\n  .markdown .markdown-alert .markdown-alert-icon::before {\n    content: '';\n    display: block;\n    width: 18px;\n    height: 18px;\n    background-color: currentColor;\n    flex-shrink: 0;\n    margin-top: 3px;\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    mask-position: center;\n  }\n\n  .markdown .markdown-alert.markdown-alert-note {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-blue),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-blue), transparent 50%);\n  }\n\n  .markdown .markdown-alert.markdown-alert-tip {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-2),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-2), transparent 50%);\n  }\n\n  .markdown .markdown-alert.markdown-alert-note .markdown-alert-icon::before,\n  .markdown .markdown-alert.markdown-alert-tip .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z\"></path></svg>');\n    color: var(--scalar-color-blue);\n  }\n\n  .markdown .markdown-alert.markdown-alert-important,\n  .markdown .markdown-alert.markdown-alert-warning {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-orange),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-orange), transparent 50%);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-important\n    .markdown-alert-icon::before,\n  .markdown\n    .markdown-alert.markdown-alert-warning\n    .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z\"></path></svg>');\n  }\n\n  .markdown .markdown-alert.markdown-alert-caution {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-red),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-red), transparent 50%);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-caution\n    .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z\"></path></svg>');\n    color: var(--scalar-color-red);\n  }\n\n  .markdown .markdown-alert.markdown-alert-success {\n    background-color: color-mix(\n      in srgb,\n      var(--scalar-color-green),\n      transparent 97%\n    );\n    border: var(--scalar-border-width) solid\n      color-mix(in srgb, var(--scalar-color-green), transparent 50%);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-success\n    .markdown-alert-icon::before {\n    mask-image: url('data:image/svg+xml,<svg data-v-852d534d=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\" class=\"icon-placeholder\"><path d=\"M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\"></path></svg>');\n    color: var(--scalar-color-green);\n  }\n\n  .markdown .markdown-alert.markdown-alert-note .markdown-alert-icon::before {\n    color: var(--scalar-color-blue);\n  }\n\n  .markdown .markdown-alert.markdown-alert-tip .markdown-alert-icon::before {\n    color: var(--scalar-color-2);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-important\n    .markdown-alert-icon::before {\n    color: var(--scalar-color-purple);\n  }\n\n  .markdown\n    .markdown-alert.markdown-alert-warning\n    .markdown-alert-icon::before {\n    color: var(--scalar-color-orange);\n  }\n\n  .markdown .markdown-alert .markdown-alert-content {\n    margin: 0;\n    line-height: var(--markdown-line-height);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { useMarkdownRenderHooks } from "./useMarkdownRenderHooks.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, unref, useTemplateRef } from "vue";
+import { htmlFromMarkdown, isHeading, textFromNode } from "@scalar/code-highlight";
+//#region src/components/ScalarMarkdown/ScalarMarkdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var ScalarMarkdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarMarkdown",
+	props: {
+		value: {},
+		withImages: {
+			type: Boolean,
+			default: false
+		},
+		withAnchors: {
+			type: Boolean,
+			default: false
+		},
+		transform: { type: Function },
+		transformType: {},
+		clamp: {},
+		anchorPrefix: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const { cx } = useBindCx();
+		const templateRef = useTemplateRef("div");
+		__expose({ el: templateRef });
+		const transformHeading = (node) => {
+			if (!__props.withAnchors) return __props.transform?.(node) || node;
+			if (!isHeading(node)) return node;
+			/** Basic slugify for the heading text */
+			const slug = textFromNode(node).toLowerCase().replace(/\s+/g, "-");
+			node.data = { hProperties: { id: __props.anchorPrefix ? `${__props.anchorPrefix}/description/${slug}` : slug } };
+			if (__props.transform) return __props.transform(node);
+			return node;
+		};
+		const html = computed(() => {
+			return htmlFromMarkdown(__props.value ?? "", {
+				removeTags: __props.withImages ? [] : ["img", "picture"],
+				transform: __props.withAnchors && __props.transformType === "heading" ? transformHeading : __props.transform,
+				transformType: __props.transformType
+			});
+		});
+		useMarkdownRenderHooks(templateRef, () => __props.value ?? "", () => html.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ ref: "div" }, unref(cx)("markdown", { "line-clamp-(--markdown-clamp)": !!__props.clamp }), {
+				style: { "--markdown-clamp": __props.clamp },
+				innerHTML: html.value
+			}), null, 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ScalarMarkdown_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarMarkdown.vue_vue_type_script_setup_true_lang.js.map