@scalar/components 0.32.1 → 0.33.0

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxRadioGroup.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","ScalarFormInputGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ScalarCheckboxInput","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Radio Group component\n *\n * A group of radio inputs allowing for single selection.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption>()\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.value === option.value\"\n      :name\n      type=\"radio\"\n      :value=\"option.value\"\n      @update:modelValue=\"(checked) => (model = checked ? option : undefined)\">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAmBA,MAAM,QAAQA,SAAiC,SAAA,YAAC;EAEhD,MAAM,OAAO,MAAM;;GAGjB,OAAAC,UAAA,GAAAC,YAWuBC,MAAAC,4BAAA,GAAA,MAAA;IATnB,SAAAC,cAAyB,EAD3BJ,UAAA,IAAA,GAAAK,mBASsBC,UAAA,MAAAC,WARH,QAAA,UAAV,WAAM;KADf,OAAAP,UAAA,GAAAC,YASsBO,6BAAA;MAPnB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,UAAU,OAAO;MACpC,MAAAN,MAAA,IAAA;MACD,MAAK;MACJ,OAAO,OAAO;MACd,wBAAoB,YAAa,MAAA,QAAQ,UAAU,SAAS,KAAA;;MAC7D,SAAAE,cAAkB,CAAfK,gBAAAC,gBAAA,OAAO,KAAK,GAAA,CAAA,C"}

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

