@scalar/api-reference 1.60.0 → 1.62.0

package/dist/components/Content/Tags/components/TagSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSection.vue.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader>\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\"> (Collapsed)</ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent>\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TagSection.vue.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { useLocalization } from '@/features/localization'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\nconst { translate } = useLocalization()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader>\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\">\n            ({{ translate('navigation.collapsed') }})\n          </ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent>\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":""}

package/dist/components/Content/Tags/components/TagSection.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../../features/localization/use-localization.js";
 import Section_default from "../../../Section/Section.vue.js";
 import SectionColumn_default from "../../../Section/SectionColumn.vue.js";
 import SectionColumns_default from "../../../Section/SectionColumns.vue.js";
@@ -20,6 +21,7 @@ var TagSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		eventBus: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return __props.tag ? (openBlock(), createBlock(unref(Section_default), {
 				key: 0,
@@ -35,7 +37,7 @@ var TagSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 								level: 2
 							}, {
 								default: withCtx(() => [createTextVNode(toDisplayString(__props.tag.title) + " ", 1), __props.isCollapsed ? (openBlock(), createBlock(ScreenReader_default, { key: 0 }, {
-									default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" (Collapsed)", -1)])]),
+									default: withCtx(() => [createTextVNode(" (" + toDisplayString(unref(translate)("navigation.collapsed")) + ") ", 1)]),
 									_: 1
 								})) : createCommentVNode("", true)]),
 								_: 1

