@scalar/api-client 3.19.3 → 3.21.0

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @scalar/api-client
 
+## 3.21.0
+
+### Minor Changes
+
+- [#10189](https://github.com/scalar/scalar/pull/10189): Support OpenAPI 3.2 `in: querystring` parameters, including content-based serialization, editing the entire query string, schema rendering, and generated request URLs.
+
+  Non-form whole-query content, including JSON delimiters, is percent-encoded in request URLs and code samples. Use an example with `serializedValue` on the parameter itself for URI-ready query content that must retain its existing encoding.
+
+  Preserve the encoding of named query values when they coexist with whole-query content in generated code samples, while encoding query authentication values once.
+
+  Explain why the whole-query editor disables adding named parameters. Existing named parameters follow the whole-query value, preserving duplicate keys for the server to interpret.
+
+- [#10186](https://github.com/scalar/scalar/pull/10186): Support OpenAPI 3.2 additionalOperations in operation storage, navigation, documentation, callbacks, and the API client. Preserve custom HTTP method spelling when displaying and sending requests and generating code samples.
+
+  Traversed operation and webhook methods now use the exported `OperationMethod` type, which accepts custom strings while retaining known-method editor completion. Consumers must handle unknown methods; this open type cannot provide exhaustive checking over the fixed HTTP method set. Unknown method presentation uses `colorClass` and `colorVar`, matching known methods. Preserve uppercase and mixed-case additional operation names consistently.
+
+### Patch Changes
+
+- [#10186](https://github.com/scalar/scalar/pull/10186): Show a clear error when a request uses a Fetch-forbidden method (CONNECT, TRACE, or TRACK), including methods changed by pre-request scripts, instead of throwing while building the request.
+- [#10186](https://github.com/scalar/scalar/pull/10186): Include the current document-defined custom method in the request method picker and preserve its spelling when selected.
+
+  Keep QUERY operation chunk names aligned with their references when additional operations are supported.
+
+- [#10313](https://github.com/scalar/scalar/pull/10313): Render data table rows inside a `tbody` so server-rendered tables hydrate. The HTML parser inserts a `tbody` around rows that sit directly under a `table`, so markup rendered without one handed the client a `tbody` where the component tree held the row, and the table — an auth form, for example — was discarded and rebuilt after hydration.
+- [#10186](https://github.com/scalar/scalar/pull/10186): Preserve request bodies for extension HTTP methods such as QUERY and PROPFIND in the browser client.
+- [#10322](https://github.com/scalar/scalar/pull/10322): Use OpenAPI 3.2 dataValue and serializedValue examples for named parameters in the editor, outgoing requests, and code samples. Preserve already serialized values without encoding them twice.
+
+  Optional parameters with `dataValue` or `serializedValue` examples are now enabled by default, matching legacy `value` examples. Explicitly disabled examples remain disabled.
+
+  Parameter-level `serializedValue` examples remain editable as raw wire text, including parameter names and percent encoding (for example, `term=hello` rather than `hello`). Media-level cookie examples are percent-encoded when sent, matching generated snippets. Generating snippets no longer modifies the input cookies.
+
+- [#10189](https://github.com/scalar/scalar/pull/10189): Translate the whole-query editor label and explanation in all supported API Client locales.
+- [#10310](https://github.com/scalar/scalar/pull/10310): Connect SDK code samples to named request body examples using optional example and contentType fields. Keep the example switcher available for static samples and use the selected request example in API client snippets. Display unavailable linked samples as a localized status message in all supported languages.
+
+## 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

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: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: "head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "trace") => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
 }>, {
     isSquare: boolean;
     isEditable: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"names":[],"mappings":"AAyGA,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAgIJ,QAAA,MAAM,YAAY;;;;;cAnIH,OAAO;gBAEL,OAAO;6EAqItB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"names":[],"mappings":"AAoHA,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AA6IJ,QAAA,MAAM,YAAY;;;;;cAhJH,OAAO;gBAEL,OAAO;6EAkJtB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/HttpMethod/HttpMethod.vue.js

@@ -2,7 +2,7 @@ import HttpMethod_vue_vue_type_script_setup_true_lang_default from "./HttpMethod
 /* empty css                         */
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 //#region src/components/HttpMethod/HttpMethod.vue
-var HttpMethod_default = /*#__PURE__*/ _plugin_vue_export_helper_default(HttpMethod_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-86e2b3ea"]]);
+var HttpMethod_default = /*#__PURE__*/ _plugin_vue_export_helper_default(HttpMethod_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e7883636"]]);
 //#endregion
 export { HttpMethod_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: string): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = computed(() => {\n  const options = objectEntries(REQUEST_METHODS).map(([id]) => ({\n    id: String(id),\n    label: id.toUpperCase(),\n    color: getHttpMethodInfo(id).colorClass,\n  }))\n\n  // Keep document-defined methods selectable without changing their spelling.\n  if (!options.some(({ id }) => id === props.method)) {\n    options.push({\n      id: props.method,\n      label: props.method,\n      color: method.value.colorClass,\n    })\n  }\n\n  return options\n})\nconst selectedMethod = computed({\n  get: () => methodOptions.value.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":""}

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

@@ -22,13 +22,21 @@ var HttpMethod_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const props = __props;
 		const emit = __emit;
 		const method = computed(() => getHttpMethodInfo(props.method));
-		const methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({
-			id,
-			label: id.toUpperCase(),
-			color: getHttpMethodInfo(id).colorClass
-		}));
+		const methodOptions = computed(() => {
+			const options = objectEntries(REQUEST_METHODS).map(([id]) => ({
+				id: String(id),
+				label: id.toUpperCase(),
+				color: getHttpMethodInfo(id).colorClass
+			}));
+			if (!options.some(({ id }) => id === props.method)) options.push({
+				id: props.method,
+				label: props.method,
+				color: method.value.colorClass
+			});
+			return options;
+		});
 		const selectedMethod = computed({
-			get: () => methodOptions.find(({ id }) => id === props.method),
+			get: () => methodOptions.value.find(({ id }) => id === props.method),
 			set: (opt) => opt?.id && emit("change", opt.id)
 		});
 		const variants = cva({
@@ -51,7 +59,7 @@ var HttpMethod_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				modelValue: selectedMethod.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedMethod.value = $event),
 				class: "font-code scalar-client mt-1 text-sm",
-				options: unref(methodOptions)
+				options: methodOptions.value
 			}, {
 				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["h-full", { "pointer-events-none": !__props.isEditable }]) }, [createElementVNode("button", {
 					class: normalizeClass(["relative h-full", unref(cx)(unref(variants)({

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

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,MAAM,CAAC;EAC7D,MAAM,gBAAgB,cAAc,eAAe,CAAC,CAAC,KAAK,CAAC,SAAS;GAClE;GACA,OAAO,GAAG,YAAY;GACtB,OAAO,kBAAkB,EAAE,CAAC,CAAC;EAC/B,EAAE;EACF,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,EAAE,SAAS,OAAO,MAAM,MAAM;GAC7D,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,EAAE;EAChD,CAAC;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;IACT;IACA,YAAY;KACV,MAAM;KACN,OAAO;IACT;GACF;EACF,CAAC;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,KAAK;;UAKzC,QAAA,cAAA,UAAA,GADR,YAegB,MAAA,aAAA,GAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,MAAA,aAAA;;2BAUJ,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,WAAU,CAAA,CAAA,EAAA,GAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;KAAU,CAAA,GAAK,OAAA,MAAO,UAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,KAAS,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;IAAU,CAAA,GAAK,OAAA,MAAO,UAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,KAAK,GAAA,CAAA"}
+{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: string): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = computed(() => {\n  const options = objectEntries(REQUEST_METHODS).map(([id]) => ({\n    id: String(id),\n    label: id.toUpperCase(),\n    color: getHttpMethodInfo(id).colorClass,\n  }))\n\n  // Keep document-defined methods selectable without changing their spelling.\n  if (!options.some(({ id }) => id === props.method)) {\n    options.push({\n      id: props.method,\n      label: props.method,\n      color: method.value.colorClass,\n    })\n  }\n\n  return options\n})\nconst selectedMethod = computed({\n  get: () => methodOptions.value.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,MAAM,CAAC;EAC7D,MAAM,gBAAgB,eAAe;GACnC,MAAM,UAAU,cAAc,eAAe,CAAC,CAAC,KAAK,CAAC,SAAS;IAC5D,IAAI,OAAO,EAAE;IACb,OAAO,GAAG,YAAY;IACtB,OAAO,kBAAkB,EAAE,CAAC,CAAC;GAC/B,EAAE;GAGF,IAAI,CAAC,QAAQ,MAAM,EAAE,SAAS,OAAO,MAAM,MAAM,GAC/C,QAAQ,KAAK;IACX,IAAI,MAAM;IACV,OAAO,MAAM;IACb,OAAO,OAAO,MAAM;GACtB,CAAC;GAGH,OAAO;EACT,CAAC;EACD,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,MAAM,EAAE,SAAS,OAAO,MAAM,MAAM;GACnE,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,EAAE;EAChD,CAAC;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;IACT;IACA,YAAY;KACV,MAAM;KACN,OAAO;IACT;GACF;EACF,CAAC;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,KAAK;;UAKzC,QAAA,cAAA,UAAA,GADR,YAegB,MAAA,aAAA,GAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,cAAA;;2BAUJ,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,WAAU,CAAA,CAAA,EAAA,GAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;KAAU,CAAA,GAAK,OAAA,MAAO,UAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,KAAS,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;IAAU,CAAA,GAAK,OAAA,MAAO,UAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,KAAK,GAAA,CAAA"}

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",