@@ -2,7 +2,7 @@ import type { StandardLanguageKey } from './types';
 /**
  * Scalar Code Block component
  *
- * Renders syntax-highlighted code using highlight.js.
+ * Renders syntax-highlighted code using @scalar/highlight.
  * Supports line numbers, credential masking, and an optional copy button.
  *
  * @example

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AAuMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;;cApC1B,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;kGAiMlC,CAAC"}
+{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AA2NA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAsBlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;;cApC1B,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;kGAgMlC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlock.vue.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using highlight.js.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 p-0 border-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarCodeBlock.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { languages, registerLanguage } from '@scalar/highlight/all'\n\n/**\n * Registers every bundled grammar, once per module rather than once per block.\n *\n * `@scalar/highlight/all` already registers them when it is evaluated, so a\n * bare `import '@scalar/highlight/all'` reads like enough. It is not: that is a\n * side-effect-only import of an external package, and the library build drops\n * it from the emitted module. Storybook hid this because it compiles from\n * source, while the API reference consumes `dist` and lost highlighting\n * entirely — every block fell back to escaped, unscoped text.\n *\n * Registering from a named import keeps a binding the bundler can see used, so\n * the module survives. It lives in this block rather than in `<script setup>`\n * because setup runs for every instance, and a page of API reference renders\n * hundreds of code blocks.\n */\nregisterLanguage(...languages)\n\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using @scalar/highlight.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { syntaxHighlight } from '@scalar/highlight/compat'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses @scalar/highlight for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll min-h-0 min-w-0 flex-1 overflow-x-auto rounded-[inherit] p-2 -outline-offset-2\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 w-fit border-0 bg-transparent p-0 text-nowrap whitespace-pre\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 right-1 m-0 -translate-y-1/2'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? 'group-hocus-within/code-block:-left-0.5 -inset-y-0.75 -right-1 left-3'\n              : '-top-1 -right-1.5',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,112 @@
+import ScalarCopyBackdrop_default from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
+import ScalarCodeBlockCopy_default from "./ScalarCodeBlockCopy.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, unref, useId, withCtx } from "vue";
+import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
+import { syntaxHighlight } from "@scalar/highlight/compat";
+import { languages, registerLanguage } from "@scalar/highlight/all";
+//#region src/components/ScalarCodeBlock/ScalarCodeBlock.vue?vue&type=script&setup=true&lang.ts
+/**
+* Uses @scalar/highlight for syntax highlighting
+*
+* Requires at least one of content or prettyPrintedContent
+*/
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["id", "innerHTML"];
+/**
+* Registers every bundled grammar, once per module rather than once per block.
+*
+* `@scalar/highlight/all` already registers them when it is evaluated, so a
+* bare `import '@scalar/highlight/all'` reads like enough. It is not: that is a
+* side-effect-only import of an external package, and the library build drops
+* it from the emitted module. Storybook hid this because it compiles from
+* source, while the API reference consumes `dist` and lost highlighting
+* entirely — every block fell back to escaped, unscoped text.
+*
+* Registering from a named import keeps a binding the bundler can see used, so
+* the module survives. It lives in this block rather than in `<script setup>`
+* because setup runs for every instance, and a page of API reference renders
+* hundreds of code blocks.
+*/
+registerLanguage(...languages);
+var ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCodeBlock",
+	props: {
+		content: {},
+		prettyPrintedContent: {},
+		lang: { default: "plaintext" },
+		lineNumbers: {
+			type: Boolean,
+			default: false
+		},
+		hideCredentials: {},
+		copy: {
+			type: [String, Boolean],
+			default: "hover"
+		},
+		label: { default: "Code sample" },
+		copyLabel: {}
+	},
+	setup(__props) {
+		/** Base id for the code block */
+		const id = useId();
+		/** Formatted the content into an indented json string */
+		const prettyContent = computed(() => __props.prettyPrintedContent || prettyPrintJson(__props.content ?? ""));
+		const highlightedCode = computed(() => {
+			return syntaxHighlight(prettyContent.value, {
+				lang: __props.lang.trim(),
+				lineNumbers: __props.lineNumbers,
+				maskCredentials: __props.hideCredentials
+			}).slice(5, -6);
+		});
+		/** Determine if the content is a single line */
+		const isOneLine = computed(() => !prettyContent.value.includes("\n"));
+		const isContentValid = computed(() => {
+			return prettyContent.value !== null && prettyContent.value !== "null" && prettyContent.value !== "404 Not Found";
+		});
+		/** Whether the copy button is rendered on top of the code */
+		const showCopy = computed(() => __props.copy && isContentValid.value);
+		/**
+		* A one-liner has the copy button floating over the end of the line, so the line needs room to
+		* scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about
+		* whether trailing padding on an `overflow-x` container is scrollable.
+		*/
+		const reserveCopySpace = computed(() => isOneLine.value && showCopy.value);
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-code-block group/code-block flex flex-col", "relative bg-b-1 min-h-0 min-w-0 focus-visible:outline"))), [createElementVNode("div", {
+				"aria-label": __props.label,
+				class: "custom-scroll min-h-0 min-w-0 flex-1 overflow-x-auto rounded-[inherit] p-2 -outline-offset-2",
+				role: "group",
+				tabindex: "0"
+			}, [createElementVNode("pre", {
+				id: unref(id),
+				class: normalizeClass(["m-0 w-fit border-0 bg-transparent p-0 text-nowrap whitespace-pre", { "pr-6": reserveCopySpace.value }]),
+				innerHTML: highlightedCode.value
+			}, null, 10, _hoisted_2)], 8, _hoisted_1), showCopy.value ? (openBlock(), createBlock(unref(ScalarCodeBlockCopy_default), {
+				key: 0,
+				"aria-controls": unref(id),
+				class: normalizeClass(["scalar-code-copy absolute", [isOneLine.value ? "top-1/2 right-1 m-0 -translate-y-1/2" : "top-2.5 right-2.5", { "opacity-100": __props.copy === "always" }]]),
+				content: prettyContent.value,
+				copyLabel: __props.copyLabel,
+				lang: __props.lang,
+				showLang: !isOneLine.value
+			}, {
+				backdrop: withCtx(() => [createVNode(ScalarCopyBackdrop_default, { class: normalizeClass(["scalar-code-copy-backdrop", [isOneLine.value ? "group-hocus-within/code-block:-left-0.5 -inset-y-0.75 -right-1 left-3" : "-top-1 -right-1.5"]]) }, null, 8, ["class"])]),
+				_: 1
+			}, 8, [
+				"aria-controls",
+				"class",
+				"content",
+				"copyLabel",
+				"lang",
+				"showLang"
+			])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCodeBlock.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCodeBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_normalizeClass","_createBlock","ScalarCodeBlockCopy","_withCtx","_createVNode","ScalarCopyBackdrop","_createCommentVNode"],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { languages, registerLanguage } from '@scalar/highlight/all'\n\n/**\n * Registers every bundled grammar, once per module rather than once per block.\n *\n * `@scalar/highlight/all` already registers them when it is evaluated, so a\n * bare `import '@scalar/highlight/all'` reads like enough. It is not: that is a\n * side-effect-only import of an external package, and the library build drops\n * it from the emitted module. Storybook hid this because it compiles from\n * source, while the API reference consumes `dist` and lost highlighting\n * entirely — every block fell back to escaped, unscoped text.\n *\n * Registering from a named import keeps a binding the bundler can see used, so\n * the module survives. It lives in this block rather than in `<script setup>`\n * because setup runs for every instance, and a page of API reference renders\n * hundreds of code blocks.\n */\nregisterLanguage(...languages)\n\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using @scalar/highlight.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { syntaxHighlight } from '@scalar/highlight/compat'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses @scalar/highlight for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll min-h-0 min-w-0 flex-1 overflow-x-auto rounded-[inherit] p-2 -outline-offset-2\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 w-fit border-0 bg-transparent p-0 text-nowrap whitespace-pre\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 right-1 m-0 -translate-y-1/2'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? 'group-hocus-within/code-block:-left-0.5 -inset-y-0.75 -right-1 left-3'\n              : '-top-1 -right-1.5',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,iBAAiB,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;EA6E7B,MAAM,KAAK,MAAM;;EAGjB,MAAM,gBAAgB,eACd,QAAA,wBAAwB,gBAAgB,QAAA,WAAW,EAAE,CAC7D;EAEA,MAAM,kBAAkB,eAAe;GAQrC,OAPa,gBAAgB,cAAc,OAAO;IAChD,MAAM,QAAA,KAAK,KAAK;IAChB,aAAa,QAAA;IACb,iBAAiB,QAAA;GACnB,CAGO,CAAA,CAAK,MAAM,GAAG,EAAE;EACzB,CAAC;;EAGD,MAAM,YAAY,eAAe,CAAC,cAAc,MAAM,SAAS,IAAI,CAAC;EAEpE,MAAM,iBAAiB,eAAe;GACpC,OACE,cAAc,UAAU,QACxB,cAAc,UAAU,UACxB,cAAc,UAAU;EAE5B,CAAC;;EAGD,MAAM,WAAW,eAAe,QAAA,QAAQ,eAAe,KAAK;;;;;;EAO5D,MAAM,mBAAmB,eAAe,UAAU,SAAS,SAAS,KAAK;EAGzE,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBA+CM,OAAAC,eAAAC,mBA9CWC,MAAA,EAAA,CAAE,C,iHAWjBC,mBAUM,OAAA;IATH,cAAY,QAAA;IACb,OAAM;IACN,MAAK;IACL,UAAS;G,IACTA,mBAI6B,OAAA;IAH1B,IAAID,MAAA,EAAA;IACL,OAAKE,eAAA,CAAC,oEAAkE,EAAA,QACtD,iBAAA,MAAgB,CAAA,CAAA;IAClC,WAAQ,gBAAA;G,2CAGJ,SAAA,SADRN,UAAA,GAAAO,YAuBsBH,MAAAI,2BAAA,GAAA;;IArBnB,iBAAeJ,MAAA,EAAA;IAChB,OAAKE,eAAA,CAAC,6BAA2B,CACf,UAAA,Q,8DAAuH,EAAA,eAAA,QAAA,SAAI,SAAA,C;IAM5I,SAAS,cAAA;IACT,WAAW,QAAA;IACX,MAAM,QAAA;IACN,UAAQ,CAAG,UAAA;;IACD,UAAQG,cAOV,CANPC,YAMOC,4BAAA,EALL,OAAKL,eAAA,CAAC,6BAA2B,CACX,UAAA,Q"}

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlockCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"names":[],"mappings":"AA0HA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yCAAyC;eAC9B,OAAO;IAClB,mCAAmC;aAC1B,MAAM,GAAG,MAAM;IACxB,iCAAiC;WAC1B,mBAAmB,GAAG,MAAM;IACnC;;;;;;OAMG;gBACS,MAAM;;aAgDT,OAAO;;;;IA7DhB,yCAAyC;eAC9B,OAAO;IAClB,mCAAmC;aAC1B,MAAM,GAAG,MAAM;IACxB,iCAAiC;WAC1B,mBAAmB,GAAG,MAAM;IACnC;;;;;;OAMG;gBACS,MAAM;;aAgDT,OAAO;;;;eAyGH,CAAC,KAAK,IAAiB,KAAK,GAAG;EAU1C,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarCodeBlockCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yCAAyC;eAC9B,OAAO;IAClB,mCAAmC;aAC1B,MAAM,GAAG,MAAM;IACxB,iCAAiC;WAC1B,mBAAmB,GAAG,MAAM;IACnC;;;;;;OAMG;gBACS,MAAM;;aAgDT,OAAO;;;;IA7DhB,yCAAyC;eAC9B,OAAO;IAClB,mCAAmC;aAC1B,MAAM,GAAG,MAAM;IACxB,iCAAiC;WAC1B,mBAAmB,GAAG,MAAM;IACnC;;;;;;OAMG;gBACS,MAAM;;aAgDT,OAAO;;;;eAyGH,CAAC,KAAK,IAAiB,KAAK,GAAG;EAU1C,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/ScalarCodeBlock/ScalarCodeBlockCopy.vue.js