package/dist/components/Content/Tags/components/TagSection.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSection.vue.script.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader>\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\"> (Collapsed)</ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent>\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;UA2BU,QAAA,OAAA,WAAA,EADR,YAoCU,MAAA,gBAAA,EAAA;;IAlCP,IAAI,QAAA,IAAI;IACT,MAAK;IACJ,gBAAY,OAAA,OAAA,OAAA,WAAe,QAAA,UAAU,KAAI,yBAAA,EAAA,IAAgC,QAAA,IAAI,IAAE,CAAA;;2BAehE;KAZhB,YAYgB,MAAA,sBAAA,EAAA,MAAA;6BADL,CAVT,YAUS,MAAA,eAAA,EAAA,EATN,iBAAa,OAAA,OAAA,OAAA,WAAmB,QAAA,UAAU,KAAI,qBAAA,EAAA,IAA4B,QAAA,IAAI,IAAE,CAAA,GAAA,EAAA;8BAQ9D,CALnB,YAKmB,MAAA,yBAAA,EAAA;QAJhB,IAAI,QAAA;QACJ,OAAO;;+BACO,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,GAAG,KACf,EAAA,EAAoB,QAAA,eAAA,WAAA,EAApB,YAA4D,sBAAA,EAAA,KAAA,GAAA,EAAA;gCAAf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAZ,gBAAY,GAAA,CAAA,EAAA,CAAA;;;;;;;;;KAInD,YAciB,MAAA,uBAAA,EAAA,MAAA;6BADE,CAZjB,YAYiB,MAAA,uBAAA,EAAA,MAAA;8BANC,CALhB,YAKgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAHf,YAGe,MAAA,eAAA,EAAA;SAFZ,OAAO,QAAA,cAAW,IAAO,KAAA;SACzB,OAAO,QAAA,KAAK,eAAW;SACxB,YAAA;;;WAEJ,YAIgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAFf,YAEe,MAAA,uBAAA,EAAA;SADZ,UAAU,QAAA;SACV,KAAK,QAAA;;;;;;;;KAId,YAA6C,MAAA,+BAAA,EAAA,EAApB,OAAO,QAAA,IAAI,OAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}
+{"version":3,"file":"TagSection.vue.script.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { useLocalization } from '@/features/localization'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\nconst { translate } = useLocalization()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader>\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\">\n            ({{ translate('navigation.collapsed') }})\n          </ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent>\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,EAAE,cAAc,iBAAgB;;UAI5B,QAAA,OAAA,WAAA,EADR,YAsCU,MAAA,gBAAA,EAAA;;IApCP,IAAI,QAAA,IAAI;IACT,MAAK;IACJ,gBAAY,OAAA,OAAA,OAAA,WAAe,QAAA,UAAU,KAAI,yBAAA,EAAA,IAAgC,QAAA,IAAI,IAAE,CAAA;;2BAiBhE;KAdhB,YAcgB,MAAA,sBAAA,EAAA,MAAA;6BADL,CAZT,YAYS,MAAA,eAAA,EAAA,EAXN,iBAAa,OAAA,OAAA,OAAA,WAAmB,QAAA,UAAU,KAAI,qBAAA,EAAA,IAA4B,QAAA,IAAI,IAAE,CAAA,GAAA,EAAA;8BAU9D,CAPnB,YAOmB,MAAA,yBAAA,EAAA;QANhB,IAAI,QAAA;QACJ,OAAO;;+BACO,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,GAAG,KACf,EAAA,EAAoB,QAAA,eAAA,WAAA,EAApB,YAEe,sBAAA,EAAA,KAAA,GAAA,EAAA;gCADZ,CAAA,gBAD8B,OAC9B,gBAAG,MAAA,UAAS,CAAA,uBAAA,CAAA,GAA2B,MAC1C,EAAA,CAAA,CAAA;;;;;;;;;KAIN,YAciB,MAAA,uBAAA,EAAA,MAAA;6BADE,CAZjB,YAYiB,MAAA,uBAAA,EAAA,MAAA;8BANC,CALhB,YAKgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAHf,YAGe,MAAA,eAAA,EAAA;SAFZ,OAAO,QAAA,cAAW,IAAO,KAAA;SACzB,OAAO,QAAA,KAAK,eAAW;SACxB,YAAA;;;WAEJ,YAIgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAFf,YAEe,MAAA,uBAAA,EAAA;SADZ,UAAU,QAAA;SACV,KAAK,QAAA;;;;;;;;KAId,YAA6C,MAAA,+BAAA,EAAA,EAApB,OAAO,QAAA,IAAI,OAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"GettingStarted.vue.d.ts","sourceRoot":"","sources":["../../src/components/GettingStarted.vue"],"names":[],"mappings":"AA6cA,OAAO,EAAe,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAE1D,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,OAAO,CAAA;CACf,CAAC;AA+YF,QAAA,MAAM,YAAY;;YA3YwB,OAAO;eAAS,MAAM;;;;;;;YAAtB,OAAO;eAAS,MAAM;;;;;kFA8Y9D,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"GettingStarted.vue.d.ts","sourceRoot":"","sources":["../../src/components/GettingStarted.vue"],"names":[],"mappings":"AAsdA,OAAO,EAAe,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAI1D,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,OAAO,CAAA;CACf,CAAC;AAoaF,QAAA,MAAM,YAAY;;YAjawB,OAAO;eAAS,MAAM;;;;;;;YAAtB,OAAO;eAAS,MAAM;;;;;kFAoa9D,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/GettingStarted.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import GettingStarted_vue_vue_type_script_setup_true_lang_default from "./GettingStarted.vue.script.js";
 /* empty css                             */
 //#region src/components/GettingStarted.vue
-var GettingStarted_default = /* @__PURE__ */ _plugin_vue_export_helper_default(GettingStarted_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-68d4d91b"]]);
+var GettingStarted_default = /* @__PURE__ */ _plugin_vue_export_helper_default(GettingStarted_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c592502d"]]);
 //#endregion
 export { GettingStarted_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"GettingStarted.vue.js","names":[],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\ndefineProps<{\n  theme: ThemeId\n}>()\n\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">Swagger Editor</h1>\n      <p class=\"start-p\">\n        Welcome to the Scalar API References + Swagger Editor, a Free &\n        Open-Source tool that takes your Swagger/OAS file and generates\n        Beautiful API references.\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          Show Example\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          Upload File\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">INTEGRATIONS</div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">THEMING</p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">Features</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">Customize</p>\n        Bring your typography & color palettes, or use our themes!\n      </li>\n      <li>\n        <p class=\"start-h3\">Testing</p>\n        A deeply integrated Rest API Client (Also Free & Open-Source)\n      </li>\n      <li>\n        <p class=\"start-h3\">Search</p>\n        Fully integrated Search (Using fuse.js)\n      </li>\n      <li>\n        <p class=\"start-h3\">Hosting</p>\n        Free subdomain hosting on https://apidocumentation.com\n      </li>\n      <li>\n        <p class=\"start-h3\">OpenAPI & Swagger</p>\n        Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0\n      </li>\n      <li>\n        <p class=\"start-h3\">Code Samples</p>\n        Code samples to show off your API in most popular languages\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"GettingStarted.vue.js","names":[],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\nimport { useLocalization } from '@/features/localization'\n\ndefineProps<{\n  theme: ThemeId\n}>()\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">\n        {{ translate('gettingStarted.swaggerEditor') }}\n      </h1>\n      <p class=\"start-p\">\n        {{ translate('gettingStarted.description') }}\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          {{ translate('gettingStarted.showExample') }}\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          {{ translate('gettingStarted.uploadFile') }}\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">\n          {{ translate('gettingStarted.integrations') }}\n        </div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">\n          {{ translate('gettingStarted.theming') }}\n        </p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">{{ translate('gettingStarted.features') }}</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.customize') }}</p>\n        {{ translate('gettingStarted.customizeDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.testing') }}</p>\n        {{ translate('gettingStarted.testingDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.search') }}</p>\n        {{ translate('gettingStarted.searchDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.hosting') }}</p>\n        {{ translate('gettingStarted.hostingDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">\n          {{ translate('gettingStarted.openApiSwagger') }}\n        </p>\n        {{ translate('gettingStarted.openApiSwaggerDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.codeSamples') }}</p>\n        {{ translate('gettingStarted.codeSamplesDescription') }}\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,13 +1,27 @@
+import { useLocalization } from "../features/localization/use-localization.js";
 import { Fragment, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { themeLabels } from "@scalar/themes";
 import { ScalarButton } from "@scalar/components/button";
 //#region src/components/GettingStarted.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "custom-scroll start" };
 var _hoisted_2 = { class: "start-copy" };
-var _hoisted_3 = { class: "start-cta" };
-var _hoisted_4 = { class: "start-row" };
-var _hoisted_5 = { class: "start-section start-section-colors" };
-var _hoisted_6 = ["onClick"];
+var _hoisted_3 = { class: "start-h1" };
+var _hoisted_4 = { class: "start-p" };
+var _hoisted_5 = { class: "start-cta" };
+var _hoisted_6 = { class: "start-row" };
+var _hoisted_7 = { class: "start-section start-section-integrations" };
+var _hoisted_8 = { class: "start-h2" };
+var _hoisted_9 = { class: "start-section start-section-colors" };
+var _hoisted_10 = { class: "start-h2" };
+var _hoisted_11 = ["onClick"];
+var _hoisted_12 = { class: "start-h1" };
+var _hoisted_13 = { class: "start-ul" };
+var _hoisted_14 = { class: "start-h3" };
+var _hoisted_15 = { class: "start-h3" };
+var _hoisted_16 = { class: "start-h3" };
+var _hoisted_17 = { class: "start-h3" };
+var _hoisted_18 = { class: "start-h3" };
+var _hoisted_19 = { class: "start-h3" };
 var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "GettingStarted",
 	props: { theme: {} },
@@ -19,6 +33,7 @@ var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	],
 	setup(__props, { emit: __emit }) {
 		const emits = __emit;
+		const { translate } = useLocalization();
 		const themeIds = [
 			"default",
 			"alternate",
@@ -36,21 +51,35 @@ var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, [_cache[3] || (_cache[3] = createStaticVNode("<div class=\"start-logo\" data-v-68d4d91b><svg height=\"36\" viewBox=\"0 0 36 36\" width=\"36\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><path d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\" fill=\"currentColor\" fill-rule=\"evenodd\" data-v-68d4d91b></path></svg></div><h1 class=\"start-h1\" data-v-68d4d91b>Swagger Editor</h1><p class=\"start-p\" data-v-68d4d91b> Welcome to the Scalar API References + Swagger Editor, a Free &amp; Open-Source tool that takes your Swagger/OAS file and generates Beautiful API references. </p>", 3)), createElementVNode("div", _hoisted_3, [createVNode(unref(ScalarButton), {
-					class: "w-full",
-					onClick: fetchExampleSpecification
-				}, {
-					default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Show Example ", -1)])]),
-					_: 1
-				}), createVNode(unref(ScalarButton), {
-					class: "w-full",
-					variant: "outlined",
-					onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("loadSwaggerFile"))
-				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Upload File ", -1)])]),
-					_: 1
-				})])]),
-				createElementVNode("div", _hoisted_4, [_cache[5] || (_cache[5] = createStaticVNode("<div class=\"start-section start-section-integrations\" data-v-68d4d91b><div class=\"start-h2\" data-v-68d4d91b>INTEGRATIONS</div><a class=\"start-item\" href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\" target=\"_blank\" data-v-68d4d91b><svg fill=\"currentColor\" height=\"16\" viewBox=\"0 0 19 16\" width=\"19\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><path d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\" fill=\"currentColor\" fill-rule=\"nonzero\" data-v-68d4d91b></path></svg><span data-v-68d4d91b>Fastify</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\" target=\"_blank\" data-v-68d4d91b><svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><g data-v-68d4d91b><path d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\" fill=\"currentColor\" data-v-68d4d91b></path><path d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-68d4d91b></path><path d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-68d4d91b></path></g></svg><span data-v-68d4d91b>CDN</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\" target=\"_blank\" data-v-68d4d91b><svg height=\"170\" viewBox=\"0 0 196.3 170\" width=\"196.3\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><g fill=\"currentColor\" fill-rule=\"nonzero\" data-v-68d4d91b><polygon points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" data-v-68d4d91b></polygon><polygon points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" data-v-68d4d91b></polygon></g></svg><span data-v-68d4d91b>Vue</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\" target=\"_blank\" data-v-68d4d91b><svg height=\"23.3\" viewBox=\"0 0 22 23.3\" width=\"22\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><g fill=\"none\" fill-rule=\"evenodd\" data-v-68d4d91b><circle cx=\"11\" cy=\"11.6\" fill=\"currentColor\" fill-rule=\"nonzero\" r=\"2\" data-v-68d4d91b></circle><g stroke=\"currentColor\" data-v-68d4d91b><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" data-v-68d4d91b></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(60 11 11.6)\" data-v-68d4d91b></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(120 11 11.6)\" data-v-68d4d91b></ellipse></g></g></svg><span data-v-68d4d91b>React</span></a></div>", 1)), createElementVNode("div", _hoisted_5, [_cache[4] || (_cache[4] = createElementVNode("p", { class: "start-h2" }, "THEMING", -1)), (openBlock(), createElementBlock(Fragment, null, renderList(themeIds, (themeId) => {
+				createElementVNode("div", _hoisted_2, [
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "start-logo" }, [createElementVNode("svg", {
+						height: "36",
+						viewBox: "0 0 36 36",
+						width: "36",
+						xmlns: "http://www.w3.org/2000/svg"
+					}, [createElementVNode("path", {
+						d: "M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z",
+						fill: "currentColor",
+						"fill-rule": "evenodd"
+					})])], -1)),
+					createElementVNode("h1", _hoisted_3, toDisplayString(unref(translate)("gettingStarted.swaggerEditor")), 1),
+					createElementVNode("p", _hoisted_4, toDisplayString(unref(translate)("gettingStarted.description")), 1),
+					createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarButton), {
+						class: "w-full",
+						onClick: fetchExampleSpecification
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("gettingStarted.showExample")), 1)]),
+						_: 1
+					}), createVNode(unref(ScalarButton), {
+						class: "w-full",
+						variant: "outlined",
+						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("loadSwaggerFile"))
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("gettingStarted.uploadFile")), 1)]),
+						_: 1
+					})])
+				]),
+				createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createElementVNode("div", _hoisted_8, toDisplayString(unref(translate)("gettingStarted.integrations")), 1), _cache[2] || (_cache[2] = createStaticVNode("<a class=\"start-item\" href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\" target=\"_blank\" data-v-c592502d><svg fill=\"currentColor\" height=\"16\" viewBox=\"0 0 19 16\" width=\"19\" xmlns=\"http://www.w3.org/2000/svg\" data-v-c592502d><path d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\" fill=\"currentColor\" fill-rule=\"nonzero\" data-v-c592502d></path></svg><span data-v-c592502d>Fastify</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\" target=\"_blank\" data-v-c592502d><svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" data-v-c592502d><g data-v-c592502d><path d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\" fill=\"currentColor\" data-v-c592502d></path><path d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-c592502d></path><path d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-c592502d></path></g></svg><span data-v-c592502d>CDN</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\" target=\"_blank\" data-v-c592502d><svg height=\"170\" viewBox=\"0 0 196.3 170\" width=\"196.3\" xmlns=\"http://www.w3.org/2000/svg\" data-v-c592502d><g fill=\"currentColor\" fill-rule=\"nonzero\" data-v-c592502d><polygon points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" data-v-c592502d></polygon><polygon points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" data-v-c592502d></polygon></g></svg><span data-v-c592502d>Vue</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\" target=\"_blank\" data-v-c592502d><svg height=\"23.3\" viewBox=\"0 0 22 23.3\" width=\"22\" xmlns=\"http://www.w3.org/2000/svg\" data-v-c592502d><g fill=\"none\" fill-rule=\"evenodd\" data-v-c592502d><circle cx=\"11\" cy=\"11.6\" fill=\"currentColor\" fill-rule=\"nonzero\" r=\"2\" data-v-c592502d></circle><g stroke=\"currentColor\" data-v-c592502d><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" data-v-c592502d></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(60 11 11.6)\" data-v-c592502d></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(120 11 11.6)\" data-v-c592502d></ellipse></g></g></svg><span data-v-c592502d>React</span></a>", 4))]), createElementVNode("div", _hoisted_9, [createElementVNode("p", _hoisted_10, toDisplayString(unref(translate)("gettingStarted.theming")), 1), (openBlock(), createElementBlock(Fragment, null, renderList(themeIds, (themeId) => {
 					return createElementVNode("div", {
 						key: themeId,
 						class: normalizeClass(["start-item", { "start-item-active": themeId === __props.theme }]),
@@ -58,9 +87,17 @@ var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							id: themeId,
 							label: unref(themeLabels)[themeId]
 						})
-					}, toDisplayString(unref(themeLabels)[themeId]), 11, _hoisted_6);
+					}, toDisplayString(unref(themeLabels)[themeId]), 11, _hoisted_11);
 				}), 64))])]),
