@scalar/components 0.21.1 → 0.21.3

package/dist/components/ScalarForm/ScalarFormError.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"names":[],"mappings":"AAgDA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAE9C,KAAK,WAAW,GAAG;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAC7B,CAAC;AA+DF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarFormError.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"names":[],"mappings":"AA2DA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAG9C;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;IAH5B,+BAA+B;cACrB,OAAO,GAAG,SAAS;IAC7B,+BAA+B;WACxB,SAAS,GAAG,SAAS;;cAkEhB,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarForm/ScalarFormError.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFormError.vue.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarForm/ScalarFormError.vue.script.js

@@ -1,7 +1,6 @@
 import { cva, useBindCx } from "@scalar/use-hooks/useBindCx";
 import { computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref } from "vue";
 import { ScalarIconWarning, ScalarIconWarningCircle } from "@scalar/icons";
-//#region src/components/ScalarForm/ScalarFormError.vue?vue&type=script&setup=true&lang.ts
 var ScalarFormError_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarFormError",

package/dist/components/ScalarForm/ScalarFormError.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormError.vue.script.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAYA,MAAM,SAAS,eAAe;AAC5B,OAAI,QAAA,KACF,QAAO,QAAA;AAET,UAAO,QAAA,YAAY,UAAU,0BAA0B;IACxD;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,SAAS;IACP,OAAO;IACP,SAAS;IACV,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAQM,OARN,WAQM,EAPJ,MAAK,SAAO,EACJ,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,SAAG,QAAA,SAAO,CAAA,CAAA,CAAA,EAAA,EAAA,WAAA,EAC7B,YAGkB,wBAFX,OAAA,MAAM,EAAA;IACX,OAAM;IACN,QAAO;QACT,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarFormError.vue.script.js","names":[],"sources":["../../../src/components/ScalarForm/ScalarFormError.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Form Error component\n *\n * Displays an error or warning message with an icon.\n *\n * @example\n * <ScalarFormError variant=\"error\">Something went wrong</ScalarFormError>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconWarning, ScalarIconWarningCircle } from '@scalar/icons'\nimport { cva, useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\nconst { variant = 'error', icon } = defineProps<{\n  /** The variant of the error */\n  variant?: 'error' | 'warning'\n  /** Whether to show the icon */\n  icon?: Component | undefined\n}>()\n\nconst iconIs = computed(() => {\n  if (icon) {\n    return icon\n  }\n  return variant === 'error' ? ScalarIconWarningCircle : ScalarIconWarning\n})\n\nconst variants = cva({\n  base: 'flex items-baseline gap-1.5 rounded border p-2',\n  variants: {\n    variant: {\n      error: 'border-c-danger bg-b-danger text-c-danger',\n      warning: 'border-c-alert bg-b-alert text-c-alert',\n    },\n  },\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"alert\"\n    v-bind=\"cx(variants({ variant }))\">\n    <component\n      :is=\"iconIs\"\n      class=\"relative top-0.5 shrink-0\"\n      weight=\"bold\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAuBA,MAAM,SAAS,eAAe;AAC5B,OAAI,QAAA,KACF,QAAO,QAAA;AAET,UAAO,QAAA,YAAY,UAAU,0BAA0B;IACxD;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,SAAS;IACP,OAAO;IACP,SAAS;IACV,EACF;GACF,CAAA;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAQM,OARN,WAQM,EAPJ,MAAK,SAAO,EACJ,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA,EAAA,SAAG,QAAA,SAAO,CAAA,CAAA,CAAA,EAAA,EAAA,WAAA,EAC7B,YAGkB,wBAFX,OAAA,MAAM,EAAA;IACX,OAAM;IACN,QAAO;QACT,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarHotkey/ScalarHotkey.vue.d.ts

@@ -1,9 +1,19 @@
 import type { HotKeyModifier } from './types';