@@ -1,4 +1,4 @@
-import ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default from "./ScalarCodeBlockCopy.vue.script.js";
+import ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default from "./ScalarCodeBlockCopy.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue
 var ScalarCodeBlockCopy_default = ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlockCopy.vue.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block Copy button\n *\n * Displays a copy-to-clipboard button with an optional language label.\n * Used internally by ScalarCodeBlock.\n *\n * @example\n * <ScalarCodeBlockCopy content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarCopy } from '@/components/ScalarCopy'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { LANGUAGE_LABELS } from './constants'\nimport type { StandardLanguageKey } from './types'\n\nconst { content, lang, showLang, copyLabel } = defineProps<{\n  /** Whether to show the language label */\n  showLang?: boolean\n  /** Content to copy to clipboard */\n  content: string | object\n  /** Language of the code block */\n  lang?: StandardLanguageKey | string\n  /**\n   * Accessible name for the copy button.\n   *\n   * The visible label is hidden until the code block is hovered, so without an explicit name\n   * screen readers announce an empty button (found by an accessibility audit). Defaults to\n   * \"Copy <language> code\" so the name contains every word the button can show.\n   */\n  copyLabel?: string\n}>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\n/** Handles the copy button click */\nconst contentToCopy = computed<string>(() => {\n  return typeof content === 'string'\n    ? content\n    : JSON.stringify(content, null, 2)\n})\n\n/** Type guard to check if the language is a standard language */\nconst isStandardLanguage = (lang: string): lang is StandardLanguageKey =>\n  lang in LANGUAGE_LABELS\n\n/** The human readable language name shown next to the copy label */\nconst langLabel = computed<string | undefined>(() => {\n  if (!lang) {\n    return undefined\n  }\n  return isStandardLanguage(lang) ? LANGUAGE_LABELS[lang] : lang\n})\n\n/**\n * Names the button in every state, including while its visible label is `display: none`.\n * The language is included only when it is shown, so the name always contains the visible text\n * (WCAG 2.5.3) and request and response buttons on one page get distinct names.\n */\nconst accessibleName = computed<string>(() => {\n  if (copyLabel) {\n    return copyLabel\n  }\n  return showLang && langLabel.value\n    ? `Copy ${langLabel.value} code`\n    : 'Copy code'\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <!-- The aria-label comes first so a consumer supplied aria-label attr still wins in the merge -->\n  <ScalarCopy\n    v-model:copied=\"copied\"\n    :aria-label=\"accessibleName\"\n    :content=\"contentToCopy\"\n    placement=\"left\"\n    showLabel\n    v-bind=\"{\n      ...cx(\n        copied\n          ? 'opacity-100'\n          : 'opacity-0 group-hocus-within/code-block:opacity-100',\n      ),\n    }\">\n    <template\n      v-if=\"lang\"\n      #copy>\n      <span class=\"hidden group-hocus-within/code-block:inline\">\n        <span\n          v-if=\"showLang\"\n          class=\"group-hocus/copy-button:sr-only\"\n          :class=\"{ capitalize: !isStandardLanguage(lang) }\">\n          {{ langLabel }}\n        </span>\n        <span\n          :class=\"{\n            'group-hocus/copy-button:not-sr-only sr-only': showLang,\n          }\"\n          >Copy</span\n        >\n      </span>\n    </template>\n    <template #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopy>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCodeBlockCopy.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block Copy button\n *\n * Displays a copy-to-clipboard button with an optional language label.\n * Used internally by ScalarCodeBlock.\n *\n * @example\n * <ScalarCodeBlockCopy content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { ScalarCopy } from '@/components/ScalarCopy'\n\nimport { LANGUAGE_LABELS } from './constants'\nimport type { StandardLanguageKey } from './types'\n\nconst { content, lang, showLang, copyLabel } = defineProps<{\n  /** Whether to show the language label */\n  showLang?: boolean\n  /** Content to copy to clipboard */\n  content: string | object\n  /** Language of the code block */\n  lang?: StandardLanguageKey | string\n  /**\n   * Accessible name for the copy button.\n   *\n   * The visible label is hidden until the code block is hovered, so without an explicit name\n   * screen readers announce an empty button (found by an accessibility audit). Defaults to\n   * \"Copy <language> code\" so the name contains every word the button can show.\n   */\n  copyLabel?: string\n}>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\n/** Handles the copy button click */\nconst contentToCopy = computed<string>(() => {\n  return typeof content === 'string'\n    ? content\n    : JSON.stringify(content, null, 2)\n})\n\n/** Type guard to check if the language is a standard language */\nconst isStandardLanguage = (lang: string): lang is StandardLanguageKey =>\n  lang in LANGUAGE_LABELS\n\n/** The human readable language name shown next to the copy label */\nconst langLabel = computed<string | undefined>(() => {\n  if (!lang) {\n    return undefined\n  }\n  return isStandardLanguage(lang) ? LANGUAGE_LABELS[lang] : lang\n})\n\n/**\n * Names the button in every state, including while its visible label is `display: none`.\n * The language is included only when it is shown, so the name always contains the visible text\n * (WCAG 2.5.3) and request and response buttons on one page get distinct names.\n */\nconst accessibleName = computed<string>(() => {\n  if (copyLabel) {\n    return copyLabel\n  }\n  return showLang && langLabel.value\n    ? `Copy ${langLabel.value} code`\n    : 'Copy code'\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <!-- The aria-label comes first so a consumer supplied aria-label attr still wins in the merge -->\n  <ScalarCopy\n    v-model:copied=\"copied\"\n    :aria-label=\"accessibleName\"\n    :content=\"contentToCopy\"\n    placement=\"left\"\n    showLabel\n    v-bind=\"{\n      ...cx(\n        copied\n          ? 'opacity-100'\n          : 'opacity-0 group-hocus-within/code-block:opacity-100',\n      ),\n    }\">\n    <template\n      v-if=\"lang\"\n      #copy>\n      <span class=\"group-hocus-within/code-block:inline hidden\">\n        <span\n          v-if=\"showLang\"\n          class=\"group-hocus/copy-button:sr-only\"\n          :class=\"{ capitalize: !isStandardLanguage(lang) }\">\n          {{ langLabel }}\n        </span>\n        <span\n          :class=\"{\n            'group-hocus/copy-button:not-sr-only sr-only': showLang,\n          }\"\n          >Copy</span\n        >\n      </span>\n    </template>\n    <template #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopy>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue_vue_type_script_setup_true_lang.js.map

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

package/dist/components/ScalarCodeBlock/types.d.ts

@@ -1,4 +1,4 @@
-import type { standardLanguages } from '@scalar/code-highlight';
-/** A standard language key supported by the code-highlight library */
+import type { standardLanguages } from '@scalar/highlight/compat';
+/** A standard language key supported by the highlighter */
 export type StandardLanguageKey = keyof typeof standardLanguages;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarCodeBlock/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,sEAAsE;AACtE,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,iBAAiB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,2DAA2D;AAC3D,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,iBAAiB,CAAA"}

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

@@ -1,4 +1,4 @@
-import ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggle.vue.script.js";
+import ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggle.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue
 var ScalarColorModeToggle_default = ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggle.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { computed } from 'vue'\n\nimport ScalarColorModeToggleButton from './ScalarColorModeToggleButton.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle component\n *\n * A toggle that toggles between light and dark mode\n * using the {@link useColorMode} hook.\n *\n * @example\n *   <ScalarColorModeToggle />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { variant = 'switch' } = defineProps<{\n  /**\n   * The style of the toggle.\n   * @default 'switch'\n   */\n  variant?: 'switch' | 'icon'\n}>()\n\nconst { isDarkMode, toggleColorMode, darkLightMode } = useColorMode()\n\nconst ariaLabel = computed<string>(() =>\n  isDarkMode.value ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <ScalarColorModeToggleButton\n    v-if=\"variant === 'switch'\"\n    v-model=\"isDarkMode\"\n    :aria-label=\"ariaLabel\" />\n  <ScalarColorModeToggleIcon\n    v-else\n    :aria-label=\"ariaLabel\"\n    :mode=\"darkLightMode\"\n    @click=\"toggleColorMode\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarColorModeToggle.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { computed } from 'vue'\n\nimport ScalarColorModeToggleButton from './ScalarColorModeToggleButton.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle component\n *\n * A toggle that toggles between light and dark mode\n * using the {@link useColorMode} hook.\n *\n * @example\n *   <ScalarColorModeToggle />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { variant = 'switch' } = defineProps<{\n  /**\n   * The style of the toggle.\n   * @default 'switch'\n   */\n  variant?: 'switch' | 'icon'\n}>()\n\nconst { isDarkMode, toggleColorMode, darkLightMode } = useColorMode()\n\nconst ariaLabel = computed<string>(() =>\n  isDarkMode.value ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <ScalarColorModeToggleButton\n    v-if=\"variant === 'switch'\"\n    v-model=\"isDarkMode\"\n    :aria-label=\"ariaLabel\" />\n  <ScalarColorModeToggleIcon\n    v-else\n    :aria-label=\"ariaLabel\"\n    :mode=\"darkLightMode\"\n    @click=\"toggleColorMode\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue_vue_type_script_setup_true_lang.js

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

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

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

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

@@ -1,4 +1,4 @@
-import ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggleButton.vue.script.js";
+import ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggleButton.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue
 var ScalarColorModeToggleButton_default = ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"bg-border mx-px h-3 w-full rounded-xl -outline-offset-1 group-focus-visible/toggle:outline\" />\n    <!-- Slider -->\n    <div\n      class=\"left-border bg-b-1 dark:bg-b-1.5 absolute flex size-[23px] items-center justify-center rounded-full border -outline-offset-1 transition-transform duration-300 ease-in-out group-focus-visible/toggle:outline\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue_vue_type_script_setup_true_lang.js.map

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

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"names":[],"mappings":"AAqHA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,KAAK,CAAA;AAK9C;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;IAHvB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;iGA6FrB,CAAC"}
+{"version":3,"file":"ScalarColorModeToggleIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"names":[],"mappings":"AAqHA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAK9C;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;IAHvB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;iGA6FrB,CAAC"}

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

@@ -1,8 +1,8 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggleIcon.vue.script.js";
-/* empty css                                        */
+import ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggleIcon.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                              */
 //#region src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue
-var ScalarColorModeToggleIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-60be8692"]]);
+var ScalarColorModeToggleIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8f507267"]]);
 //#endregion
 export { ScalarColorModeToggleIcon_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleIcon.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\n\n/**\n * Scalar Color Mode Toggle Icon component\n *\n * An icon that toggles between a sun and moon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleIcon v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { is = 'button', mode = 'light' } = defineProps<{\n  /** The element or component this component should render as. */\n  is?: string | Component\n  /** Whether the toggle is a sun or moon icon */\n  mode?: 'light' | 'dark'\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst ariaLabel = computed<string>(() =>\n  mode === 'dark' ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <!-- Icon -->\n  <component\n    :is=\"is\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`toggle-icon-${mode}`\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx('size-3 flex items-center justify-center text-c-1')\">\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-ellipse\">\n      <span class=\"toggle-icon-moon-mask\" />\n    </span>\n  </component>\n</template>\n<style scoped>\n.toggle-icon-ellipse {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px currentColor;\n  overflow: hidden;\n  position: relative;\n  background: var(--scalar-background-1);\n  display: inline-block;\n  transition:\n    width 0.3s ease-in-out,\n    height 0.3s ease-in-out;\n}\n.toggle-icon-moon-mask {\n  width: 100%;\n  height: 100%;\n  border: 1px solid currentColor;\n  display: block;\n  left: 2.5px;\n  bottom: 2.5px;\n  position: absolute;\n  border-radius: 50%;\n  background: var(--scalar-background-1);\n  transition: transform 0.3s ease-in-out;\n  transform: translate3d(4px, -4px, 0);\n}\n.toggle-icon-sun-ray {\n  width: 12px;\n  height: 1px;\n  border-radius: 8px;\n  background: currentColor;\n  position: absolute;\n  transition: transform 0.3s ease-in-out;\n}\n.toggle-icon-sun-ray:nth-of-type(2) {\n  transform: rotate(90deg);\n}\n.toggle-icon-sun-ray:nth-of-type(3) {\n  transform: rotate(45deg);\n}\n.toggle-icon-sun-ray:nth-of-type(4) {\n  transform: rotate(-45deg);\n}\n.toggle-icon-dark .toggle-icon-ellipse {\n  width: 10px;\n  height: 10px;\n  mask-image: radial-gradient(\n    circle at bottom left,\n    pink 10px,\n    transparent 12px\n  );\n}\n.toggle-icon-dark .toggle-icon-sun-ray {\n  transform: scale(0);\n}\n.toggle-icon-dark .toggle-icon-moon-mask {\n  transform: translate3d(0, 0, 0);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarColorModeToggleIcon.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, type Component } from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\n\n/**\n * Scalar Color Mode Toggle Icon component\n *\n * An icon that toggles between a sun and moon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleIcon v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { is = 'button', mode = 'light' } = defineProps<{\n  /** The element or component this component should render as. */\n  is?: string | Component\n  /** Whether the toggle is a sun or moon icon */\n  mode?: 'light' | 'dark'\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst ariaLabel = computed<string>(() =>\n  mode === 'dark' ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <!-- Icon -->\n  <component\n    :is=\"is\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`toggle-icon-${mode}`\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx('size-3 flex items-center justify-center text-c-1')\">\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-ellipse\">\n      <span class=\"toggle-icon-moon-mask\" />\n    </span>\n  </component>\n</template>\n<style scoped>\n.toggle-icon-ellipse {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px currentColor;\n  overflow: hidden;\n  position: relative;\n  background: var(--scalar-background-1);\n  display: inline-block;\n  transition:\n    width 0.3s ease-in-out,\n    height 0.3s ease-in-out;\n}\n.toggle-icon-moon-mask {\n  width: 100%;\n  height: 100%;\n  border: 1px solid currentColor;\n  display: block;\n  left: 2.5px;\n  bottom: 2.5px;\n  position: absolute;\n  border-radius: 50%;\n  background: var(--scalar-background-1);\n  transition: transform 0.3s ease-in-out;\n  transform: translate3d(4px, -4px, 0);\n}\n.toggle-icon-sun-ray {\n  width: 12px;\n  height: 1px;\n  border-radius: 8px;\n  background: currentColor;\n  position: absolute;\n  transition: transform 0.3s ease-in-out;\n}\n.toggle-icon-sun-ray:nth-of-type(2) {\n  transform: rotate(90deg);\n}\n.toggle-icon-sun-ray:nth-of-type(3) {\n  transform: rotate(45deg);\n}\n.toggle-icon-sun-ray:nth-of-type(4) {\n  transform: rotate(-45deg);\n}\n.toggle-icon-dark .toggle-icon-ellipse {\n  width: 10px;\n  height: 10px;\n  mask-image: radial-gradient(\n    circle at bottom left,\n    pink 10px,\n    transparent 12px\n  );\n}\n.toggle-icon-dark .toggle-icon-sun-ray {\n  transform: scale(0);\n}\n.toggle-icon-dark .toggle-icon-moon-mask {\n  transform: translate3d(0, 0, 0);\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue_vue_type_script_setup_true_lang.js

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