-				_cache[6] || (_cache[6] = createStaticVNode("<p class=\"start-h1\" data-v-68d4d91b>Features</p><ul class=\"start-ul\" data-v-68d4d91b><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Customize</p> Bring your typography &amp; color palettes, or use our themes! </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Testing</p> A deeply integrated Rest API Client (Also Free &amp; Open-Source) </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Search</p> Fully integrated Search (Using fuse.js) </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Hosting</p> Free subdomain hosting on https://apidocumentation.com </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>OpenAPI &amp; Swagger</p> Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0 </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Code Samples</p> Code samples to show off your API in most popular languages </li></ul>", 2))
+				createElementVNode("p", _hoisted_12, toDisplayString(unref(translate)("gettingStarted.features")), 1),
+				createElementVNode("ul", _hoisted_13, [
+					createElementVNode("li", null, [createElementVNode("p", _hoisted_14, toDisplayString(unref(translate)("gettingStarted.customize")), 1), createTextVNode(" " + toDisplayString(unref(translate)("gettingStarted.customizeDescription")), 1)]),
+					createElementVNode("li", null, [createElementVNode("p", _hoisted_15, toDisplayString(unref(translate)("gettingStarted.testing")), 1), createTextVNode(" " + toDisplayString(unref(translate)("gettingStarted.testingDescription")), 1)]),
+					createElementVNode("li", null, [createElementVNode("p", _hoisted_16, toDisplayString(unref(translate)("gettingStarted.search")), 1), createTextVNode(" " + toDisplayString(unref(translate)("gettingStarted.searchDescription")), 1)]),
+					createElementVNode("li", null, [createElementVNode("p", _hoisted_17, toDisplayString(unref(translate)("gettingStarted.hosting")), 1), createTextVNode(" " + toDisplayString(unref(translate)("gettingStarted.hostingDescription")), 1)]),
+					createElementVNode("li", null, [createElementVNode("p", _hoisted_18, toDisplayString(unref(translate)("gettingStarted.openApiSwagger")), 1), createTextVNode(" " + toDisplayString(unref(translate)("gettingStarted.openApiSwaggerDescription")), 1)]),
+					createElementVNode("li", null, [createElementVNode("p", _hoisted_19, toDisplayString(unref(translate)("gettingStarted.codeSamples")), 1), createTextVNode(" " + toDisplayString(unref(translate)("gettingStarted.codeSamplesDescription")), 1)])
+				])
 			]);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"GettingStarted.vue.script.js","names":["$emit"],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\ndefineProps<{\n  theme: ThemeId\n}>()\n\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">Swagger Editor</h1>\n      <p class=\"start-p\">\n        Welcome to the Scalar API References + Swagger Editor, a Free &\n        Open-Source tool that takes your Swagger/OAS file and generates\n        Beautiful API references.\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          Show Example\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          Upload File\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">INTEGRATIONS</div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">THEMING</p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">Features</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">Customize</p>\n        Bring your typography & color palettes, or use our themes!\n      </li>\n      <li>\n        <p class=\"start-h3\">Testing</p>\n        A deeply integrated Rest API Client (Also Free & Open-Source)\n      </li>\n      <li>\n        <p class=\"start-h3\">Search</p>\n        Fully integrated Search (Using fuse.js)\n      </li>\n      <li>\n        <p class=\"start-h3\">Hosting</p>\n        Free subdomain hosting on https://apidocumentation.com\n      </li>\n      <li>\n        <p class=\"start-h3\">OpenAPI & Swagger</p>\n        Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0\n      </li>\n      <li>\n        <p class=\"start-h3\">Code Samples</p>\n        Code samples to show off your API in most popular languages\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAOd,MAAM,WAAsB;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACF;EAEA,eAAe,4BAA4B;AAKzC,SAAM,iBAAiB,OAJN,MAAM,MACrB,8DACF,EAEsC,MAAM,CAAA;;;uBAI5C,mBAmLM,OAnLN,YAmLM;IAlLJ,mBAgCM,OAhCN,YAgCM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,4rBAAA,EAAA,GAbJ,mBAYM,OAZN,YAYM,CAXJ,YAIe,MAAA,aAAA,EAAA;KAHb,OAAM;KACL,SAAO;;4BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFqC,kBAErC,GAAA,CAAA,EAAA,CAAA;;QACA,YAKe,MAAA,aAAA,EAAA;KAJb,OAAM;KACN,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,kBAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFoC,iBAEpC,GAAA,CAAA,EAAA,CAAA;;;IAGJ,mBAqHM,OArHN,YAqHM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,inHAAA,EAAA,GAbJ,mBAYM,OAZN,YAYM,CAAA,OAAA,OAAA,OAAA,KAXJ,mBAA+B,KAAA,EAA5B,OAAM,YAAU,EAAC,WAAO,GAAA,IAAA,WAAA,EAC3B,mBASM,UAAA,MAAA,WARc,WAAX,YAAO;YADhB,mBASM,OAAA;MAPH,KAAK;MACN,OAAK,eAAA,CAAC,cAAY,EAAA,qBACa,YAAY,QAAA,OAAK,CAAA,CAAA;MAC/C,UAAK,WAAeA,KAAAA,MAAK,eAAA;OAAA,IAAsB;OAAO,OAAS,MAAA,YAAW,CAAC;OAAO,CAAA;wBAGhF,MAAA,YAAW,CAAC,SAAO,EAAA,IAAA,WAAA"}
