@scalar/api-client 3.19.2 → 3.20.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @scalar/api-client
 
+## 3.20.0
+
+### Minor Changes
+
+- [#10207](https://github.com/scalar/scalar/pull/10207): Display JSON Lines, JSON Sequences, and multipart response parts as they arrive instead of waiting for the complete response. Preserve cancellation and show malformed records, incomplete multipart responses, and bounded display limits.
+
+  JSON Lines responses (including `application/jsonl` and `application/x-ndjson`), JSON Sequences (`application/json-seq` and `+json-seq`) and `multipart/mixed` or `multipart/x-mixed-replace` responses now use the streaming text viewer, including finite responses. Other multipart subtypes, such as `multipart/form-data`, retain the buffered viewer. Nested parts use hierarchical labels, such as Part 1.1.
+
+  The streaming viewer shows received bytes and offers Copy text and Download text for the displayed transcript, including after completion, cancellation, or a framing error. These exports contain formatted records and multipart labels/base64 rather than the original wire body. Streams retain at most 16 MiB of displayed text and reject records/parts above 8 MiB; preview plugins and virtualized raw-body rendering remain available only in the buffered viewer. HTTP status, headers, and declared Content-Length remain visible.
+
+- [#10175](https://github.com/scalar/scalar/pull/10175): Support API Client UI translations through `localization.translations.apiClient`, including the client embedded in API Reference. Ship client translations for English, Russian, Spanish, French, German, Simplified Chinese, Arabic, and Portuguese to match API Reference. Preserve English fallbacks across package providers and react to locale, direction, and translation updates.
+- [#10191](https://github.com/scalar/scalar/pull/10191): Support OpenAPI 3.2 OAuth device authorization with verification codes, cancellable token polling, stored credentials, and OAuth metadata discovery. Add mock device authorization and approval endpoints with pending, denial, expiry, and polling backoff responses.
+
+  Use consistent form-encoded Basic credentials and environment substitution across OAuth token and refresh flows. Allow HTTP metadata and verification links on local development hosts and reserved test domains, coerce discovery fields consistently, and report device-code expiry clearly.
+
+- [#10178](https://github.com/scalar/scalar/pull/10178): Support OpenAPI 3.2 streaming item schemas in the workspace store, request body examples, and API reference schema views. Frame generated and structured examples as JSON Lines, JSON Sequence, or server-sent events while preserving explicit wire-format strings.
+
+  Preserve generated falsy request examples (`0`, `false`, and empty strings) for non-streaming bodies as well.
+
+  Use cURL `--data-binary` for supported streaming media types, making framed body handling explicit. Authored arrays and objects are framed as stream records; authored wire-format strings remain unchanged. SSE records with no valid fields are safely omitted with one console warning per serialization call reporting the omitted count, including when all records are omitted.
+
+### Patch Changes
+
+- [#10177](https://github.com/scalar/scalar/pull/10177): Use OpenAPI 3.2 schemas throughout workspace-store consumers, stories, tests, and type generation. Update the app editor to offer OpenAPI 3.2 validation and completion while continuing to accept existing 3.1 documents.
+
+  Preserve OpenAPI 3.2 fields in the loose workspace schema, including tag hierarchy, streaming media types, nested encoding, additional operations, and OAuth device authorization.
+
+  The editor intentionally offers the 3.2 field set to documents declaring 3.1 as well; it does not flag 3.2-only fields solely because the declared version is 3.1. This does not certify conformance to the declared version or automatically update it. Before using 3.2-only fields, migrate and explicitly declare OpenAPI 3.2, and verify support in other validators and generators. Remove the unused 3.1 loose-schema generator to prevent schema drift.
+
+  Migration: the OpenAPI 3.1 loose-schema generator (`@scalar/workspace-store/schemas/v3.1/openapi`, published through the wildcard as `@scalar/workspace-store/schemas/v3.1/openapi/index`) and its `@scalar/workspace-store/schemas/v3.1/openapi/reference` helpers have been removed. Import the generator from `@scalar/workspace-store/schemas/v3.2/openapi/index` and the reference helpers from `@scalar/workspace-store/schemas/v3.2/openapi/reference` instead. The `./schemas/*` wildcard and the 3.1 strict-schema exports remain available; the explicit 3.2 strict-schema exports are additive. Locally generated types now use the `OpenAPIV3_2` namespace instead of `OpenAPIV3_1`.
+
+  Inline the editor path-extension reference so Monaco retains the leading-slash path pattern and does not report valid paths as unknown properties.
+
+  Document ingestion continues to upgrade only to OpenAPI 3.1, so existing inline XML bodies without `xml.name` remain loadable. This schema migration does not opt consumers into the stricter OpenAPI 3.2 XML upgrade.
+
+- [#10284](https://github.com/scalar/scalar/pull/10284): Load the API client modal on its first open request instead of downloading it when the API reference or agent chat mounts. Preserve the requested operation, example, and request-body variant while loading. Show loading feedback and retry guidance if the request editor cannot be downloaded.
+- [#10281](https://github.com/scalar/scalar/pull/10281): Fix duplicate rows and lost focus when entering request headers, cookies, and query parameters, and remove unchecked parameters cleanly.
+- [#10208](https://github.com/scalar/scalar/pull/10208): Share OpenAPI 3.2 example-value selection across request bodies, response examples, and code snippets. Preserve serialized payloads verbatim, serialize structured JSON strings correctly, retain falsy values, and replace original example sources after body edits. Keep dataValue and serializedValue during document ingestion.
+
+  Editing a request body, including form fields, discards its authored `externalValue` URL and replaces it with the edited inline value in the workspace and exported API description. Rendering or focusing a form field preserves the external source.
+
+  Form editors prefer structured `dataValue` when both example fields exist, while raw editors, requests, and code snippets preserve `serializedValue` as wire text. Structured examples now affect generated request payloads and snippets; XML remains raw-only in the request editor.
+
+- [#10303](https://github.com/scalar/scalar/pull/10303): Preserve parameter edits when another parameter changes, including parameters displaying downloaded examples. Keep downloaded values out of the document until explicitly edited, and use examples and defaults from resolved schema references when building requests.
+
+## 3.19.3
+
+### Patch Changes
+
+- [#10255](https://github.com/scalar/scalar/pull/10255): fix(api-client): auto-enable optional header/query/cookie rows that have a pre-populated value
+
+  Optional parameters (headers, query params, cookies) start disabled by default. When the API
+  description provides a default or enum value for such a parameter (e.g. `x-scenario-id` with an enum),
+  the row was rendered with its checkbox unchecked even though a value was already selected — so the
+  parameter was silently dropped from every request until the user manually checked it.
+
+  The fix auto-enables any row that is only disabled by default (no explicit `x-disabled: true`) and
+  already carries a non-empty value, mirroring the existing behaviour when a user types a value into
+  a previously-empty row.
+
+  Use the same enablement rules for the parameter editor, outgoing requests, and generated code snippets.
+
+- [#10240](https://github.com/scalar/scalar/pull/10240): Load external examples on demand when their selected preview is visible or Test Request opens, instead of downloading every payload while loading the API description. Share and cache downloads, preserve relative URL origins, and show loading and retry states while preventing incomplete requests from being sent.
+
 ## 3.19.2
 
 ## 3.19.1

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

@@ -4,9 +4,9 @@ type __VLS_Props = {
     isEditable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    change: (value: "head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "trace") => any;
+    change: (value: "head" | "delete" | "query" | "get" | "options" | "patch" | "post" | "put" | "trace") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: "head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "trace") => any) | undefined;
+    onChange?: ((value: "head" | "delete" | "query" | "get" | "options" | "patch" | "post" | "put" | "trace") => any) | undefined;
 }>, {
     isSquare: boolean;
     isEditable: boolean;

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

@@ -1,6 +1,8 @@
 declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         filters?: T[];
+        /** Localized labels keyed by stable filter IDs. */
+        labels?: Partial<Record<T, string>>;
         /** IDs for the currently available sections. */
         filterIds?: Partial<Record<T, string>>;
     } & {

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilter.vue"],"names":[],"mappings":"AAwKA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAkNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;kBAhN5C,CAAC,EAAE;QACb,gDAAgD;oBACpC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;;qBAkC3B,CAAC;;;KA4K6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SectionFilter.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilter.vue"],"names":[],"mappings":"AA4LA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA8NO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;kBA5N5C,CAAC,EAAE;QACb,mDAAmD;iBAC1C,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnC,gDAAgD;oBACpC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;;qBAyC3B,CAAC;;;KA+K6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/SectionFilter.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import SectionFilter_vue_vue_type_script_setup_true_lang_default from "./SectionFilter.vue.script.js";
 /* empty css                            */
 //#region src/components/SectionFilter.vue
-var SectionFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ac788106"]]);
+var SectionFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-48147b15"]]);
 //#endregion
 export { SectionFilter_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  filters = [],\n  filterIds,\n  labels,\n} = defineProps<{\n  filters?: T[]\n  /** Localized labels keyed by stable filter IDs. */\n  labels?: Partial<Record<T, string>>\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\nconst { direction } = useLocalization()\n\n/** Keyboard navigation */\nconst navigateSection = (arrow: 'left' | 'right'): void => {\n  // Flex rows reverse in RTL, so the visual arrow direction reverses the index step.\n  const offset =\n    (arrow === 'left' ? -1 : 1) * (direction.value === 'rtl' ? -1 : 1)\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ms-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('left')\"\n    @keydown.right=\"navigateSection('right')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ labels?.[filter] ?? filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden me-1.5\">{{\n          model ? (labels?.[model] ?? model) : model\n        }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.fade-request-section-content:dir(rtl) {\n  background: linear-gradient(\n    to right,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-inline-end: 39px;\n  padding-inline-start: 24px;\n  position: absolute;\n  inset-inline-end: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}

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

@@ -1,14 +1,16 @@
+import { useLocalization } from "../v2/features/localization/index.js";
 import SectionFilterButton_default from "./SectionFilterButton.vue.js";
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, openBlock, ref, renderList, toDisplayString, unref, useModel, withCtx, withKeys } from "vue";
 import { ScalarIcon } from "@scalar/components/icon";
 //#region src/components/SectionFilter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex" };
-var _hoisted_2 = { class: "filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center" };
-var _hoisted_3 = { class: "context-bar-group-hover:hidden mr-1.5" };
+var _hoisted_2 = { class: "filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center" };
+var _hoisted_3 = { class: "context-bar-group-hover:hidden me-1.5" };
 var SectionFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SectionFilter",
 	props: /*@__PURE__*/ mergeModels({
 		filters: { default: () => [] },
+		labels: {},
 		filterIds: {}
 	}, {
 		"modelValue": {},
@@ -18,9 +20,10 @@ var SectionFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
 		const tablist = ref();
+		const { direction } = useLocalization();
 		/** Keyboard navigation */
-		const navigateSection = (direction) => {
-			const offset = direction === "prev" ? -1 : 1;
+		const navigateSection = (arrow) => {
+			const offset = (arrow === "left" ? -1 : 1) * (direction.value === "rtl" ? -1 : 1);
 			const index = model.value ? __props.filters.indexOf(model.value) : 0;
 			const length = __props.filters.length;
 			const newIndex = (index + offset + length) % length;
@@ -36,9 +39,9 @@ var SectionFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return openBlock(), createElementBlock("div", {
 				ref_key: "tablist",
 				ref: tablist,
-				class: "filter-hover context-bar-group ml-auto hidden lg:flex",
+				class: "filter-hover context-bar-group ms-auto hidden lg:flex",
 				role: "tablist",
-				onKeydown: [_cache[0] || (_cache[0] = withKeys(($event) => navigateSection("prev"), ["left"])), _cache[1] || (_cache[1] = withKeys(($event) => navigateSection("next"), ["right"]))]
+				onKeydown: [_cache[0] || (_cache[0] = withKeys(($event) => navigateSection("left"), ["left"])), _cache[1] || (_cache[1] = withKeys(($event) => navigateSection("right"), ["right"]))]
 			}, [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter) => {
 				return openBlock(), createBlock(SectionFilterButton_default, {
 					key: filter,
@@ -48,14 +51,14 @@ var SectionFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					selected: model.value === filter,
 					onClick: ($event) => model.value = filter
 				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(filter), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.labels?.[filter] ?? filter), 1)]),
 					_: 2
 				}, 1032, [
 					"controls",
 					"selected",
 					"onClick"
 				]);
-			}), 128)), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(model.value), 1), createVNode(unref(ScalarIcon), {
+			}), 128)), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(model.value ? __props.labels?.[model.value] ?? model.value : model.value), 1), createVNode(unref(ScalarIcon), {
 				icon: "FilterList",
 				size: "md",
 				thickness: "2"

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ,SAAc,SAAA,YAAC;EAE7B,MAAM,UAAU,IAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,KAAK,IAAI;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;GAC7C,MAAM,QAAQ,QAAA,QAAQ;GAGtB,eAAe;IACb,IAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,8BACF;KACA,IAAI,gBACF,eAAe,MAAM;IAEzB;GACF,CAAC;EACH;;uBAGE,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,MAAA,GAAA,CAAA,MAAA,CAAA,IAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,MAAA,GAAA,CAAA,OAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,IAAA,GAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,MAAM,GAAA,CAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,KAAK,GAAA,CAAA,GAC5D,YAGkB,MAAA,UAAA,GAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}
+{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  filters = [],\n  filterIds,\n  labels,\n} = defineProps<{\n  filters?: T[]\n  /** Localized labels keyed by stable filter IDs. */\n  labels?: Partial<Record<T, string>>\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\nconst { direction } = useLocalization()\n\n/** Keyboard navigation */\nconst navigateSection = (arrow: 'left' | 'right'): void => {\n  // Flex rows reverse in RTL, so the visual arrow direction reverses the index step.\n  const offset =\n    (arrow === 'left' ? -1 : 1) * (direction.value === 'rtl' ? -1 : 1)\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ms-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('left')\"\n    @keydown.right=\"navigateSection('right')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ labels?.[filter] ?? filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden me-1.5\">{{\n          model ? (labels?.[model] ?? model) : model\n        }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.fade-request-section-content:dir(rtl) {\n  background: linear-gradient(\n    to right,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-inline-end: 39px;\n  padding-inline-start: 24px;\n  position: absolute;\n  inset-inline-end: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAc,SAAA,YAAC;EAE7B,MAAM,UAAU,IAAoB;EACpC,MAAM,EAAE,cAAc,gBAAgB;;EAGtC,MAAM,mBAAmB,UAAkC;GAEzD,MAAM,UACH,UAAU,SAAS,KAAK,MAAM,UAAU,UAAU,QAAQ,KAAK;GAClE,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,KAAK,IAAI;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;GAC7C,MAAM,QAAQ,QAAA,QAAQ;GAGtB,eAAe;IACb,IAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,8BACF;KACA,IAAI,gBACF,eAAe,MAAM;IAEzB;GACF,CAAC;EACH;;uBAGE,mBA6BM,OAAA;aA5BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,MAAA,GAAA,CAAA,MAAA,CAAA,IAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,GAAA,CAAA,OAAA,CAAA,EAAA;OAC/B,mBAsBM,OAtBN,YAsBM,EAAA,UAAA,IAAA,GApBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACgB,CAAA,gBAAA,gBAA7B,QAAA,SAAS,WAAW,MAAM,GAAA,CAAA,CAAA,CAAA;;;;;;;cAE/B,mBASM,OATN,YASM,CAPJ,mBAES,QAFT,YAES,gBADP,MAAA,QAAS,QAAA,SAAS,MAAA,UAAU,MAAA,QAAS,MAAA,KAAK,GAAA,CAAA,GAE5C,YAGkB,MAAA,UAAA,GAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}

package/dist/components/Server/ServerVariablesSelect.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"names":[],"mappings":"AA6DA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAC;AAiHF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ServerVariablesSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"names":[],"mappings":"AAmEA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAC;AAqHF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/Server/ServerVariablesSelect.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesSelect.vue.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\">\n          Selected:\n        </span>\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        weight=\"bold\"\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ServerVariablesSelect.vue.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\"\n          >{{ translate('apiClient.serverVariablesSelect.selected') }}</span\n        >\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":""}

package/dist/components/Server/ServerVariablesSelect.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../v2/features/localization/index.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarListbox } from "@scalar/components/listbox";
@@ -18,6 +19,7 @@ var ServerVariablesSelect_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const options = computed(() => props.enum.map((s) => ({
 			id: s,
 			label: s
@@ -37,9 +39,9 @@ var ServerVariablesSelect_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 					class: "group/button h-8 gap-1.5 p-1.5 text-base font-normal",
 					variant: "ghost"
 				}, {
-					default: withCtx(() => [createElementVNode("span", { class: normalizeClass({ "text-c-1": __props.value }) }, [__props.value ? (openBlock(), createElementBlock("span", _hoisted_1, " Selected: ")) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(__props.value || "Select value"), 1)], 2), createVNode(unref(ScalarIconCaretDown), {
-						weight: "bold",
-						class: "mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180"
+					default: withCtx(() => [createElementVNode("span", { class: normalizeClass({ "text-c-1": __props.value }) }, [__props.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(translate)("apiClient.serverVariablesSelect.selected")), 1)) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(__props.value || "Select value"), 1)], 2), createVNode(unref(ScalarIconCaretDown), {
+						class: "mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180",
+						weight: "bold"
 					})]),
 					_: 1
 				}, 8, ["aria-controls"])]),

package/dist/components/Server/ServerVariablesSelect.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesSelect.vue.script.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\">\n          Selected:\n        </span>\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        weight=\"bold\"\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,UAAU,eACd,MAAM,KAAK,KAAK,OAAO;GAAE,IAAI;GAAG,OAAO;EAAE,EAAE,CAC7C;EAEA,MAAM,WAAW,SAA0C;GACzD,WAAW,QAAQ,MAAM,MAAM,QAAQ,IAAI,OAAO,MAAM,KAAK;GAC7D,MAAM,QAA8B,KAAK,UAAU,KAAK,MAAM,EAAE;EAClE,CAAC;;uBAGC,YAmBgB,MAAA,aAAA,GAAA;gBAlBL,SAAA;0EAAQ,QAAA;IAChB,SAAS,QAAA;;2BAgBK,CAff,YAee,MAAA,YAAA,GAAA;KAdZ,iBAAe,QAAA;KAChB,OAAM;KACN,SAAQ;;4BAQD,CAPP,mBAOO,QAAA,EAPA,OAAK,eAAA,EAAA,YAAgB,QAAA,MAAK,CAAA,EAAA,GAAA,CAEvB,QAAA,SAAA,UAAA,GADR,mBAIO,QAJP,YAEkB,aAElB,KAAA,mBAAA,IAAA,IAAA,GAAA,gBAAO,MACP,gBAAG,QAAA,SAAK,cAAA,GAAA,CAAA,CAAA,GAAA,CAAA,GAEV,YAEmG,MAAA,mBAAA,GAAA;MADjG,QAAO;MACP,OAAM"}
+{"version":3,"file":"ServerVariablesSelect.vue.script.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\"\n          >{{ translate('apiClient.serverVariablesSelect.selected') }}</span\n        >\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,UAAU,eACd,MAAM,KAAK,KAAK,OAAO;GAAE,IAAI;GAAG,OAAO;EAAE,EAAE,CAC7C;EAEA,MAAM,WAAW,SAA0C;GACzD,WAAW,QAAQ,MAAM,MAAM,QAAQ,IAAI,OAAO,MAAM,KAAK;GAC7D,MAAM,QAA8B,KAAK,UAAU,KAAK,MAAM,EAAE;EAClE,CAAC;;uBAGC,YAmBgB,MAAA,aAAA,GAAA;gBAlBL,SAAA;0EAAQ,QAAA;IAChB,SAAS,QAAA;;2BAgBK,CAff,YAee,MAAA,YAAA,GAAA;KAdZ,iBAAe,QAAA;KAChB,OAAM;KACN,SAAQ;;4BAQD,CAPP,mBAOO,QAAA,EAPA,OAAK,eAAA,EAAA,YAAgB,QAAA,MAAK,CAAA,EAAA,GAAA,CAEvB,QAAA,SAAA,UAAA,GADR,mBAIC,QAJD,YAIC,gBADK,MAAA,SAAA,CAAS,CAAA,0CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,gBACd,MACD,gBAAG,QAAA,SAAK,cAAA,GAAA,CAAA,CAAA,GAAA,CAAA,GAEV,YAEkB,MAAA,mBAAA,GAAA;MADhB,OAAM;MACN,QAAO"}

package/dist/components/Server/ServerVariablesTextbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesTextbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Server/ServerVariablesTextbox.vue"],"names":[],"mappings":"AAgCA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAC;AAoDF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ServerVariablesTextbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Server/ServerVariablesTextbox.vue"],"names":[],"mappings":"AAsCA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAC;AAuDF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/Server/ServerVariablesTextbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesTextbox.vue.js","names":[],"sources":["../../../src/components/Server/ServerVariablesTextbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst model = computed<string>({\n  get: () => props.value,\n  set: (v) => emit('change', v),\n})\n</script>\n<template>\n  <input\n    v-model=\"model\"\n    v-bind=\"controls ? { ...$attrs, 'aria-controls': controls } : {}\"\n    autocomplete=\"off\"\n    class=\"text-c-1 w-full border-transparent px-1.5 py-1.25 -outline-offset-1 group-last/label:rounded-br-lg\"\n    placeholder=\"value\"\n    spellcheck=\"false\"\n    type=\"text\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ServerVariablesTextbox.vue.js","names":[],"sources":["../../../src/components/Server/ServerVariablesTextbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst model = computed<string>({\n  get: () => props.value,\n  set: (v) => emit('change', v),\n})\n</script>\n<template>\n  <input\n    v-model=\"model\"\n    v-bind=\"controls ? { ...$attrs, 'aria-controls': controls } : {}\"\n    autocomplete=\"off\"\n    class=\"text-c-1 w-full border-transparent px-1.5 py-1.25 -outline-offset-1 group-last/label:rounded-br-lg\"\n    :placeholder=\"translate('apiClient.serverVariablesTextbox.value')\"\n    spellcheck=\"false\"\n    type=\"text\" />\n</template>\n"],"mappings":""}

package/dist/components/Server/ServerVariablesTextbox.vue.script.js

@@ -1,5 +1,7 @@
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, vModelText, withDirectives } from "vue";
+import { useLocalization } from "../../v2/features/localization/index.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, unref, vModelText, withDirectives } from "vue";
 //#region src/components/Server/ServerVariablesTextbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["placeholder"];
 var ServerVariablesTextbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ServerVariablesTextbox",
 	props: {
@@ -10,6 +12,7 @@ var ServerVariablesTextbox_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const model = computed({
 			get: () => props.value,
 			set: (v) => emit("change", v)
@@ -21,10 +24,10 @@ var ServerVariablesTextbox_vue_vue_type_script_setup_true_lang_default = /*@__PU
 			} : {}, {
 				autocomplete: "off",
 				class: "text-c-1 w-full border-transparent px-1.5 py-1.25 -outline-offset-1 group-last/label:rounded-br-lg",
-				placeholder: "value",
+				placeholder: unref(translate)("apiClient.serverVariablesTextbox.value"),
 				spellcheck: "false",
 				type: "text"
-			}), null, 16)), [[vModelText, model.value]]);
+			}), null, 16, _hoisted_1)), [[vModelText, model.value]]);
 		};
 	}
 });

package/dist/components/Server/ServerVariablesTextbox.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesTextbox.vue.script.js","names":["$attrs"],"sources":["../../../src/components/Server/ServerVariablesTextbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst model = computed<string>({\n  get: () => props.value,\n  set: (v) => emit('change', v),\n})\n</script>\n<template>\n  <input\n    v-model=\"model\"\n    v-bind=\"controls ? { ...$attrs, 'aria-controls': controls } : {}\"\n    autocomplete=\"off\"\n    class=\"text-c-1 w-full border-transparent px-1.5 py-1.25 -outline-offset-1 group-last/label:rounded-br-lg\"\n    placeholder=\"value\"\n    spellcheck=\"false\"\n    type=\"text\" />\n</template>\n"],"mappings":";;;;;;;;;;EAGA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAiB;GAC7B,WAAW,MAAM;GACjB,MAAM,MAAM,KAAK,UAAU,CAAC;EAC9B,CAAC;;uCAGC,mBAOgB,SAPhB,WAOgB,EAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MANA,QAAA,QAAA,GACN,QAAA,WAAQ;IAAA,GAAQA,KAAAA;IAAM,iBAAmB,QAAA;GAAQ,IAAA,CAAA,GAAA;IACzD,cAAa;IACb,OAAM;IACN,aAAY;IACZ,YAAW;IACX,MAAK;iCANI,MAAA,KAAK,CAAA,CAAA"}
+{"version":3,"file":"ServerVariablesTextbox.vue.script.js","names":["$attrs"],"sources":["../../../src/components/Server/ServerVariablesTextbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst model = computed<string>({\n  get: () => props.value,\n  set: (v) => emit('change', v),\n})\n</script>\n<template>\n  <input\n    v-model=\"model\"\n    v-bind=\"controls ? { ...$attrs, 'aria-controls': controls } : {}\"\n    autocomplete=\"off\"\n    class=\"text-c-1 w-full border-transparent px-1.5 py-1.25 -outline-offset-1 group-last/label:rounded-br-lg\"\n    :placeholder=\"translate('apiClient.serverVariablesTextbox.value')\"\n    spellcheck=\"false\"\n    type=\"text\" />\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAIb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,QAAQ,SAAiB;GAC7B,WAAW,MAAM;GACjB,MAAM,MAAM,KAAK,UAAU,CAAC;EAC9B,CAAC;;uCAGC,mBAOgB,SAPhB,WAOgB,EAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MANA,QAAA,QAAA,GACN,QAAA,WAAQ;IAAA,GAAQA,KAAAA;IAAM,iBAAmB,QAAA;GAAQ,IAAA,CAAA,GAAA;IACzD,cAAa;IACb,OAAM;IACL,aAAa,MAAA,SAAA,CAAS,CAAA,wCAAA;IACvB,YAAW;IACX,MAAK;6CANI,MAAA,KAAK,CAAA,CAAA"}

package/dist/components/Sidebar/Actions/DeleteSidebarListElement.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteSidebarListElement.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Actions/DeleteSidebarListElement.vue"],"names":[],"mappings":"AA0CA,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC,CAAC;AAuFF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DeleteSidebarListElement.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Actions/DeleteSidebarListElement.vue"],"names":[],"mappings":"AAkDA,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC,CAAC;AAkGF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/Sidebar/Actions/DeleteSidebarListElement.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteSidebarListElement.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/DeleteSidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nconst props = defineProps<{\n  variableName: string\n  warningMessage: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst truncatedName = computed(() => {\n  if (props.variableName.length > 18) {\n    return props.variableName.slice(0, 18) + '…'\n  }\n  return props.variableName\n})\n</script>\n<template>\n  <SidebarListElementForm\n    danger\n    :label=\"`Delete ${truncatedName}`\"\n    @cancel=\"emit('close')\"\n    @submit=\"emit('delete')\">\n    <p\n      v-if=\"warningMessage\"\n      class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ warningMessage }}\n    </p>\n  </SidebarListElementForm>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DeleteSidebarListElement.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/DeleteSidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{\n  variableName: string\n  warningMessage: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst truncatedName = computed(() => {\n  if (props.variableName.length > 18) {\n    return props.variableName.slice(0, 18) + '…'\n  }\n  return props.variableName\n})\n</script>\n<template>\n  <SidebarListElementForm\n    danger\n    :label=\"\n      translate('apiClient.deleteSidebarListElement.delete', {\n        name: truncatedName,\n      })\n    \"\n    @cancel=\"emit('close')\"\n    @submit=\"emit('delete')\">\n    <p\n      v-if=\"warningMessage\"\n      class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ warningMessage }}\n    </p>\n  </SidebarListElementForm>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/Actions/DeleteSidebarListElement.vue.script.js

@@ -1,5 +1,6 @@
+import { useLocalization } from "../../../v2/features/localization/index.js";
 import SidebarListElementForm_default from "./SidebarListElementForm.vue.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/Sidebar/Actions/DeleteSidebarListElement.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -15,6 +16,7 @@ var DeleteSidebarListElement_vue_vue_type_script_setup_true_lang_default = /*@__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const truncatedName = computed(() => {
 			if (props.variableName.length > 18) return props.variableName.slice(0, 18) + "…";
 			return props.variableName;
@@ -22,7 +24,7 @@ var DeleteSidebarListElement_vue_vue_type_script_setup_true_lang_default = /*@__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(SidebarListElementForm_default, {
 				danger: "",
-				label: `Delete ${truncatedName.value}`,
+				label: unref(translate)("apiClient.deleteSidebarListElement.delete", { name: truncatedName.value }),
 				onCancel: _cache[0] || (_cache[0] = ($event) => emit("close")),
 				onSubmit: _cache[1] || (_cache[1] = ($event) => emit("delete"))
 			}, {

package/dist/components/Sidebar/Actions/DeleteSidebarListElement.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteSidebarListElement.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/DeleteSidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nconst props = defineProps<{\n  variableName: string\n  warningMessage: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst truncatedName = computed(() => {\n  if (props.variableName.length > 18) {\n    return props.variableName.slice(0, 18) + '…'\n  }\n  return props.variableName\n})\n</script>\n<template>\n  <SidebarListElementForm\n    danger\n    :label=\"`Delete ${truncatedName}`\"\n    @cancel=\"emit('close')\"\n    @submit=\"emit('delete')\">\n    <p\n      v-if=\"warningMessage\"\n      class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ warningMessage }}\n    </p>\n  </SidebarListElementForm>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAKb,MAAM,gBAAgB,eAAe;GACnC,IAAI,MAAM,aAAa,SAAS,IAC9B,OAAO,MAAM,aAAa,MAAM,GAAG,EAAE,IAAI;GAE3C,OAAO,MAAM;EACf,CAAC;;uBAGC,YAUyB,gCAAA;IATvB,QAAA;IACC,OAAK,UAAY,cAAA;IACjB,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAKT,CAHI,QAAA,kBAAA,UAAA,GADR,mBAII,KAJJ,YAII,gBADC,QAAA,cAAc,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"DeleteSidebarListElement.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/DeleteSidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst props = defineProps<{\n  variableName: string\n  warningMessage: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'delete'): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst truncatedName = computed(() => {\n  if (props.variableName.length > 18) {\n    return props.variableName.slice(0, 18) + '…'\n  }\n  return props.variableName\n})\n</script>\n<template>\n  <SidebarListElementForm\n    danger\n    :label=\"\n      translate('apiClient.deleteSidebarListElement.delete', {\n        name: truncatedName,\n      })\n    \"\n    @cancel=\"emit('close')\"\n    @submit=\"emit('delete')\">\n    <p\n      v-if=\"warningMessage\"\n      class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ warningMessage }}\n    </p>\n  </SidebarListElementForm>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,gBAAgB,eAAe;GACnC,IAAI,MAAM,aAAa,SAAS,IAC9B,OAAO,MAAM,aAAa,MAAM,GAAG,EAAE,IAAI;GAE3C,OAAO,MAAM;EACf,CAAC;;uBAGC,YAcyB,gCAAA;IAbvB,QAAA;IACC,OAAc,MAAA,SAAA,CAAS,CAAA,6CAAA,EAAA,MAA8D,cAAA,MAAA,CAAA;IAKrF,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAKT,CAHI,QAAA,kBAAA,UAAA,GADR,mBAII,KAJJ,YAII,gBADC,QAAA,cAAc,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarListElementForm.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"names":[],"mappings":"AAyCA,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAqGF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;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":"SidebarListElementForm.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"names":[],"mappings":"AA+CA,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAyGF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;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/Sidebar/Actions/SidebarListElementForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarListElementForm.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SidebarListElementForm.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        {{ translate('apiClient.sidebarListElementForm.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../v2/features/localization/index.js";
 import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 //#region src/components/Sidebar/Actions/SidebarListElementForm.vue?vue&type=script&setup=true&lang.ts
@@ -11,6 +12,7 @@ var SidebarListElementForm_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	emits: ["cancel", "submit"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("form", {
 				class: "flex flex-col gap-4 text-base",
@@ -21,7 +23,7 @@ var SidebarListElementForm_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				variant: "outlined",
 				onClick: _cache[0] || (_cache[0] = ($event) => emit("cancel"))
 			}, {
-				default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.sidebarListElementForm.cancel")), 1)]),
 				_: 1
 			}), createVNode(unref(ScalarButton), {
 				"data-testid": "sidebar-list-element-form-submit-button",

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarListElementForm.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;EAQA,MAAM,OAAO;;uBAMX,mBAoBO,QAAA;IAnBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,QAAA,GAAA,CAAA,SAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,SAAA,GACR,mBAeM,OAfN,YAeM,CAdJ,YAMe,MAAA,YAAA,GAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF0B,YAE1B,EAAA,CAAA,EAAA,CAAA;;OACA,YAMe,MAAA,YAAA,GAAA;IALb,eAAY;IACZ,MAAK;IACL,MAAK;IACJ,SAAS,QAAA,SAAM,WAAA;;2BACK,CAAA,gBAAA,gBAAlB,QAAA,SAAK,MAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"SidebarListElementForm.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        {{ translate('apiClient.sidebarListElementForm.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAUA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;;uBAGpC,mBAoBO,QAAA;IAnBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,QAAA,GAAA,CAAA,SAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,SAAA,GACR,mBAeM,OAfN,YAeM,CAdJ,YAMe,MAAA,YAAA,GAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;2BAC8C,CAAA,gBAAA,gBAAvD,MAAA,SAAA,CAAS,CAAA,yCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;OAEd,YAMe,MAAA,YAAA,GAAA;IALb,eAAY;IACZ,MAAK;IACL,MAAK;IACJ,SAAS,QAAA,SAAM,WAAA;;2BACK,CAAA,gBAAA,gBAAlB,QAAA,SAAK,MAAA,GAAA,CAAA,CAAA,CAAA"}