-type __VLS_Props = {
-    hotkey: string;
-    modifier?: HotKeyModifier[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/**
+ * Scalar Hotkey component
+ *
+ * Displays a keyboard shortcut as styled key caps.
+ *
+ * @example
+ * <ScalarHotkey hotkey="k" :modifier="['Meta']" />
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    hotkey: string;
+    modifier?: HotKeyModifier[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    hotkey: string;
+    modifier?: HotKeyModifier[];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=ScalarHotkey.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkey.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC5B,CAAC;AAyDF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarHotkey.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,MAAM;eACH,cAAc,EAAE;;YADnB,MAAM;eACH,cAAc,EAAE;iGA6DzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkey.vue.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHotkey.vue.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Hotkey component\n *\n * Displays a keyboard shortcut as styled key caps.\n *\n * @example\n * <ScalarHotkey hotkey=\"k\" :modifier=\"['Meta']\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkey.vue.script.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,MAAM,EAAE,OAAO,WAAU;EAGzB,MAAM,cAAc,eAAe,oBAAoB,QAAA,QAAQ,QAAA,SAAS,CAAA;;uBAGtE,mBAkBM,OAAA,eAAA,mBAjBW,MAAA,GAAE,CAAA,8IAAA,CAAA,CAAA,EAAA,EAAA,UAAA,KAAA,EAKjB,mBAWM,UAAA,MAAA,WAVgB,YAAA,QAAZ,MAAM,MAAC;wBADjB,mBAWM,OAAA,EATH,KAAK,GAAC,EAAA,CACP,mBAIO,QAJP,YAIO,gBADF,KAAI,EAAA,EAAA,EAET,mBAEO,QAFP,YAEO,gBADF,MAAA,YAAW,CAAC,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarHotkey.vue.script.js","names":[],"sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Hotkey component\n *\n * Displays a keyboard shortcut as styled key caps.\n *\n * @example\n * <ScalarHotkey hotkey=\"k\" :modifier=\"['Meta']\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { formatHotkeySymbols, getKeyLabel } from './formatHotkey'\nimport type { HotKeyModifier } from './types'\n\nconst { modifier = ['Meta'], hotkey } = defineProps<{\n  hotkey: string\n  modifier?: HotKeyModifier[]\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n\nconst hotkeyChars = computed(() => formatHotkeySymbols(hotkey, modifier))\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none',\n      )\n    \">\n    <div\n      v-for=\"(char, i) in hotkeyChars\"\n      :key=\"i\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        {{ char }}\n      </span>\n      <span class=\"sr-only\">\n        {{ getKeyLabel(char) }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;EAGzB,MAAM,cAAc,eAAe,oBAAoB,QAAA,QAAQ,QAAA,SAAS,CAAA;;uBAGtE,mBAkBM,OAAA,eAAA,mBAjBW,MAAA,GAAE,CAAA,8IAAA,CAAA,CAAA,EAAA,EAAA,UAAA,KAAA,EAKjB,mBAWM,UAAA,MAAA,WAVgB,YAAA,QAAZ,MAAM,MAAC;wBADjB,mBAWM,OAAA,EATH,KAAK,GAAC,EAAA,CACP,mBAIO,QAJP,YAIO,gBADF,KAAI,EAAA,EAAA,EAET,mBAEO,QAFP,YAEO,gBADF,MAAA,YAAW,CAAC,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/ScalarIcon/IconList.vue.d.ts

@@ -1,7 +1,18 @@
-type __VLS_Props = {
-    thickness?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/**
+ * Icon List component
+ *
+ * Displays all available icons in a grid for browsing and selection.
+ * Clicking an icon copies its name to the clipboard.
+ * Used internally in Storybook for icon discovery.
+ *
+ * @example
+ * <IconList />
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    thickness?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    thickness?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=IconList.vue.d.ts.map

package/dist/components/ScalarIcon/IconList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/IconList.vue"],"names":[],"mappings":"AAoDA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAyHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"IconList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/IconList.vue"],"names":[],"mappings":"AAkEA;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;gBAEJ,MAAM;;gBAAN,MAAM;iGA6HhB,CAAC"}

package/dist/components/ScalarListbox/ScalarListbox.vue.d.ts

@@ -1,44 +1,57 @@
 import { type ScalarFloatingOptions } from '../ScalarFloating';
 import type { Option } from './types';
-type SingleSelectListboxProps = {
-    multiple?: false | undefined;
-    modelValue?: Option | undefined;
-};
-type MultipleSelectListboxProps = {
-    multiple: true;
-    modelValue?: Option[] | undefined;
-};
-type __VLS_Slots = {
-    /** The reference element for the listbox */
-    default(props: {
-        /** Whether or not the listbox is open */
-        open: boolean;
-    }): unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<({
+/**
+ * Scalar Listbox component
+ *
+ * A dropdown select component built on HeadlessUI Listbox.
+ * Supports single and multiple selection modes.
+ *
+ * @example
+ * <ScalarListbox v-model="selected" :options="options">
+ *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>
+ * </ScalarListbox>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<({
     options: Option[];
     id?: string;
     label?: string;
-} & SingleSelectListboxProps & ScalarFloatingOptions) | ({
+} & {
+    multiple?: false | undefined;
+    modelValue?: Option | undefined;
+} & ScalarFloatingOptions) | ({
     options: Option[];
     id?: string;
     label?: string;
-} & MultipleSelectListboxProps & ScalarFloatingOptions), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+} & {
+    multiple: true;
+    modelValue?: Option[] | undefined;
+} & ScalarFloatingOptions), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (v: Option) => any;
 }, string, import("vue").PublicProps, Readonly<({
     options: Option[];
     id?: string;
     label?: string;
-} & SingleSelectListboxProps & ScalarFloatingOptions) | ({
+} & {
+    multiple?: false | undefined;
+    modelValue?: Option | undefined;
+} & ScalarFloatingOptions) | ({
     options: Option[];
     id?: string;
     label?: string;
-} & MultipleSelectListboxProps & ScalarFloatingOptions)> & Readonly<{
+} & {
+    multiple: true;
+    modelValue?: Option[] | undefined;
+} & ScalarFloatingOptions)> & Readonly<{
     "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /** The reference element for the listbox */
+    default(props: {
+        /** Whether or not the listbox is open */
+        open: boolean;
+    }): unknown;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AA6GA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAiBD,KAAK,WAAW,GAAG;IACjB,4CAA4C;IAC5C,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO,CAAA;CACZ,CAAC;AAqLF,QAAA,MAAM,UAAU;aAzMH,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFA0MhB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AA4HA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAGrC;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAYL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;aAItB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;IAmBjC,4CAA4C;mBAC7B;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;EA2LT,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<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 {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} 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 text-sm',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1\">\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          <ScalarFloatingBackdrop />\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":""}
+{"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 {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} 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 text-sm',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1\">\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          <ScalarFloatingBackdrop />\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.script.js","names":["$emit","$props"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<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 {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} 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 text-sm',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1\">\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          <ScalarFloatingBackdrop />\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YA4CU,MAAA,QAAA,EAAA;IA1CP,YAAY,QAAA;IACZ,UAAU,QAAA;IACV,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAMA,KAAAA,MAAK,qBAAsB,EAAC;;sBAKxC,EARL,WAAI,CAKN,QAAA,SAAA,WAAA,EADR,YAIe,MAAA,aAAA,EAAA;;KAFb,OAAM;;4BACK,CAAA,gBAAA,gBAAR,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;wCAEV,YAiCiB,MAAA,uBAAA,EAjCjB,WACUC,KAgCO,QAhCD,EACb,WAAW,QAAA,aAAS,gBAAA,CAAA,EAAA;KAMV,UAAQ,SAuBX,EAvBe,YAAK,CAGlB,QAAA,WAAA,EADR,mBAqBM,OArBN,WAqBM;;MAnBH,OAAK,EAAI,OAAK;QACM,MAAA,GAAE,CAAA,qEAAA,CAAA,EAAA,CAMvB,mBAUM,OAVN,YAUM,CARJ,YAOiB,MAAA,eAAA,EAAA,EANf,OAAM,mDAAiD,EAAA;6BAE5B,EAAA,UAAA,KAAA,EAD3B,mBAIqB,UAAA,MAAA,WAHF,QAAA,UAAV,WAAM;2BADf,YAIqB,2BAAA;QAFlB,KAAK,OAAO;QACZ,aAAa,QAAA;QACL;;;;WAGf,YAA0B,MAAA,+BAAA,CAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA;4BAvBd,CAJhB,YAIgB,MAAA,cAAA,EAAA;MAHb,IAAI,QAAA;MACL,IAAG;;6BACkB,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarListbox.vue.script.js","names":["$emit","$props"],"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 {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} 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 text-sm',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1\">\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          <ScalarFloatingBackdrop />\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgEA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YA4CU,MAAA,QAAA,EAAA;IA1CP,YAAY,QAAA;IACZ,UAAU,QAAA;IACV,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAMA,KAAAA,MAAK,qBAAsB,EAAC;;sBAKxC,EARL,WAAI,CAKN,QAAA,SAAA,WAAA,EADR,YAIe,MAAA,aAAA,EAAA;;KAFb,OAAM;;4BACK,CAAA,gBAAA,gBAAR,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;wCAEV,YAiCiB,MAAA,uBAAA,EAjCjB,WACUC,KAgCO,QAhCD,EACb,WAAW,QAAA,aAAS,gBAAA,CAAA,EAAA;KAMV,UAAQ,SAuBX,EAvBe,YAAK,CAGlB,QAAA,WAAA,EADR,mBAqBM,OArBN,WAqBM;;MAnBH,OAAK,EAAI,OAAK;QACM,MAAA,GAAE,CAAA,qEAAA,CAAA,EAAA,CAMvB,mBAUM,OAVN,YAUM,CARJ,YAOiB,MAAA,eAAA,EAAA,EANf,OAAM,mDAAiD,EAAA;6BAE5B,EAAA,UAAA,KAAA,EAD3B,mBAIqB,UAAA,MAAA,WAHF,QAAA,UAAV,WAAM;2BADf,YAIqB,2BAAA;QAFlB,KAAK,OAAO;QACZ,aAAa,QAAA;QACL;;;;WAGf,YAA0B,MAAA,+BAAA,CAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA;4BAvBd,CAJhB,YAIgB,MAAA,cAAA,EAAA;MAHb,IAAI,QAAA;MACL,IAAG;;6BACkB,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA"}

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.d.ts

@@ -1,8 +1,20 @@
-type __VLS_Props = {
-    selected?: boolean;
-    multiselect?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/**
+ * Scalar Listbox Checkbox component
+ *
+ * A visual checkbox indicator used within listbox and combobox items
+ * to show selection state. Renders as a circle for single-select
+ * or a rounded square for multi-select.
+ *
+ * @example
+ * <ScalarListboxCheckbox :selected="true" :multiselect="false" />
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    selected?: boolean;
+    multiselect?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    selected?: boolean;
+    multiselect?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=ScalarListboxCheckbox.vue.d.ts.map

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"names":[],"mappings":"AA0BA,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAmDF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarListboxCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"names":[],"mappings":"AAyCA;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;kBACJ,OAAO;;eADV,OAAO;kBACJ,OAAO;iGAuDnB,CAAC"}

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 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":[],"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":""}

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

@@ -1,6 +1,5 @@
 import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
 import { ScalarIconCheck } from "@scalar/icons";
-//#region src/components/ScalarListbox/ScalarListboxCheckbox.vue?vue&type=script&setup=true&lang.ts
 var ScalarListboxCheckbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ScalarListboxCheckbox",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxCheckbox.vue.script.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"sourcesContent":["<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":";;;;;;;;;;;uBASE,mBAUM,OAAA,EATJ,OAAK,eAAA,CAAC,kDAAgD,CACtC,QAAA,WAAQ,yBAAA,kCAAoE,QAAA,cAAW,YAAA,eAAA,CAAA,CAAA,EAAA,EAAA,CAK/F,QAAA,YAAA,WAAA,EADR,YAGkB,MAAA,gBAAA,EAAA;;IADhB,OAAM;IACN,QAAO"}
+{"version":3,"file":"ScalarListboxCheckbox.vue.script.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":";;;;;;;;;;uBAuBE,mBAUM,OAAA,EATJ,OAAK,eAAA,CAAC,kDAAgD,CACtC,QAAA,WAAQ,yBAAA,kCAAoE,QAAA,cAAW,YAAA,eAAA,CAAA,CAAA,EAAA,EAAA,CAK/F,QAAA,YAAA,WAAA,EADR,YAGkB,MAAA,gBAAA,EAAA;;IADhB,OAAM;IACN,QAAO"}

package/dist/components/ScalarListbox/ScalarListboxItem.vue.d.ts

@@ -1,9 +1,20 @@
 import type { Option } from './types';
-type __VLS_Props = {
-    option: Option;
-    multiselect?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/**
+ * Scalar Listbox Item component
+ *
+ * A single option within a ScalarListbox dropdown.
+ * Handles active, selected, and disabled states.
+ *
+ * @example
+ * <ScalarListboxItem :option="{ id: '1', label: 'Option 1' }" />
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    option: Option;
+    multiselect?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    option: Option;
+    multiselect?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=ScalarListboxItem.vue.d.ts.map

package/dist/components/ScalarListbox/ScalarListboxItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAwFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarListboxItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAGrC;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,MAAM;kBACA,OAAO;;YADb,MAAM;kBACA,OAAO;iGA4FnB,CAAC"}

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

@@ -2,7 +2,6 @@ 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";
-//#region src/components/ScalarListbox/ScalarListboxItem.vue?vue&type=script&setup=true&lang.ts
 var ScalarListboxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ScalarListboxItem",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListboxItem.vue.script.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"sourcesContent":["<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 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":";;;;;;;;;;;;EAYA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IACA;IAEA;IAEA;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,YAAY;IAC9B,QAAQ,EAAE,MAAM,UAAU;IAC1B,UAAU,EAAE,MAAM,kCAAkC;IACrD;GACF,CAAA;;uBAGC,YAegB,MAAA,cAAA,EAAA;IAbd,IAAG;IACF,UAAU,QAAA,OAAO;IACjB,OAAO,QAAA;;sBAUH,EAbK,QAAQ,eAAQ,CAI1B,mBASK,MAAA,EATA,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAG;KAAQ;KAAQ,UAAY,QAAA,OAAO;KAAQ,CAAA,CAAA,CAAA,EAAA,EAAA,CACnE,YAEc,+BAAA;KADX,aAAA,QAAA;KACA;8CACH,mBAIO,QAAA,EAHL,OAAK,eAAA,CAAC,wCACE,QAAA,OAAO,QAAQ,QAAA,OAAO,QAAK,WAAA,CAAA,EAAA,EAAA,gBAChC,QAAA,OAAO,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarListboxItem.vue.script.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 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;IACD;GACD,UAAU;IACR,UAAU,EAAE,MAAM,YAAY;IAC9B,QAAQ,EAAE,MAAM,UAAU;IAC1B,UAAU,EAAE,MAAM,kCAAkC;IACrD;GACF,CAAA;;uBAGC,YAegB,MAAA,cAAA,EAAA;IAbd,IAAG;IACF,UAAU,QAAA,OAAO;IACjB,OAAO,QAAA;;sBAUH,EAbK,QAAQ,eAAQ,CAI1B,mBASK,MAAA,EATA,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAG;KAAQ;KAAQ,UAAY,QAAA,OAAO;KAAQ,CAAA,CAAA,CAAA,EAAA,EAAA,CACnE,YAEc,+BAAA;KADX,aAAA,QAAA;KACA;8CACH,mBAIO,QAAA,EAHL,OAAK,eAAA,CAAC,wCACE,QAAA,OAAO,QAAQ,QAAA,OAAO,QAAK,WAAA,CAAA,EAAA,EAAA,gBAChC,QAAA,OAAO,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue.d.ts

@@ -1,7 +1,16 @@
 import type { ScalarMarkdownProps } from './types';
+/**
+ * Scalar Markdown component
+ *
+ * Renders a markdown string as styled HTML with support for
+ * headings, links, code blocks, tables, alerts, and more.
+ *
+ * @example
+ * <ScalarMarkdown value="# Hello World" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ScalarMarkdownProps, {
     el: Readonly<import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarMarkdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
 //# sourceMappingURL=ScalarMarkdown.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMarkdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdown.vue"],"names":[],"mappings":"AAmqBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AA2FlD,QAAA,MAAM,YAAY;;4PAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ScalarMarkdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdown.vue"],"names":[],"mappings":"AAgrBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;4PA8Fd,CAAC"}

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 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'\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})\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);\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);\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);\n  }\n\n  .markdown th:last-of-type {\n    border-top-right-radius: var(--scalar-radius);\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: 2.5px;\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: 2px;\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);\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":[],"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'\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})\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);\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);\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);\n  }\n\n  .markdown th:last-of-type {\n    border-top-right-radius: var(--scalar-radius);\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: 2.5px;\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: 2px;\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);\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":""}