+{"version":3,"file":"GettingStarted.vue.script.js","names":["$emit"],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\nimport { useLocalization } from '@/features/localization'\n\ndefineProps<{\n  theme: ThemeId\n}>()\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">\n        {{ translate('gettingStarted.swaggerEditor') }}\n      </h1>\n      <p class=\"start-p\">\n        {{ translate('gettingStarted.description') }}\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          {{ translate('gettingStarted.showExample') }}\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          {{ translate('gettingStarted.uploadFile') }}\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">\n          {{ translate('gettingStarted.integrations') }}\n        </div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">\n          {{ translate('gettingStarted.theming') }}\n        </p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">{{ translate('gettingStarted.features') }}</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.customize') }}</p>\n        {{ translate('gettingStarted.customizeDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.testing') }}</p>\n        {{ translate('gettingStarted.testingDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.search') }}</p>\n        {{ translate('gettingStarted.searchDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.hosting') }}</p>\n        {{ translate('gettingStarted.hostingDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">\n          {{ translate('gettingStarted.openApiSwagger') }}\n        </p>\n        {{ translate('gettingStarted.openApiSwaggerDescription') }}\n      </li>\n      <li>\n        <p class=\"start-h3\">{{ translate('gettingStarted.codeSamples') }}</p>\n        {{ translate('gettingStarted.codeSamplesDescription') }}\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EAOd,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,WAAsB;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACF;EAEA,eAAe,4BAA4B;AAKzC,SAAM,iBAAiB,OAJN,MAAM,MACrB,8DACF,EAEsC,MAAM,CAAA;;;uBAI5C,mBAyLM,OAzLN,YAyLM;IAxLJ,mBAgCM,OAhCN,YAgCM;+BA/BJ,mBAWM,OAAA,EAXD,OAAM,cAAY,EAAA,CACrB,mBASM,OAAA;MARJ,QAAO;MACP,SAAQ;MACR,OAAM;MACN,OAAM;SACN,mBAGwB,QAAA;MAFtB,GAAE;MACF,MAAK;MACL,aAAU;;KAGhB,mBAEK,MAFL,YAEK,gBADA,MAAA,UAAS,CAAA,+BAAA,CAAA,EAAA,EAAA;KAEd,mBAEI,KAFJ,YAEI,gBADC,MAAA,UAAS,CAAA,6BAAA,CAAA,EAAA,EAAA;KAEd,mBAYM,OAZN,YAYM,CAXJ,YAIe,MAAA,aAAA,EAAA;MAHb,OAAM;MACL,SAAO;;6BACqC,CAAA,gBAAA,gBAA1C,MAAA,UAAS,CAAA,6BAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;SAEd,YAKe,MAAA,aAAA,EAAA;MAJb,OAAM;MACN,SAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,kBAAA;;6BAC+B,CAAA,gBAAA,gBAAzC,MAAA,UAAS,CAAA,4BAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;;;IAIlB,mBAyHM,OAzHN,YAyHM,CAxHJ,mBAwGM,OAxGN,YAwGM,CAvGJ,mBAEM,OAFN,YAEM,gBADD,MAAA,UAAS,CAAA,8BAAA,CAAA,EAAA,EAAA,EAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,y+GAAA,EAAA,EAAA,CAAA,EAuGhB,mBAcM,OAdN,YAcM,CAbJ,mBAEI,KAFJ,aAEI,gBADC,MAAA,UAAS,CAAA,yBAAA,CAAA,EAAA,EAAA,GAAA,WAAA,EAEd,mBASM,UAAA,MAAA,WARc,WAAX,YAAO;YADhB,mBASM,OAAA;MAPH,KAAK;MACN,OAAK,eAAA,CAAC,cAAY,EAAA,qBACa,YAAY,QAAA,OAAK,CAAA,CAAA;MAC/C,UAAK,WAAeA,KAAAA,MAAK,eAAA;OAAA,IAAsB;OAAO,OAAS,MAAA,YAAW,CAAC;OAAO,CAAA;wBAGhF,MAAA,YAAW,CAAC,SAAO,EAAA,IAAA,YAAA;;IAI5B,mBAAkE,KAAlE,aAAkE,gBAA3C,MAAA,UAAS,CAAA,0BAAA,CAAA,EAAA,EAAA;IAChC,mBA2BK,MA3BL,aA2BK;KA1BH,mBAGK,MAAA,MAAA,CAFH,mBAAmE,KAAnE,aAAmE,gBAA5C,MAAA,UAAS,CAAA,2BAAA,CAAA,EAAA,EAAA,EAAA,gBAAmC,MACnE,gBAAG,MAAA,UAAS,CAAA,sCAAA,CAAA,EAAA,EAAA,CAAA,CAAA;KAEd,mBAGK,MAAA,MAAA,CAFH,mBAAiE,KAAjE,aAAiE,gBAA1C,MAAA,UAAS,CAAA,yBAAA,CAAA,EAAA,EAAA,EAAA,gBAAiC,MACjE,gBAAG,MAAA,UAAS,CAAA,oCAAA,CAAA,EAAA,EAAA,CAAA,CAAA;KAEd,mBAGK,MAAA,MAAA,CAFH,mBAAgE,KAAhE,aAAgE,gBAAzC,MAAA,UAAS,CAAA,wBAAA,CAAA,EAAA,EAAA,EAAA,gBAAgC,MAChE,gBAAG,MAAA,UAAS,CAAA,mCAAA,CAAA,EAAA,EAAA,CAAA,CAAA;KAEd,mBAGK,MAAA,MAAA,CAFH,mBAAiE,KAAjE,aAAiE,gBAA1C,MAAA,UAAS,CAAA,yBAAA,CAAA,EAAA,EAAA,EAAA,gBAAiC,MACjE,gBAAG,MAAA,UAAS,CAAA,oCAAA,CAAA,EAAA,EAAA,CAAA,CAAA;KAEd,mBAKK,MAAA,MAAA,CAJH,mBAEI,KAFJ,aAEI,gBADC,MAAA,UAAS,CAAA,gCAAA,CAAA,EAAA,EAAA,EAAA,gBACV,MACJ,gBAAG,MAAA,UAAS,CAAA,2CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;KAEd,mBAGK,MAAA,MAAA,CAFH,mBAAqE,KAArE,aAAqE,gBAA9C,MAAA,UAAS,CAAA,6BAAA,CAAA,EAAA,EAAA,EAAA,gBAAqC,MACrE,gBAAG,MAAA,UAAS,CAAA,wCAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/MobileHeader.vue"],"names":[],"mappings":"AAgFA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,OAAO,CAAA;CACrB,CAAC;AAQF,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,KAAK,CAAA;IACjB,OAAO,CAAC,CAAC,KAAK,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;IAClD,MAAM,CAAC,IAAI,KAAK,CAAA;CACjB,CAAC;AAuHF,QAAA,MAAM,UAAU;;;;kFAGd,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":"MobileHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/MobileHeader.vue"],"names":[],"mappings":"AAyFA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,OAAO,CAAA;CACrB,CAAC;AASF,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,KAAK,CAAA;IACjB,OAAO,CAAC,CAAC,KAAK,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;IAClD,MAAM,CAAC,IAAI,KAAK,CAAA;CACjB,CAAC;AAgIF,QAAA,MAAM,UAAU;;;;kFAGd,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.vue.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"isSidebarOpen ? 'Close Menu' : 'Open Menu'\"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"MobileHeader.vue.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\n\nimport { useLocalization } from '@/features/localization'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\nconst { translate } = useLocalization()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"\n          isSidebarOpen\n            ? translate('navigation.closeMenu')\n            : translate('navigation.openMenu')\n        \"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../features/localization/use-localization.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
 import { ScalarIconList, ScalarIconX } from "@scalar/icons";
 import { ScalarIconButton } from "@scalar/components/icon-button";
@@ -18,6 +19,7 @@ var MobileHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	},
 	emits: ["toggleSidebar"],
 	setup(__props, { emit: __emit }) {
+		const { translate } = useLocalization();
 		const emit = __emit;
 		const variants = cva({
 			base: "lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]",
@@ -28,7 +30,7 @@ var MobileHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				__props.showSidebar ? (openBlock(), createBlock(unref(ScalarIconButton), {
 					key: 0,
 					icon: __props.isSidebarOpen ? unref(ScalarIconX) : unref(ScalarIconList),
-					label: __props.isSidebarOpen ? "Close Menu" : "Open Menu",
+					label: __props.isSidebarOpen ? unref(translate)("navigation.closeMenu") : unref(translate)("navigation.openMenu"),
 					size: "md",
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("toggleSidebar"))
 				}, null, 8, ["icon", "label"])) : createCommentVNode("", true),

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.vue.script.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"isSidebarOpen ? 'Close Menu' : 'Open Menu'\"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAWA,MAAM,OAAO;EAUb,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,iEACP,EACF;GACF,CAAA;;2DAIC,WAKmB,KAAA,QAAA,WAAA,eAAA,mBAJT,EAAA,gBAAA,8HAGP,CAAA,CAAA,CAAA,EAEH,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,iBACE,MAAA,SAAQ,CAAA,EAAA,MAAS,QAAA,eAAa,CAAA,CAAA,CAAA,EAAA,EAAA,CACtC,mBAqBS,UArBT,YAqBS;IAlBC,QAAA,eAAA,WAAA,EADR,YAKmC,MAAA,iBAAA,EAAA;;KAHhC,MAAM,QAAA,gBAAgB,MAAA,YAAW,GAAG,MAAA,eAAc;KAClD,OAAO,QAAA,gBAAa,eAAA;KACrB,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;;IAGN,QAAA,eAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,WAAU,EAAA,EAAA,IAEf,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,CAAA;IAElB,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;OAKnB,QAAA,gBADR,WAMmB,KAAA,QAAA,WAAA,eAAA,WAAA,EAAA,KAAA,GAAA,EAJT,EAAA,gBAAA,sEAGP,CAAA,CAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"MobileHeader.vue.script.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\n\nimport { useLocalization } from '@/features/localization'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\nconst { translate } = useLocalization()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"\n          isSidebarOpen\n            ? translate('navigation.closeMenu')\n            : translate('navigation.openMenu')\n        \"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,OAAO;EAUb,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,iEACP,EACF;GACF,CAAA;;2DAIC,WAKmB,KAAA,QAAA,WAAA,eAAA,mBAJT,EAAA,gBAAA,8HAGP,CAAA,CAAA,CAAA,EAEH,mBAqCM,OAAA,EApCJ,OAAK,eAAA,CAAC,iBACE,MAAA,SAAQ,CAAA,EAAA,MAAS,QAAA,eAAa,CAAA,CAAA,CAAA,EAAA,EAAA,CACtC,mBAyBS,UAzBT,YAyBS;IAtBC,QAAA,eAAA,WAAA,EADR,YASmC,MAAA,iBAAA,EAAA;;KAPhC,MAAM,QAAA,gBAAgB,MAAA,YAAW,GAAG,MAAA,eAAc;KAClD,OAAkB,QAAA,gBAA4B,MAAA,UAAS,CAAA,uBAAA,GAAuC,MAAA,UAAS,CAAA,sBAAA;KAKxG,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;;IAGN,QAAA,eAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,WAAU,EAAA,EAAA,IAEf,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,CAAA;IAElB,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;OAKnB,QAAA,gBADR,WAMmB,KAAA,QAAA,WAAA,eAAA,WAAA,EAAA,KAAA,GAAA,EAJT,EAAA,gBAAA,sEAGP,CAAA,CAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"OperationsList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/OperationsList/OperationsList.vue"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAO9E,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,YAAY,CAAA;IACjB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAC;AAoHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"OperationsList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/OperationsList/OperationsList.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAQ9E,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,YAAY,CAAA;IACjB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAC;AA4HF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/OperationsList/OperationsList.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import OperationsList_vue_vue_type_script_setup_true_lang_default from "./OperationsList.vue.script.js";
 /* empty css                             */
 //#region src/components/OperationsList/OperationsList.vue
-var OperationsList_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationsList_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b8cb97c7"]]);
+var OperationsList_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationsList_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0315c99b"]]);
 //#endregion
 export { OperationsList_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"OperationsList.vue.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{ tag.isWebhooks ? 'Webhooks' : 'Operations' }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"`${tag.title} endpoints`\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"OperationsList.vue.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport { useLocalization } from '@/features/localization'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\nconst { translate } = useLocalization()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{\n          tag.isWebhooks\n            ? translate('navigation.webhooks')\n            : translate('navigation.operations')\n        }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"translate('navigation.endpoints', { name: tag.title })\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../features/localization/use-localization.js";
 import ScreenReader_default from "../ScreenReader.vue.js";
 import OperationsListItem_default from "./OperationsListItem.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
@@ -11,6 +12,7 @@ var OperationsList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		eventBus: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const operationsAndWebhooks = computed(() => {
 			return __props.tag.children?.filter((child) => child.type === "operation" || child.type === "webhook") ?? [];
 		});
@@ -23,11 +25,11 @@ var OperationsList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					default: withCtx(() => [createVNode(ScreenReader_default, null, {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.tag.title), 1)]),
 						_: 1
-					}), createTextVNode(" " + toDisplayString(__props.tag.isWebhooks ? "Webhooks" : "Operations"), 1)]),
+					}), createTextVNode(" " + toDisplayString(__props.tag.isWebhooks ? unref(translate)("navigation.webhooks") : unref(translate)("navigation.operations")), 1)]),
 					_: 1
 				}), createVNode(unref(ScalarCardSection), { class: "custom-scroll max-h-[60vh]" }, {
 					default: withCtx(() => [createElementVNode("ul", {
-						"aria-label": `${__props.tag.title} endpoints`,
+						"aria-label": unref(translate)("navigation.endpoints", { name: __props.tag.title }),
 						class: "endpoints"
 					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(operationsAndWebhooks.value, (operationOrWebhook) => {
 						return openBlock(), createBlock(OperationsListItem_default, {

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

@@ -1 +1 @@
-{"version":3,"file":"OperationsList.vue.script.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{ tag.isWebhooks ? 'Webhooks' : 'Operations' }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"`${tag.title} endpoints`\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAmBA,MAAM,wBAAwB,eAAe;AAC3C,UACE,QAAA,IAAI,UAAU,QACX,UAAU,MAAM,SAAS,eAAe,MAAM,SAAS,UACzD,IAAI,EAAC;IAET;;UAIiB,QAAA,IAAI,YAAY,QAAA,IAAI,UAAU,SAAM,KAAA,WAAA,EAClD,YAgBa,MAAA,WAAA,EAAA;;IAhBD,OAAM;;2BAIG,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,OAAA,IAAK,EAAA;4BACuB,CAA5C,YAA4C,sBAAA,MAAA;6BAAf,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;yBAAkB,MAC5C,gBAAG,QAAA,IAAI,aAAU,aAAA,aAAA,EAAA,EAAA,CAAA,CAAA;;QAEnB,YAUoB,MAAA,kBAAA,EAAA,EAVD,OAAM,8BAA4B,EAAA;4BAS9C,CARL,mBAQK,MAAA;MAPF,cAAU,GAAK,QAAA,IAAI,MAAK;MACzB,OAAM;2BACN,mBAIoC,UAAA,MAAA,WAHL,sBAAA,QAAtB,uBAAkB;0BAD3B,YAIoC,4BAAA;OAFjC,KAAK,mBAAmB;OACxB,UAAU,QAAA;OACV,WAAW"}
+{"version":3,"file":"OperationsList.vue.script.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport { useLocalization } from '@/features/localization'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\nconst { translate } = useLocalization()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{\n          tag.isWebhooks\n            ? translate('navigation.webhooks')\n            : translate('navigation.operations')\n        }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"translate('navigation.endpoints', { name: tag.title })\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAmBA,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,wBAAwB,eAAe;AAC3C,UACE,QAAA,IAAI,UAAU,QACX,UAAU,MAAM,SAAS,eAAe,MAAM,SAAS,UACzD,IAAI,EAAC;IAET;;UAIiB,QAAA,IAAI,YAAY,QAAA,IAAI,UAAU,SAAM,KAAA,WAAA,EAClD,YAoBa,MAAA,WAAA,EAAA;;IApBD,OAAM;;2BAQG,CAPnB,YAOmB,MAAA,iBAAA,EAAA,EAPD,OAAA,IAAK,EAAA;4BACuB,CAA5C,YAA4C,sBAAA,MAAA;6BAAf,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;yBAAkB,MAC5C,gBACE,QAAA,IAAI,aAAyB,MAAA,UAAS,CAAA,sBAAA,GAAsC,MAAA,UAAS,CAAA,wBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;QAKzF,YAUoB,MAAA,kBAAA,EAAA,EAVD,OAAM,8BAA4B,EAAA;4BAS9C,CARL,mBAQK,MAAA;MAPF,cAAY,MAAA,UAAS,CAAA,wBAAA,EAAA,MAAiC,QAAA,IAAI,OAAK,CAAA;MAChE,OAAM;2BACN,mBAIoC,UAAA,MAAA,WAHL,sBAAA,QAAtB,uBAAkB;0BAD3B,YAIoC,4BAAA;OAFjC,KAAK,mBAAmB;OACxB,UAAU,QAAA;OACV,WAAW"}

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

@@ -1 +1 @@
-{"version":3,"file":"ShowMoreButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/ShowMoreButton.vue"],"names":[],"mappings":"AA+FA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ShowMoreButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/ShowMoreButton.vue"],"names":[],"mappings":"AA2GA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/ShowMoreButton.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import ShowMoreButton_vue_vue_type_script_setup_true_lang_default from "./ShowMoreButton.vue.script.js";
 /* empty css                             */
 //#region src/components/ShowMoreButton.vue
-var ShowMoreButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ShowMoreButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d1c2b649"]]);
+var ShowMoreButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ShowMoreButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8d844cc7"]]);
 //#endregion
 export { ShowMoreButton_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ShowMoreButton.vue.js","names":[],"sources":["../../src/components/ShowMoreButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n</script>\n\n<template>\n  <button\n    class=\"show-more\"\n    type=\"button\">\n    Show More\n    <ScalarIconCaretDown\n      class=\"text-c-2 mt-0.25 size-3\"\n      weight=\"bold\" />\n  </button>\n</template>\n\n<style scoped>\n.show-more {\n  appearance: none;\n  border: none;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  margin: auto;\n  padding: 8px 12px 8px 16px;\n  border-radius: 30px;\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  gap: 6px;\n  top: -48px;\n}\n\n.show-more:hover {\n  background: var(--scalar-background-2);\n  cursor: pointer;\n}\n\n.show-more:active {\n  box-shadow: 0 0 0 1px var(--scalar-border-color);\n}\n\n@container narrow-references-container (max-width: 900px) {\n  .show-more {\n    top: -24px;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ShowMoreButton.vue.js","names":[],"sources":["../../src/components/ShowMoreButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <button\n    class=\"show-more\"\n    type=\"button\">\n    {{ translate('actions.showMore') }}\n    <ScalarIconCaretDown\n      class=\"text-c-2 mt-0.25 size-3\"\n      weight=\"bold\" />\n  </button>\n</template>\n\n<style scoped>\n.show-more {\n  appearance: none;\n  border: none;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  margin: auto;\n  padding: 8px 12px 8px 16px;\n  border-radius: 30px;\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  gap: 6px;\n  top: -48px;\n}\n\n.show-more:hover {\n  background: var(--scalar-background-2);\n  cursor: pointer;\n}\n\n.show-more:active {\n  box-shadow: 0 0 0 1px var(--scalar-border-color);\n}\n\n@container narrow-references-container (max-width: 900px) {\n  .show-more {\n    top: -24px;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,4 +1,5 @@
-import { createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, unref } from "vue";
+import { useLocalization } from "../features/localization/use-localization.js";
+import { createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref } from "vue";
 import { ScalarIconCaretDown } from "@scalar/icons";
 //#region src/components/ShowMoreButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -8,8 +9,9 @@ var _hoisted_1 = {
 var ShowMoreButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ShowMoreButton",
 	setup(__props) {
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", _hoisted_1, [_cache[0] || (_cache[0] = createTextVNode(" Show More ", -1)), createVNode(unref(ScalarIconCaretDown), {
+			return openBlock(), createElementBlock("button", _hoisted_1, [createTextVNode(toDisplayString(unref(translate)("actions.showMore")) + " ", 1), createVNode(unref(ScalarIconCaretDown), {
 				class: "text-c-2 mt-0.25 size-3",
 				weight: "bold"
 			})]);

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

@@ -1 +1 @@
-{"version":3,"file":"ShowMoreButton.vue.script.js","names":[],"sources":["../../src/components/ShowMoreButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n</script>\n\n<template>\n  <button\n    class=\"show-more\"\n    type=\"button\">\n    Show More\n    <ScalarIconCaretDown\n      class=\"text-c-2 mt-0.25 size-3\"\n      weight=\"bold\" />\n  </button>\n</template>\n\n<style scoped>\n.show-more {\n  appearance: none;\n  border: none;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  margin: auto;\n  padding: 8px 12px 8px 16px;\n  border-radius: 30px;\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  gap: 6px;\n  top: -48px;\n}\n\n.show-more:hover {\n  background: var(--scalar-background-2);\n  cursor: pointer;\n}\n\n.show-more:active {\n  box-shadow: 0 0 0 1px var(--scalar-border-color);\n}\n\n@container narrow-references-container (max-width: 900px) {\n  .show-more {\n    top: -24px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;uBAKE,mBAOS,UAPT,YAOS,CAAA,OAAA,OAAA,OAAA,KAAA,gBALO,eAEd,GAAA,GAAA,YAEkB,MAAA,oBAAA,EAAA;IADhB,OAAM;IACN,QAAO"}
+{"version":3,"file":"ShowMoreButton.vue.script.js","names":[],"sources":["../../src/components/ShowMoreButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconCaretDown } from '@scalar/icons'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <button\n    class=\"show-more\"\n    type=\"button\">\n    {{ translate('actions.showMore') }}\n    <ScalarIconCaretDown\n      class=\"text-c-2 mt-0.25 size-3\"\n      weight=\"bold\" />\n  </button>\n</template>\n\n<style scoped>\n.show-more {\n  appearance: none;\n  border: none;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  margin: auto;\n  padding: 8px 12px 8px 16px;\n  border-radius: 30px;\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  gap: 6px;\n  top: -48px;\n}\n\n.show-more:hover {\n  background: var(--scalar-background-2);\n  cursor: pointer;\n}\n\n.show-more:active {\n  box-shadow: 0 0 0 1px var(--scalar-border-color);\n}\n\n@container narrow-references-container (max-width: 900px) {\n  .show-more {\n    top: -24px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAKA,MAAM,EAAE,cAAc,iBAAgB;;uBAIpC,mBAOS,UAPT,YAOS,CAAA,gBAAA,gBAJJ,MAAA,UAAS,CAAA,mBAAA,CAAA,GAAuB,KACnC,EAAA,EAAA,YAEkB,MAAA,oBAAA,EAAA;IADhB,OAAM;IACN,QAAO"}