@scalar/blocks 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @scalar/blocks
 
+## 0.4.2
+
+## 0.4.1
+
+### Patch Changes
+
+- [#10392](https://github.com/scalar/scalar/pull/10392): Give code samples, including virtualized large examples, a named keyboard-scrollable region and keep copy buttons descriptively named before hover or focus.
+- [#10369](https://github.com/scalar/scalar/pull/10369): fix: address a batch of screen reader and keyboard accessibility findings
+
+  Corrects programmatic semantics only, with no change to how anything renders:
+  the current sidebar item now reports `aria-current`, the single content type
+  readout leaves the tab order, collapsible sections no longer announce their
+  title twice, the password toggle reports its state through `aria-pressed`, the
+  two document download buttons get distinct accessible names, response status
+  tabs announce what each code means, and the client picker and its search field
+  get accessible names.
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/code-example/components/CodeExample.vue.d.ts

@@ -6,6 +6,13 @@ import type { ClientOptionGroup } from '../types';
 export type CodeExampleProps = {
     /** Localized status text shown when the selected example has no linked code sample. */
     codeSampleUnavailable?: string;
+    /**
+     * Localized purpose of the client picker. It opens the button's accessible name and the
+     * selected client's title is appended, so the name still contains the visible label.
+     */
+    clientPickerLabel?: string;
+    /** Localized accessible name for the search field inside the client picker. */
+    clientSearchLabel?: string;
     /**
      * Integration type: determines if the code sample is displayed in a client environment
      * or in an API reference environment.

package/dist/code-example/components/CodeExample.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeExample.vue.d.ts","sourceRoot":"","sources":["../../../src/code-example/components/CodeExample.vue"],"names":[],"mappings":"AAgoBA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAUvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAkBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,UAAU,CAAA;AAKjB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,EAAE,eAAe,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,MAAM,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B;;;OAGG;IACH,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;YAoCR,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EAirB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CodeExample.vue.d.ts","sourceRoot":"","sources":["../../../src/code-example/components/CodeExample.vue"],"names":[],"mappings":"AA0pBA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAUvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAkBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,UAAU,CAAA;AAKjB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,EAAE,eAAe,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,MAAM,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B;;;OAGG;IACH,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;YAsCR,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EAusB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/code-example/components/CodeExample.vue.js

@@ -2,7 +2,7 @@ import e from "./CodeExample.vue.script.js";
 /* empty css                          */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 //#region src/code-example/components/CodeExample.vue
-var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-f5cdd60f"]]);
+var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-62318392"]]);
 //#endregion
 export { n as default };
 

package/dist/code-example/components/CodeExample.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeExample.vue.js","names":[],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\n  /** Localized status text shown when the selected example has no linked code sample. */\n  codeSampleUnavailable?: string\n  /**\n   * Integration type: determines if the code sample is displayed in a client environment\n   * or in an API reference environment.\n   */\n  integration?: 'client' | 'reference'\n  /**\n   * List of all http clients formatted into option groups for the client selector\n   */\n  clientOptions: ClientOptionGroup[]\n  /**\n   * Pre-selected client, this will determine which client is initially selected in the dropdown.\n   * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n   *\n   * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n   * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n   *\n   * @defaults to a custom sample if one is available, otherwise shell/curl\n   */\n  selectedClient?: string\n  /**\n   * Which server from the spec to use for the code example\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * The selected content type from the requestBody.content, this will determine which examples are available\n   * as well as the content type of the code example\n   *\n   * @defaults to the first content type if not provided\n   */\n  selectedContentType?: string\n  /**\n   * Example name to use for resolving example values for parameters AND requestBody.\n   *\n   * This is the document-wide selection: it is honored only when this operation defines an example\n   * with the same key, so picking an example on one operation syncs the rest without blanking out\n   * operations that do not share that key.\n   *\n   * @example \"limited\"\n   * ```ts\n   * parameters: {\n   *   name: 'foobar',\n   *   in: 'query',\n   *   examples: {\n   *     limited: {\n   *       dataValue: 10,\n   *     }\n   *   }\n   * },\n   * body: {\n   *   content: {\n   *     'application/json': {\n   *       examples: {\n   *         limited: {\n   *           dataValue: { foo: 'bar' },\n   *         }\n   *       }\n   *     }\n   *   }\n   * }\n   *\n   * ```\n   */\n  selectedExample?: string\n  /**\n   * Event bus\n   */\n  eventBus: WorkspaceEventBus\n  /**\n   * The security schemes which are applicable to this operation\n   */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /**\n   * HTTP method of the operation\n   */\n  method: string\n  /**\n   * Path of the operation\n   */\n  path: string\n  /**\n   * De-referenced OpenAPI Operation object\n   */\n  operation: OperationObject\n  /**\n   * If true and there's no example, we will display a small card with the method and path only\n   */\n  fallback?: boolean\n  /**\n   * A method to generate the label of the block, should return an html string\n   */\n  generateLabel?: () => string\n  /**\n   * If true, render this as a webhook request example\n   */\n  isWebhook?: boolean\n  /**\n   * Workspace + document cookies\n   */\n  globalCookies?: XScalarCookie[]\n  /**\n   * When the request body schema uses oneOf/anyOf, use these selected variants\n   * for the example snippet (e.g. from the schema dropdowns in the API reference).\n   */\n  /** Originating OpenAPI version, used for XML mapping rules. */\n  openapiVersion?: string\n  requestBodyCompositionSelection?: Record<string, number>\n}\n\n/**\n * Request Example\n *\n * The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n *\n * @event workspace:update:selected-client - Emitted when the selected client changes\n * @event workspace:update:selected-example - Emitted when the selected example changes, so other operations can sync\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport {\n  getOperationExamples,\n  resolveOperationExamples,\n} from '@scalar/workspace-store/helpers/operation-examples'\nimport {\n  useExampleVisibility,\n  useExternalExamples,\n} from '@scalar/workspace-store/helpers/use-external-examples'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport { filterClientsByQuery } from '../helpers/filter-clients-by-query'\nimport { findClient } from '../helpers/find-client'\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport { getClients } from '../helpers/get-clients'\nimport { getCustomCodeSamples } from '../helpers/get-custom-code-samples'\nimport { getSecrets } from '../helpers/get-secrets'\nimport { operationToHar } from '../helpers/operation-to-har/operation-to-har'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '../types'\nimport ExamplePicker from './ExamplePicker.vue'\nimport HttpMethod from './HttpMethod.vue'\n\nconst {\n  integration,\n  codeSampleUnavailable = 'No code sample available for this example.',\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  selectedExample,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  openapiVersion,\n  requestBodyCompositionSelection,\n} = defineProps<CodeExampleProps>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted whenever the example key actually shown for this operation changes.\n   *\n   * This is the resolved local key (not the raw document-wide selection), so layouts that render\n   * the test-request button outside this component can open the client with the same example the\n   * snippet displays.\n   */\n  (e: 'update:exampleKey', value: string): void\n}>()\n\ndefineSlots<{\n  header: () => unknown\n  footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/** Grab the examples for the given content type */\nconst requestBodyExamples = computed(() => {\n  const content = getResolvedRef(operation.requestBody)?.content ?? {}\n  const contentType = selectedContentType || Object.keys(content)[0]\n  if (!contentType) return {}\n\n  const examples = content[contentType]?.examples ?? {}\n\n  return examples\n})\n\n/**\n * The example key actually shown for this operation.\n *\n * `selectedExample` is the document-wide selection that syncs across operations. We honor it only\n * when this operation actually defines that key, otherwise we keep the local example: a selection\n * on one operation should never blank out an operation that does not share the same example.\n */\nconst localExampleKey = ref('')\n\n/** Resolve the key to display, preferring the document-wide selection when this operation has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(requestBodyExamples.value)\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current local example when it is still valid, otherwise fall back to the first one\n  if (localExampleKey.value && keys.includes(localExampleKey.value)) {\n    return localExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Set the initial example from the document-wide selection, falling back to the first example\nonBeforeMount(() => {\n  localExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Follow the document-wide selection when it changes and this operation has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    localExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */\nwatch(\n  () => selectedContentType,\n  () => {\n    if (\n      !Object.keys(requestBodyExamples.value).includes(localExampleKey.value)\n    ) {\n      // Re-resolve so the new content type still follows the document-wide selection when it has\n      // that key, instead of always snapping back to the first example\n      localExampleKey.value = resolveExampleKey(selectedExample)\n    }\n  },\n)\n\n// Keep the parent informed of the resolved key so a test-request button rendered outside this\n// component (e.g. the classic layout header) opens the client with the example the snippet shows\nwatchEffect(() => {\n  emit('update:exampleKey', localExampleKey.value)\n})\n\n/** Select an example locally and sync the choice across the document */\nconst selectExample = (key: string) => {\n  localExampleKey.value = key\n  eventBus.emit('workspace:update:selected-example', key)\n}\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(\n    customCodeSamples.value.samples,\n    clientOptions,\n    customCodeSamples.value.label,\n  ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n  clients.value.reduce((total, group) => total + group.options.length, 0),\n)\n\n/** The locally selected client which would include code samples from this operation only */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n  const client = findClient(clients.value, newClient)\n  if (client) {\n    localSelectedClient.value = client\n  }\n})\n\nconst elem = ref<ComponentPublicInstance | null>(null)\nconst visible = useExampleVisibility(elem)\nconst externalExamples = useExternalExamples(\n  () =>\n    getOperationExamples(operation, localExampleKey.value, selectedContentType),\n  () => visible.value,\n)\nconst resolvedOperation = computed(() =>\n  resolveOperationExamples(\n    operation,\n    localExampleKey.value,\n    selectedContentType,\n    externalExamples.resolve,\n  ),\n)\n\n/** Keep the picker available because it also selects the example opened by Test Request. */\nconst showExamplePicker = computed(\n  () => Object.keys(requestBodyExamples.value).length > 1,\n)\n\n/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation: resolvedOperation.value,\n      method,\n      path,\n      example: localExampleKey.value,\n      openapiVersion,\n      requestBodyCompositionSelection,\n      // Only required parameters are shown in code examples; optional parameters\n      // are omitted unless explicitly enabled via `x-disabled: false`.\n      defaultDisabledParameters: true,\n    })\n  } catch (error) {\n    console.error('[webhookHar]', error)\n    return null\n  }\n})\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string | null>(() => {\n  if (isWebhook) {\n    return webhookHar.value?.postData?.text ?? ''\n  }\n\n  return generateCodeSnippet({\n    // Only required parameters are shown in code examples; optional parameters\n    // are omitted unless explicitly enabled via `x-disabled: false`.\n    defaultDisabledParameters: true,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value.samples,\n    operation: resolvedOperation.value,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\n    openapiVersion,\n    requestBodyCompositionSelection,\n  })\n})\n\n/** The language for the code block, used for syntax highlighting */\nconst codeBlockLanguage = computed(() => {\n  if (isWebhook) {\n    return webhookLanguage.value\n  }\n\n  return localSelectedClient.value?.lang\n})\n\n/** Determine the language for webhook content based on MIME type */\nconst webhookLanguage = computed<string>(() => {\n  if (!webhookHar.value?.postData) return 'json'\n\n  const contentType = webhookHar.value.postData.mimeType\n  if (contentType?.includes('json')) return 'json'\n  if (contentType?.includes('xml')) return 'xml'\n  if (contentType?.includes('yaml') || contentType?.includes('yml'))\n    return 'yaml'\n  if (contentType?.includes('text/plain')) return 'text'\n\n  return 'json'\n})\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n  // We need to freeze the ui to prevent scrolling as the clients change\n  if (elem.value) {\n    const unfreeze = freezeElement(elem.value.$el)\n    setTimeout(() => {\n      unfreeze()\n    }, 300)\n  }\n  // Update to the local example\n  localSelectedClient.value = option\n\n  // Sync the selection globally so other operations follow along. Custom samples\n  // sync too (keyed by language), so picking e.g. the Python SDK example here\n  // shows the Python example on every operation that ships one.\n  if (option) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n  () => (generatedCode.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n  <ScalarCard\n    v-if=\"\n      generatedCode === null || generatedCode || externalExamples.pending.value\n    \"\n    ref=\"elem\"\n    class=\"request-card dark-mode\">\n    <!-- Header -->\n    <ScalarCardHeader class=\"pr-2.5\">\n      <span class=\"sr-only\">Request Example for</span>\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method\"\n        :method=\"method\" />\n      <span\n        v-if=\"generateLabel\"\n        v-html=\"generateLabel()\" />\n      <slot name=\"header\" />\n      <!-- Client picker -->\n      <template\n        v-if=\"!isWebhook && clientCount\"\n        #actions>\n        <!-- Multiple clients: render a dropdown to switch between them -->\n        <ScalarCombobox\n          v-if=\"clientCount > 1\"\n          class=\"max-h-80\"\n          :filterFn=\"filterClientsByQuery\"\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n            data-testid=\"client-picker\"\n            variant=\"ghost\">\n            {{ localSelectedClient?.title }}\n            <ScalarIconCaretDown\n              class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n              weight=\"bold\" />\n          </ScalarButton>\n        </ScalarCombobox>\n        <!-- Single client: just show its label, no need for a dropdown -->\n        <span\n          v-else\n          class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n          data-testid=\"client-picker\">\n          {{ localSelectedClient?.title }}\n        </span>\n      </template>\n    </ScalarCardHeader>\n\n    <!-- Code snippet -->\n    <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n      <div\n        v-if=\"externalExamples.pending.value\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        <template v-if=\"externalExamples.failed.value\">\n          Could not load this example.\n          <ScalarButton\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"externalExamples.retry\">\n            Retry\n          </ScalarButton>\n        </template>\n        <template v-else>Loading example…</template>\n      </div>\n      <div\n        v-else-if=\"generatedCode === null\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        {{ codeSampleUnavailable }}\n      </div>\n      <div\n        v-else\n        :id=\"`${id}-example`\"\n        class=\"code-snippet\">\n        <ScalarCodeBlock\n          v-if=\"!shouldVirtualize\"\n          class=\"bg-b-2 h-full\"\n          :content=\"generatedCode\"\n          :hideCredentials=\"secretCredentials\"\n          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\n          containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n          contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n          :lineHeight=\"20\"\n          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"showExamplePicker || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"showExamplePicker\"\n        class=\"request-card-footer-addon\">\n        <template v-if=\"Object.keys(requestBodyExamples).length\">\n          <ExamplePicker\n            :examples=\"requestBodyExamples\"\n            :modelValue=\"localExampleKey\"\n            @update:modelValue=\"selectExample\" />\n        </template>\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardFooter>\n  </ScalarCard>\n\n  <!-- Fallback card with just method and path in the case of no examples -->\n  <ScalarCard\n    v-else-if=\"fallback\"\n    class=\"request-card dark-mode\">\n    <ScalarCardSection class=\"request-card-simple\">\n      <div class=\"request-header\">\n        <HttpMethod\n          as=\"span\"\n          class=\"request-method\"\n          :method=\"method\" />\n        <slot name=\"header\" />\n      </div>\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardSection>\n  </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n.request-method {\n  font-family: var(--scalar-font-code);\n  margin-right: 6px;\n}\n.request-card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 6px;\n  flex-shrink: 0;\n  position: relative;\n}\n.request-card-footer-addon {\n  display: flex;\n  align-items: center;\n\n  flex: 1;\n  min-width: 0;\n}\n.request-editor-section {\n  display: flex;\n  flex: 1;\n}\n.request-card-simple {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 8px 8px 8px 12px;\n\n  font-size: var(--scalar-small);\n}\n.code-snippet {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"CodeExample.vue.js","names":[],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\n  /** Localized status text shown when the selected example has no linked code sample. */\n  codeSampleUnavailable?: string\n  /**\n   * Localized purpose of the client picker. It opens the button's accessible name and the\n   * selected client's title is appended, so the name still contains the visible label.\n   */\n  clientPickerLabel?: string\n  /** Localized accessible name for the search field inside the client picker. */\n  clientSearchLabel?: string\n  /**\n   * Integration type: determines if the code sample is displayed in a client environment\n   * or in an API reference environment.\n   */\n  integration?: 'client' | 'reference'\n  /**\n   * List of all http clients formatted into option groups for the client selector\n   */\n  clientOptions: ClientOptionGroup[]\n  /**\n   * Pre-selected client, this will determine which client is initially selected in the dropdown.\n   * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n   *\n   * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n   * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n   *\n   * @defaults to a custom sample if one is available, otherwise shell/curl\n   */\n  selectedClient?: string\n  /**\n   * Which server from the spec to use for the code example\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * The selected content type from the requestBody.content, this will determine which examples are available\n   * as well as the content type of the code example\n   *\n   * @defaults to the first content type if not provided\n   */\n  selectedContentType?: string\n  /**\n   * Example name to use for resolving example values for parameters AND requestBody.\n   *\n   * This is the document-wide selection: it is honored only when this operation defines an example\n   * with the same key, so picking an example on one operation syncs the rest without blanking out\n   * operations that do not share that key.\n   *\n   * @example \"limited\"\n   * ```ts\n   * parameters: {\n   *   name: 'foobar',\n   *   in: 'query',\n   *   examples: {\n   *     limited: {\n   *       dataValue: 10,\n   *     }\n   *   }\n   * },\n   * body: {\n   *   content: {\n   *     'application/json': {\n   *       examples: {\n   *         limited: {\n   *           dataValue: { foo: 'bar' },\n   *         }\n   *       }\n   *     }\n   *   }\n   * }\n   *\n   * ```\n   */\n  selectedExample?: string\n  /**\n   * Event bus\n   */\n  eventBus: WorkspaceEventBus\n  /**\n   * The security schemes which are applicable to this operation\n   */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /**\n   * HTTP method of the operation\n   */\n  method: string\n  /**\n   * Path of the operation\n   */\n  path: string\n  /**\n   * De-referenced OpenAPI Operation object\n   */\n  operation: OperationObject\n  /**\n   * If true and there's no example, we will display a small card with the method and path only\n   */\n  fallback?: boolean\n  /**\n   * A method to generate the label of the block, should return an html string\n   */\n  generateLabel?: () => string\n  /**\n   * If true, render this as a webhook request example\n   */\n  isWebhook?: boolean\n  /**\n   * Workspace + document cookies\n   */\n  globalCookies?: XScalarCookie[]\n  /**\n   * When the request body schema uses oneOf/anyOf, use these selected variants\n   * for the example snippet (e.g. from the schema dropdowns in the API reference).\n   */\n  /** Originating OpenAPI version, used for XML mapping rules. */\n  openapiVersion?: string\n  requestBodyCompositionSelection?: Record<string, number>\n}\n\n/**\n * Request Example\n *\n * The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n *\n * @event workspace:update:selected-client - Emitted when the selected client changes\n * @event workspace:update:selected-example - Emitted when the selected example changes, so other operations can sync\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport {\n  getOperationExamples,\n  resolveOperationExamples,\n} from '@scalar/workspace-store/helpers/operation-examples'\nimport {\n  useExampleVisibility,\n  useExternalExamples,\n} from '@scalar/workspace-store/helpers/use-external-examples'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport { filterClientsByQuery } from '../helpers/filter-clients-by-query'\nimport { findClient } from '../helpers/find-client'\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport { getClients } from '../helpers/get-clients'\nimport { getCustomCodeSamples } from '../helpers/get-custom-code-samples'\nimport { getSecrets } from '../helpers/get-secrets'\nimport { operationToHar } from '../helpers/operation-to-har/operation-to-har'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '../types'\nimport ExamplePicker from './ExamplePicker.vue'\nimport HttpMethod from './HttpMethod.vue'\n\nconst {\n  integration,\n  codeSampleUnavailable = 'No code sample available for this example.',\n  clientPickerLabel = 'Change code sample language',\n  clientSearchLabel = 'Search clients',\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  selectedExample,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  openapiVersion,\n  requestBodyCompositionSelection,\n} = defineProps<CodeExampleProps>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted whenever the example key actually shown for this operation changes.\n   *\n   * This is the resolved local key (not the raw document-wide selection), so layouts that render\n   * the test-request button outside this component can open the client with the same example the\n   * snippet displays.\n   */\n  (e: 'update:exampleKey', value: string): void\n}>()\n\ndefineSlots<{\n  header: () => unknown\n  footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/** Grab the examples for the given content type */\nconst requestBodyExamples = computed(() => {\n  const content = getResolvedRef(operation.requestBody)?.content ?? {}\n  const contentType = selectedContentType || Object.keys(content)[0]\n  if (!contentType) return {}\n\n  const examples = content[contentType]?.examples ?? {}\n\n  return examples\n})\n\n/**\n * The example key actually shown for this operation.\n *\n * `selectedExample` is the document-wide selection that syncs across operations. We honor it only\n * when this operation actually defines that key, otherwise we keep the local example: a selection\n * on one operation should never blank out an operation that does not share the same example.\n */\nconst localExampleKey = ref('')\n\n/** Resolve the key to display, preferring the document-wide selection when this operation has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(requestBodyExamples.value)\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current local example when it is still valid, otherwise fall back to the first one\n  if (localExampleKey.value && keys.includes(localExampleKey.value)) {\n    return localExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Set the initial example from the document-wide selection, falling back to the first example\nonBeforeMount(() => {\n  localExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Follow the document-wide selection when it changes and this operation has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    localExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */\nwatch(\n  () => selectedContentType,\n  () => {\n    if (\n      !Object.keys(requestBodyExamples.value).includes(localExampleKey.value)\n    ) {\n      // Re-resolve so the new content type still follows the document-wide selection when it has\n      // that key, instead of always snapping back to the first example\n      localExampleKey.value = resolveExampleKey(selectedExample)\n    }\n  },\n)\n\n// Keep the parent informed of the resolved key so a test-request button rendered outside this\n// component (e.g. the classic layout header) opens the client with the example the snippet shows\nwatchEffect(() => {\n  emit('update:exampleKey', localExampleKey.value)\n})\n\n/** Select an example locally and sync the choice across the document */\nconst selectExample = (key: string) => {\n  localExampleKey.value = key\n  eventBus.emit('workspace:update:selected-example', key)\n}\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(\n    customCodeSamples.value.samples,\n    clientOptions,\n    customCodeSamples.value.label,\n  ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n  clients.value.reduce((total, group) => total + group.options.length, 0),\n)\n\n/** The locally selected client which would include code samples from this operation only */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n  const client = findClient(clients.value, newClient)\n  if (client) {\n    localSelectedClient.value = client\n  }\n})\n\n/**\n * Accessible name for the client picker.\n *\n * On its own the button reads as its current value (\"C Libcurl\"), which never\n * says what activating it does. The visible title stays part of the name so it\n * still matches what is on screen.\n */\nconst clientPickerAriaLabel = computed(() =>\n  [clientPickerLabel, localSelectedClient.value?.title]\n    .filter(Boolean)\n    .join(': '),\n)\n\nconst elem = ref<ComponentPublicInstance | null>(null)\nconst visible = useExampleVisibility(elem)\nconst externalExamples = useExternalExamples(\n  () =>\n    getOperationExamples(operation, localExampleKey.value, selectedContentType),\n  () => visible.value,\n)\nconst resolvedOperation = computed(() =>\n  resolveOperationExamples(\n    operation,\n    localExampleKey.value,\n    selectedContentType,\n    externalExamples.resolve,\n  ),\n)\n\n/** Keep the picker available because it also selects the example opened by Test Request. */\nconst showExamplePicker = computed(\n  () => Object.keys(requestBodyExamples.value).length > 1,\n)\n\n/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation: resolvedOperation.value,\n      method,\n      path,\n      example: localExampleKey.value,\n      openapiVersion,\n      requestBodyCompositionSelection,\n      // Only required parameters are shown in code examples; optional parameters\n      // are omitted unless explicitly enabled via `x-disabled: false`.\n      defaultDisabledParameters: true,\n    })\n  } catch (error) {\n    console.error('[webhookHar]', error)\n    return null\n  }\n})\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string | null>(() => {\n  if (isWebhook) {\n    return webhookHar.value?.postData?.text ?? ''\n  }\n\n  return generateCodeSnippet({\n    // Only required parameters are shown in code examples; optional parameters\n    // are omitted unless explicitly enabled via `x-disabled: false`.\n    defaultDisabledParameters: true,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value.samples,\n    operation: resolvedOperation.value,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\n    openapiVersion,\n    requestBodyCompositionSelection,\n  })\n})\n\n/** The language for the code block, used for syntax highlighting */\nconst codeBlockLanguage = computed(() => {\n  if (isWebhook) {\n    return webhookLanguage.value\n  }\n\n  return localSelectedClient.value?.lang\n})\n\n/** Determine the language for webhook content based on MIME type */\nconst webhookLanguage = computed<string>(() => {\n  if (!webhookHar.value?.postData) return 'json'\n\n  const contentType = webhookHar.value.postData.mimeType\n  if (contentType?.includes('json')) return 'json'\n  if (contentType?.includes('xml')) return 'xml'\n  if (contentType?.includes('yaml') || contentType?.includes('yml'))\n    return 'yaml'\n  if (contentType?.includes('text/plain')) return 'text'\n\n  return 'json'\n})\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n  // We need to freeze the ui to prevent scrolling as the clients change\n  if (elem.value) {\n    const unfreeze = freezeElement(elem.value.$el)\n    setTimeout(() => {\n      unfreeze()\n    }, 300)\n  }\n  // Update to the local example\n  localSelectedClient.value = option\n\n  // Sync the selection globally so other operations follow along. Custom samples\n  // sync too (keyed by language), so picking e.g. the Python SDK example here\n  // shows the Python example on every operation that ships one.\n  if (option) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n  () => (generatedCode.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n  <ScalarCard\n    v-if=\"\n      generatedCode === null || generatedCode || externalExamples.pending.value\n    \"\n    ref=\"elem\"\n    class=\"request-card dark-mode\">\n    <!-- Header -->\n    <ScalarCardHeader class=\"pr-2.5\">\n      <span class=\"sr-only\">Request Example for</span>\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method\"\n        :method=\"method\" />\n      <span\n        v-if=\"generateLabel\"\n        v-html=\"generateLabel()\" />\n      <slot name=\"header\" />\n      <!-- Client picker -->\n      <template\n        v-if=\"!isWebhook && clientCount\"\n        #actions>\n        <!-- Multiple clients: render a dropdown to switch between them -->\n        <ScalarCombobox\n          v-if=\"clientCount > 1\"\n          class=\"max-h-80\"\n          :filterFn=\"filterClientsByQuery\"\n          :inputLabel=\"clientSearchLabel\"\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\n            :aria-label=\"clientPickerAriaLabel\"\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n            data-testid=\"client-picker\"\n            variant=\"ghost\">\n            {{ localSelectedClient?.title }}\n            <ScalarIconCaretDown\n              class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n              weight=\"bold\" />\n          </ScalarButton>\n        </ScalarCombobox>\n        <!-- Single client: just show its label, no need for a dropdown -->\n        <span\n          v-else\n          class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n          data-testid=\"client-picker\">\n          {{ localSelectedClient?.title }}\n        </span>\n      </template>\n    </ScalarCardHeader>\n\n    <!-- Code snippet -->\n    <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n      <div\n        v-if=\"externalExamples.pending.value\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        <template v-if=\"externalExamples.failed.value\">\n          Could not load this example.\n          <ScalarButton\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"externalExamples.retry\">\n            Retry\n          </ScalarButton>\n        </template>\n        <template v-else>Loading example…</template>\n      </div>\n      <div\n        v-else-if=\"generatedCode === null\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        {{ codeSampleUnavailable }}\n      </div>\n      <div\n        v-else\n        :id=\"`${id}-example`\"\n        class=\"code-snippet\">\n        <ScalarCodeBlock\n          v-if=\"!shouldVirtualize\"\n          class=\"bg-b-2 h-full\"\n          :content=\"generatedCode\"\n          :hideCredentials=\"secretCredentials\"\n          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\n          aria-label=\"Request code sample\"\n          containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n          contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n          :lineHeight=\"20\"\n          role=\"region\"\n          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"showExamplePicker || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"showExamplePicker\"\n        class=\"request-card-footer-addon\">\n        <template v-if=\"Object.keys(requestBodyExamples).length\">\n          <ExamplePicker\n            :examples=\"requestBodyExamples\"\n            :modelValue=\"localExampleKey\"\n            @update:modelValue=\"selectExample\" />\n        </template>\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardFooter>\n  </ScalarCard>\n\n  <!-- Fallback card with just method and path in the case of no examples -->\n  <ScalarCard\n    v-else-if=\"fallback\"\n    class=\"request-card dark-mode\">\n    <ScalarCardSection class=\"request-card-simple\">\n      <div class=\"request-header\">\n        <HttpMethod\n          as=\"span\"\n          class=\"request-method\"\n          :method=\"method\" />\n        <slot name=\"header\" />\n      </div>\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardSection>\n  </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n.request-method {\n  font-family: var(--scalar-font-code);\n  margin-right: 6px;\n}\n.request-card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 6px;\n  flex-shrink: 0;\n  position: relative;\n}\n.request-card-footer-addon {\n  display: flex;\n  align-items: center;\n\n  flex: 1;\n  min-width: 0;\n}\n.request-editor-section {\n  display: flex;\n  flex: 1;\n}\n.request-card-simple {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 8px 8px 8px 12px;\n\n  font-size: var(--scalar-small);\n}\n.code-snippet {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/code-example/components/CodeExample.vue.script.js

@@ -38,6 +38,8 @@ var M = ["innerHTML"], N = {
 	__name: "CodeExample",
 	props: {
 		codeSampleUnavailable: { default: "No code sample available for this example." },
+		clientPickerLabel: { default: "Change code sample language" },
+		clientSearchLabel: { default: "Search clients" },
 		integration: {},
 		clientOptions: {},
 		selectedClient: {},
@@ -81,7 +83,7 @@ var M = ["innerHTML"], N = {
 			let n = t(G.value, e);
 			n && (q.value = n);
 		});
-		let J = g(null), pe = A(J), Y = j(() => O(m.operation, H.value, m.selectedContentType), () => pe.value), X = s(() => k(m.operation, H.value, m.selectedContentType, Y.resolve)), Z = s(() => Object.keys(V.value).length > 1), Q = s(() => {
+		let pe = s(() => [m.clientPickerLabel, q.value?.title].filter(Boolean).join(": ")), J = g(null), me = A(J), Y = j(() => O(m.operation, H.value, m.selectedContentType), () => me.value), X = s(() => k(m.operation, H.value, m.selectedContentType, Y.resolve)), Z = s(() => Object.keys(V.value).length > 1), Q = s(() => {
 			if (!m.isWebhook) return null;
 			try {
 				return n({
@@ -111,11 +113,11 @@ var M = ["innerHTML"], N = {
 			globalCookies: m.globalCookies,
 			openapiVersion: m.openapiVersion,
 			requestBodyCompositionSelection: m.requestBodyCompositionSelection
-		})), me = s(() => m.isWebhook ? he.value : q.value?.lang), he = s(() => {
+		})), he = s(() => m.isWebhook ? ge.value : q.value?.lang), ge = s(() => {
 			if (!Q.value?.postData) return "json";
 			let e = Q.value.postData.mimeType;
 			return e?.includes("json") ? "json" : e?.includes("xml") ? "xml" : e?.includes("yaml") || e?.includes("yml") ? "yaml" : e?.includes("text/plain") ? "text" : "json";
-		}), ge = s(() => i(m.securitySchemes)), _e = (e) => {
+		}), _e = s(() => i(m.securitySchemes)), ve = (e) => {
 			if (J.value) {
 				let e = de(J.value.$el);
 				setTimeout(() => {
@@ -123,7 +125,7 @@ var M = ["innerHTML"], N = {
 				}, 300);
 			}
 			q.value = e, e && m.eventBus.emit("workspace:update:selected-client", e.id);
-		}, ve = s(() => ($.value?.length ?? 0) > 2e4), ye = b();
+		}, ye = s(() => ($.value?.length ?? 0) > 2e4), be = b();
 		return (t, n) => $.value === null || $.value || y(Y).pending.value ? (h(), c(y(w), {
 			key: 0,
 			ref_key: "elem",
@@ -152,13 +154,15 @@ var M = ["innerHTML"], N = {
 						key: 0,
 						class: "max-h-80",
 						filterFn: y(e),
+						inputLabel: m.clientSearchLabel,
 						modelValue: q.value,
 						options: G.value,
 						placement: "bottom-end",
 						teleport: "",
-						"onUpdate:modelValue": n[0] ||= (e) => _e(e)
+						"onUpdate:modelValue": n[0] ||= (e) => ve(e)
 					}, {
 						default: S(() => [p(y(C), {
+							"aria-label": pe.value,
 							class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal",
 							"data-testid": "client-picker",
 							variant: "ghost"
@@ -168,10 +172,11 @@ var M = ["innerHTML"], N = {
 								weight: "bold"
 							})]),
 							_: 1
-						})]),
+						}, 8, ["aria-label"])]),
 						_: 1
 					}, 8, [
 						"filterFn",
+						"inputLabel",
 						"modelValue",
 						"options"
 					])) : (h(), u("span", N, v(q.value?.title), 1))]),
@@ -187,20 +192,22 @@ var M = ["innerHTML"], N = {
 						_: 1
 					}, 8, ["onClick"])], 64)) : (h(), u(o, { key: 1 }, [f("Loading example…")], 64))])) : $.value === null ? (h(), u("div", F, v(m.codeSampleUnavailable), 1)) : (h(), u("div", {
 						key: 2,
-						id: `${y(ye)}-example`,
+						id: `${y(be)}-example`,
 						class: "code-snippet"
-					}, [ve.value ? (h(), c(y(ue), {
+					}, [ye.value ? (h(), c(y(ue), {
 						key: 1,
+						"aria-label": "Request code sample",
 						containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
 						contentClass: "language-plaintext whitespace-pre font-code text-base p-2",
 						lineHeight: 20,
+						role: "region",
 						text: $.value
 					}, null, 8, ["text"])) : (h(), c(y(ce), {
 						key: 0,
 						class: "bg-b-2 h-full",
 						content: $.value,
-						hideCredentials: ge.value,
-						lang: me.value,
+						hideCredentials: _e.value,
+						lang: he.value,
 						lineNumbers: ""
 					}, null, 8, [
 						"content",

package/dist/code-example/components/CodeExample.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeExample.vue.script.js","names":["$slots"],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\n  /** Localized status text shown when the selected example has no linked code sample. */\n  codeSampleUnavailable?: string\n  /**\n   * Integration type: determines if the code sample is displayed in a client environment\n   * or in an API reference environment.\n   */\n  integration?: 'client' | 'reference'\n  /**\n   * List of all http clients formatted into option groups for the client selector\n   */\n  clientOptions: ClientOptionGroup[]\n  /**\n   * Pre-selected client, this will determine which client is initially selected in the dropdown.\n   * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n   *\n   * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n   * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n   *\n   * @defaults to a custom sample if one is available, otherwise shell/curl\n   */\n  selectedClient?: string\n  /**\n   * Which server from the spec to use for the code example\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * The selected content type from the requestBody.content, this will determine which examples are available\n   * as well as the content type of the code example\n   *\n   * @defaults to the first content type if not provided\n   */\n  selectedContentType?: string\n  /**\n   * Example name to use for resolving example values for parameters AND requestBody.\n   *\n   * This is the document-wide selection: it is honored only when this operation defines an example\n   * with the same key, so picking an example on one operation syncs the rest without blanking out\n   * operations that do not share that key.\n   *\n   * @example \"limited\"\n   * ```ts\n   * parameters: {\n   *   name: 'foobar',\n   *   in: 'query',\n   *   examples: {\n   *     limited: {\n   *       dataValue: 10,\n   *     }\n   *   }\n   * },\n   * body: {\n   *   content: {\n   *     'application/json': {\n   *       examples: {\n   *         limited: {\n   *           dataValue: { foo: 'bar' },\n   *         }\n   *       }\n   *     }\n   *   }\n   * }\n   *\n   * ```\n   */\n  selectedExample?: string\n  /**\n   * Event bus\n   */\n  eventBus: WorkspaceEventBus\n  /**\n   * The security schemes which are applicable to this operation\n   */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /**\n   * HTTP method of the operation\n   */\n  method: string\n  /**\n   * Path of the operation\n   */\n  path: string\n  /**\n   * De-referenced OpenAPI Operation object\n   */\n  operation: OperationObject\n  /**\n   * If true and there's no example, we will display a small card with the method and path only\n   */\n  fallback?: boolean\n  /**\n   * A method to generate the label of the block, should return an html string\n   */\n  generateLabel?: () => string\n  /**\n   * If true, render this as a webhook request example\n   */\n  isWebhook?: boolean\n  /**\n   * Workspace + document cookies\n   */\n  globalCookies?: XScalarCookie[]\n  /**\n   * When the request body schema uses oneOf/anyOf, use these selected variants\n   * for the example snippet (e.g. from the schema dropdowns in the API reference).\n   */\n  /** Originating OpenAPI version, used for XML mapping rules. */\n  openapiVersion?: string\n  requestBodyCompositionSelection?: Record<string, number>\n}\n\n/**\n * Request Example\n *\n * The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n *\n * @event workspace:update:selected-client - Emitted when the selected client changes\n * @event workspace:update:selected-example - Emitted when the selected example changes, so other operations can sync\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport {\n  getOperationExamples,\n  resolveOperationExamples,\n} from '@scalar/workspace-store/helpers/operation-examples'\nimport {\n  useExampleVisibility,\n  useExternalExamples,\n} from '@scalar/workspace-store/helpers/use-external-examples'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport { filterClientsByQuery } from '../helpers/filter-clients-by-query'\nimport { findClient } from '../helpers/find-client'\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport { getClients } from '../helpers/get-clients'\nimport { getCustomCodeSamples } from '../helpers/get-custom-code-samples'\nimport { getSecrets } from '../helpers/get-secrets'\nimport { operationToHar } from '../helpers/operation-to-har/operation-to-har'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '../types'\nimport ExamplePicker from './ExamplePicker.vue'\nimport HttpMethod from './HttpMethod.vue'\n\nconst {\n  integration,\n  codeSampleUnavailable = 'No code sample available for this example.',\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  selectedExample,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  openapiVersion,\n  requestBodyCompositionSelection,\n} = defineProps<CodeExampleProps>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted whenever the example key actually shown for this operation changes.\n   *\n   * This is the resolved local key (not the raw document-wide selection), so layouts that render\n   * the test-request button outside this component can open the client with the same example the\n   * snippet displays.\n   */\n  (e: 'update:exampleKey', value: string): void\n}>()\n\ndefineSlots<{\n  header: () => unknown\n  footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/** Grab the examples for the given content type */\nconst requestBodyExamples = computed(() => {\n  const content = getResolvedRef(operation.requestBody)?.content ?? {}\n  const contentType = selectedContentType || Object.keys(content)[0]\n  if (!contentType) return {}\n\n  const examples = content[contentType]?.examples ?? {}\n\n  return examples\n})\n\n/**\n * The example key actually shown for this operation.\n *\n * `selectedExample` is the document-wide selection that syncs across operations. We honor it only\n * when this operation actually defines that key, otherwise we keep the local example: a selection\n * on one operation should never blank out an operation that does not share the same example.\n */\nconst localExampleKey = ref('')\n\n/** Resolve the key to display, preferring the document-wide selection when this operation has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(requestBodyExamples.value)\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current local example when it is still valid, otherwise fall back to the first one\n  if (localExampleKey.value && keys.includes(localExampleKey.value)) {\n    return localExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Set the initial example from the document-wide selection, falling back to the first example\nonBeforeMount(() => {\n  localExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Follow the document-wide selection when it changes and this operation has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    localExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */\nwatch(\n  () => selectedContentType,\n  () => {\n    if (\n      !Object.keys(requestBodyExamples.value).includes(localExampleKey.value)\n    ) {\n      // Re-resolve so the new content type still follows the document-wide selection when it has\n      // that key, instead of always snapping back to the first example\n      localExampleKey.value = resolveExampleKey(selectedExample)\n    }\n  },\n)\n\n// Keep the parent informed of the resolved key so a test-request button rendered outside this\n// component (e.g. the classic layout header) opens the client with the example the snippet shows\nwatchEffect(() => {\n  emit('update:exampleKey', localExampleKey.value)\n})\n\n/** Select an example locally and sync the choice across the document */\nconst selectExample = (key: string) => {\n  localExampleKey.value = key\n  eventBus.emit('workspace:update:selected-example', key)\n}\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(\n    customCodeSamples.value.samples,\n    clientOptions,\n    customCodeSamples.value.label,\n  ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n  clients.value.reduce((total, group) => total + group.options.length, 0),\n)\n\n/** The locally selected client which would include code samples from this operation only */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n  const client = findClient(clients.value, newClient)\n  if (client) {\n    localSelectedClient.value = client\n  }\n})\n\nconst elem = ref<ComponentPublicInstance | null>(null)\nconst visible = useExampleVisibility(elem)\nconst externalExamples = useExternalExamples(\n  () =>\n    getOperationExamples(operation, localExampleKey.value, selectedContentType),\n  () => visible.value,\n)\nconst resolvedOperation = computed(() =>\n  resolveOperationExamples(\n    operation,\n    localExampleKey.value,\n    selectedContentType,\n    externalExamples.resolve,\n  ),\n)\n\n/** Keep the picker available because it also selects the example opened by Test Request. */\nconst showExamplePicker = computed(\n  () => Object.keys(requestBodyExamples.value).length > 1,\n)\n\n/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation: resolvedOperation.value,\n      method,\n      path,\n      example: localExampleKey.value,\n      openapiVersion,\n      requestBodyCompositionSelection,\n      // Only required parameters are shown in code examples; optional parameters\n      // are omitted unless explicitly enabled via `x-disabled: false`.\n      defaultDisabledParameters: true,\n    })\n  } catch (error) {\n    console.error('[webhookHar]', error)\n    return null\n  }\n})\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string | null>(() => {\n  if (isWebhook) {\n    return webhookHar.value?.postData?.text ?? ''\n  }\n\n  return generateCodeSnippet({\n    // Only required parameters are shown in code examples; optional parameters\n    // are omitted unless explicitly enabled via `x-disabled: false`.\n    defaultDisabledParameters: true,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value.samples,\n    operation: resolvedOperation.value,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\n    openapiVersion,\n    requestBodyCompositionSelection,\n  })\n})\n\n/** The language for the code block, used for syntax highlighting */\nconst codeBlockLanguage = computed(() => {\n  if (isWebhook) {\n    return webhookLanguage.value\n  }\n\n  return localSelectedClient.value?.lang\n})\n\n/** Determine the language for webhook content based on MIME type */\nconst webhookLanguage = computed<string>(() => {\n  if (!webhookHar.value?.postData) return 'json'\n\n  const contentType = webhookHar.value.postData.mimeType\n  if (contentType?.includes('json')) return 'json'\n  if (contentType?.includes('xml')) return 'xml'\n  if (contentType?.includes('yaml') || contentType?.includes('yml'))\n    return 'yaml'\n  if (contentType?.includes('text/plain')) return 'text'\n\n  return 'json'\n})\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n  // We need to freeze the ui to prevent scrolling as the clients change\n  if (elem.value) {\n    const unfreeze = freezeElement(elem.value.$el)\n    setTimeout(() => {\n      unfreeze()\n    }, 300)\n  }\n  // Update to the local example\n  localSelectedClient.value = option\n\n  // Sync the selection globally so other operations follow along. Custom samples\n  // sync too (keyed by language), so picking e.g. the Python SDK example here\n  // shows the Python example on every operation that ships one.\n  if (option) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n  () => (generatedCode.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n  <ScalarCard\n    v-if=\"\n      generatedCode === null || generatedCode || externalExamples.pending.value\n    \"\n    ref=\"elem\"\n    class=\"request-card dark-mode\">\n    <!-- Header -->\n    <ScalarCardHeader class=\"pr-2.5\">\n      <span class=\"sr-only\">Request Example for</span>\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method\"\n        :method=\"method\" />\n      <span\n        v-if=\"generateLabel\"\n        v-html=\"generateLabel()\" />\n      <slot name=\"header\" />\n      <!-- Client picker -->\n      <template\n        v-if=\"!isWebhook && clientCount\"\n        #actions>\n        <!-- Multiple clients: render a dropdown to switch between them -->\n        <ScalarCombobox\n          v-if=\"clientCount > 1\"\n          class=\"max-h-80\"\n          :filterFn=\"filterClientsByQuery\"\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n            data-testid=\"client-picker\"\n            variant=\"ghost\">\n            {{ localSelectedClient?.title }}\n            <ScalarIconCaretDown\n              class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n              weight=\"bold\" />\n          </ScalarButton>\n        </ScalarCombobox>\n        <!-- Single client: just show its label, no need for a dropdown -->\n        <span\n          v-else\n          class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n          data-testid=\"client-picker\">\n          {{ localSelectedClient?.title }}\n        </span>\n      </template>\n    </ScalarCardHeader>\n\n    <!-- Code snippet -->\n    <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n      <div\n        v-if=\"externalExamples.pending.value\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        <template v-if=\"externalExamples.failed.value\">\n          Could not load this example.\n          <ScalarButton\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"externalExamples.retry\">\n            Retry\n          </ScalarButton>\n        </template>\n        <template v-else>Loading example…</template>\n      </div>\n      <div\n        v-else-if=\"generatedCode === null\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        {{ codeSampleUnavailable }}\n      </div>\n      <div\n        v-else\n        :id=\"`${id}-example`\"\n        class=\"code-snippet\">\n        <ScalarCodeBlock\n          v-if=\"!shouldVirtualize\"\n          class=\"bg-b-2 h-full\"\n          :content=\"generatedCode\"\n          :hideCredentials=\"secretCredentials\"\n          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\n          containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n          contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n          :lineHeight=\"20\"\n          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"showExamplePicker || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"showExamplePicker\"\n        class=\"request-card-footer-addon\">\n        <template v-if=\"Object.keys(requestBodyExamples).length\">\n          <ExamplePicker\n            :examples=\"requestBodyExamples\"\n            :modelValue=\"localExampleKey\"\n            @update:modelValue=\"selectExample\" />\n        </template>\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardFooter>\n  </ScalarCard>\n\n  <!-- Fallback card with just method and path in the case of no examples -->\n  <ScalarCard\n    v-else-if=\"fallback\"\n    class=\"request-card dark-mode\">\n    <ScalarCardSection class=\"request-card-simple\">\n      <div class=\"request-header\">\n        <HttpMethod\n          as=\"span\"\n          class=\"request-method\"\n          :method=\"method\" />\n        <slot name=\"header\" />\n      </div>\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardSection>\n  </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n.request-method {\n  font-family: var(--scalar-font-code);\n  margin-right: 6px;\n}\n.request-card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 6px;\n  flex-shrink: 0;\n  position: relative;\n}\n.request-card-footer-addon {\n  display: flex;\n  align-items: center;\n\n  flex: 1;\n  min-width: 0;\n}\n.request-editor-section {\n  display: flex;\n  flex: 1;\n}\n.request-card-simple {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 8px 8px 8px 12px;\n\n  font-size: var(--scalar-small);\n}\n.code-snippet {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"CodeExample.vue.script.js","names":["$slots"],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\n  /** Localized status text shown when the selected example has no linked code sample. */\n  codeSampleUnavailable?: string\n  /**\n   * Localized purpose of the client picker. It opens the button's accessible name and the\n   * selected client's title is appended, so the name still contains the visible label.\n   */\n  clientPickerLabel?: string\n  /** Localized accessible name for the search field inside the client picker. */\n  clientSearchLabel?: string\n  /**\n   * Integration type: determines if the code sample is displayed in a client environment\n   * or in an API reference environment.\n   */\n  integration?: 'client' | 'reference'\n  /**\n   * List of all http clients formatted into option groups for the client selector\n   */\n  clientOptions: ClientOptionGroup[]\n  /**\n   * Pre-selected client, this will determine which client is initially selected in the dropdown.\n   * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n   *\n   * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n   * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n   *\n   * @defaults to a custom sample if one is available, otherwise shell/curl\n   */\n  selectedClient?: string\n  /**\n   * Which server from the spec to use for the code example\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * The selected content type from the requestBody.content, this will determine which examples are available\n   * as well as the content type of the code example\n   *\n   * @defaults to the first content type if not provided\n   */\n  selectedContentType?: string\n  /**\n   * Example name to use for resolving example values for parameters AND requestBody.\n   *\n   * This is the document-wide selection: it is honored only when this operation defines an example\n   * with the same key, so picking an example on one operation syncs the rest without blanking out\n   * operations that do not share that key.\n   *\n   * @example \"limited\"\n   * ```ts\n   * parameters: {\n   *   name: 'foobar',\n   *   in: 'query',\n   *   examples: {\n   *     limited: {\n   *       dataValue: 10,\n   *     }\n   *   }\n   * },\n   * body: {\n   *   content: {\n   *     'application/json': {\n   *       examples: {\n   *         limited: {\n   *           dataValue: { foo: 'bar' },\n   *         }\n   *       }\n   *     }\n   *   }\n   * }\n   *\n   * ```\n   */\n  selectedExample?: string\n  /**\n   * Event bus\n   */\n  eventBus: WorkspaceEventBus\n  /**\n   * The security schemes which are applicable to this operation\n   */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /**\n   * HTTP method of the operation\n   */\n  method: string\n  /**\n   * Path of the operation\n   */\n  path: string\n  /**\n   * De-referenced OpenAPI Operation object\n   */\n  operation: OperationObject\n  /**\n   * If true and there's no example, we will display a small card with the method and path only\n   */\n  fallback?: boolean\n  /**\n   * A method to generate the label of the block, should return an html string\n   */\n  generateLabel?: () => string\n  /**\n   * If true, render this as a webhook request example\n   */\n  isWebhook?: boolean\n  /**\n   * Workspace + document cookies\n   */\n  globalCookies?: XScalarCookie[]\n  /**\n   * When the request body schema uses oneOf/anyOf, use these selected variants\n   * for the example snippet (e.g. from the schema dropdowns in the API reference).\n   */\n  /** Originating OpenAPI version, used for XML mapping rules. */\n  openapiVersion?: string\n  requestBodyCompositionSelection?: Record<string, number>\n}\n\n/**\n * Request Example\n *\n * The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n *\n * @event workspace:update:selected-client - Emitted when the selected client changes\n * @event workspace:update:selected-example - Emitted when the selected example changes, so other operations can sync\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport {\n  getOperationExamples,\n  resolveOperationExamples,\n} from '@scalar/workspace-store/helpers/operation-examples'\nimport {\n  useExampleVisibility,\n  useExternalExamples,\n} from '@scalar/workspace-store/helpers/use-external-examples'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport { filterClientsByQuery } from '../helpers/filter-clients-by-query'\nimport { findClient } from '../helpers/find-client'\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport { getClients } from '../helpers/get-clients'\nimport { getCustomCodeSamples } from '../helpers/get-custom-code-samples'\nimport { getSecrets } from '../helpers/get-secrets'\nimport { operationToHar } from '../helpers/operation-to-har/operation-to-har'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '../types'\nimport ExamplePicker from './ExamplePicker.vue'\nimport HttpMethod from './HttpMethod.vue'\n\nconst {\n  integration,\n  codeSampleUnavailable = 'No code sample available for this example.',\n  clientPickerLabel = 'Change code sample language',\n  clientSearchLabel = 'Search clients',\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  selectedExample,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  openapiVersion,\n  requestBodyCompositionSelection,\n} = defineProps<CodeExampleProps>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted whenever the example key actually shown for this operation changes.\n   *\n   * This is the resolved local key (not the raw document-wide selection), so layouts that render\n   * the test-request button outside this component can open the client with the same example the\n   * snippet displays.\n   */\n  (e: 'update:exampleKey', value: string): void\n}>()\n\ndefineSlots<{\n  header: () => unknown\n  footer: ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/** Grab the examples for the given content type */\nconst requestBodyExamples = computed(() => {\n  const content = getResolvedRef(operation.requestBody)?.content ?? {}\n  const contentType = selectedContentType || Object.keys(content)[0]\n  if (!contentType) return {}\n\n  const examples = content[contentType]?.examples ?? {}\n\n  return examples\n})\n\n/**\n * The example key actually shown for this operation.\n *\n * `selectedExample` is the document-wide selection that syncs across operations. We honor it only\n * when this operation actually defines that key, otherwise we keep the local example: a selection\n * on one operation should never blank out an operation that does not share the same example.\n */\nconst localExampleKey = ref('')\n\n/** Resolve the key to display, preferring the document-wide selection when this operation has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(requestBodyExamples.value)\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current local example when it is still valid, otherwise fall back to the first one\n  if (localExampleKey.value && keys.includes(localExampleKey.value)) {\n    return localExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Set the initial example from the document-wide selection, falling back to the first example\nonBeforeMount(() => {\n  localExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Follow the document-wide selection when it changes and this operation has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    localExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */\nwatch(\n  () => selectedContentType,\n  () => {\n    if (\n      !Object.keys(requestBodyExamples.value).includes(localExampleKey.value)\n    ) {\n      // Re-resolve so the new content type still follows the document-wide selection when it has\n      // that key, instead of always snapping back to the first example\n      localExampleKey.value = resolveExampleKey(selectedExample)\n    }\n  },\n)\n\n// Keep the parent informed of the resolved key so a test-request button rendered outside this\n// component (e.g. the classic layout header) opens the client with the example the snippet shows\nwatchEffect(() => {\n  emit('update:exampleKey', localExampleKey.value)\n})\n\n/** Select an example locally and sync the choice across the document */\nconst selectExample = (key: string) => {\n  localExampleKey.value = key\n  eventBus.emit('workspace:update:selected-example', key)\n}\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(\n    customCodeSamples.value.samples,\n    clientOptions,\n    customCodeSamples.value.label,\n  ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n  clients.value.reduce((total, group) => total + group.options.length, 0),\n)\n\n/** The locally selected client which would include code samples from this operation only */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n  const client = findClient(clients.value, newClient)\n  if (client) {\n    localSelectedClient.value = client\n  }\n})\n\n/**\n * Accessible name for the client picker.\n *\n * On its own the button reads as its current value (\"C Libcurl\"), which never\n * says what activating it does. The visible title stays part of the name so it\n * still matches what is on screen.\n */\nconst clientPickerAriaLabel = computed(() =>\n  [clientPickerLabel, localSelectedClient.value?.title]\n    .filter(Boolean)\n    .join(': '),\n)\n\nconst elem = ref<ComponentPublicInstance | null>(null)\nconst visible = useExampleVisibility(elem)\nconst externalExamples = useExternalExamples(\n  () =>\n    getOperationExamples(operation, localExampleKey.value, selectedContentType),\n  () => visible.value,\n)\nconst resolvedOperation = computed(() =>\n  resolveOperationExamples(\n    operation,\n    localExampleKey.value,\n    selectedContentType,\n    externalExamples.resolve,\n  ),\n)\n\n/** Keep the picker available because it also selects the example opened by Test Request. */\nconst showExamplePicker = computed(\n  () => Object.keys(requestBodyExamples.value).length > 1,\n)\n\n/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation: resolvedOperation.value,\n      method,\n      path,\n      example: localExampleKey.value,\n      openapiVersion,\n      requestBodyCompositionSelection,\n      // Only required parameters are shown in code examples; optional parameters\n      // are omitted unless explicitly enabled via `x-disabled: false`.\n      defaultDisabledParameters: true,\n    })\n  } catch (error) {\n    console.error('[webhookHar]', error)\n    return null\n  }\n})\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string | null>(() => {\n  if (isWebhook) {\n    return webhookHar.value?.postData?.text ?? ''\n  }\n\n  return generateCodeSnippet({\n    // Only required parameters are shown in code examples; optional parameters\n    // are omitted unless explicitly enabled via `x-disabled: false`.\n    defaultDisabledParameters: true,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value.samples,\n    operation: resolvedOperation.value,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\n    openapiVersion,\n    requestBodyCompositionSelection,\n  })\n})\n\n/** The language for the code block, used for syntax highlighting */\nconst codeBlockLanguage = computed(() => {\n  if (isWebhook) {\n    return webhookLanguage.value\n  }\n\n  return localSelectedClient.value?.lang\n})\n\n/** Determine the language for webhook content based on MIME type */\nconst webhookLanguage = computed<string>(() => {\n  if (!webhookHar.value?.postData) return 'json'\n\n  const contentType = webhookHar.value.postData.mimeType\n  if (contentType?.includes('json')) return 'json'\n  if (contentType?.includes('xml')) return 'xml'\n  if (contentType?.includes('yaml') || contentType?.includes('yml'))\n    return 'yaml'\n  if (contentType?.includes('text/plain')) return 'text'\n\n  return 'json'\n})\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n  // We need to freeze the ui to prevent scrolling as the clients change\n  if (elem.value) {\n    const unfreeze = freezeElement(elem.value.$el)\n    setTimeout(() => {\n      unfreeze()\n    }, 300)\n  }\n  // Update to the local example\n  localSelectedClient.value = option\n\n  // Sync the selection globally so other operations follow along. Custom samples\n  // sync too (keyed by language), so picking e.g. the Python SDK example here\n  // shows the Python example on every operation that ships one.\n  if (option) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n  () => (generatedCode.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n  <ScalarCard\n    v-if=\"\n      generatedCode === null || generatedCode || externalExamples.pending.value\n    \"\n    ref=\"elem\"\n    class=\"request-card dark-mode\">\n    <!-- Header -->\n    <ScalarCardHeader class=\"pr-2.5\">\n      <span class=\"sr-only\">Request Example for</span>\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method\"\n        :method=\"method\" />\n      <span\n        v-if=\"generateLabel\"\n        v-html=\"generateLabel()\" />\n      <slot name=\"header\" />\n      <!-- Client picker -->\n      <template\n        v-if=\"!isWebhook && clientCount\"\n        #actions>\n        <!-- Multiple clients: render a dropdown to switch between them -->\n        <ScalarCombobox\n          v-if=\"clientCount > 1\"\n          class=\"max-h-80\"\n          :filterFn=\"filterClientsByQuery\"\n          :inputLabel=\"clientSearchLabel\"\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\n            :aria-label=\"clientPickerAriaLabel\"\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n            data-testid=\"client-picker\"\n            variant=\"ghost\">\n            {{ localSelectedClient?.title }}\n            <ScalarIconCaretDown\n              class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n              weight=\"bold\" />\n          </ScalarButton>\n        </ScalarCombobox>\n        <!-- Single client: just show its label, no need for a dropdown -->\n        <span\n          v-else\n          class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n          data-testid=\"client-picker\">\n          {{ localSelectedClient?.title }}\n        </span>\n      </template>\n    </ScalarCardHeader>\n\n    <!-- Code snippet -->\n    <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n      <div\n        v-if=\"externalExamples.pending.value\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        <template v-if=\"externalExamples.failed.value\">\n          Could not load this example.\n          <ScalarButton\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"externalExamples.retry\">\n            Retry\n          </ScalarButton>\n        </template>\n        <template v-else>Loading example…</template>\n      </div>\n      <div\n        v-else-if=\"generatedCode === null\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        {{ codeSampleUnavailable }}\n      </div>\n      <div\n        v-else\n        :id=\"`${id}-example`\"\n        class=\"code-snippet\">\n        <ScalarCodeBlock\n          v-if=\"!shouldVirtualize\"\n          class=\"bg-b-2 h-full\"\n          :content=\"generatedCode\"\n          :hideCredentials=\"secretCredentials\"\n          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\n          aria-label=\"Request code sample\"\n          containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n          contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n          :lineHeight=\"20\"\n          role=\"region\"\n          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"showExamplePicker || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"showExamplePicker\"\n        class=\"request-card-footer-addon\">\n        <template v-if=\"Object.keys(requestBodyExamples).length\">\n          <ExamplePicker\n            :examples=\"requestBodyExamples\"\n            :modelValue=\"localExampleKey\"\n            @update:modelValue=\"selectExample\" />\n        </template>\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardFooter>\n  </ScalarCard>\n\n  <!-- Fallback card with just method and path in the case of no examples -->\n  <ScalarCard\n    v-else-if=\"fallback\"\n    class=\"request-card dark-mode\">\n    <ScalarCardSection class=\"request-card-simple\">\n      <div class=\"request-header\">\n        <HttpMethod\n          as=\"span\"\n          class=\"request-method\"\n          :method=\"method\" />\n        <slot name=\"header\" />\n      </div>\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardSection>\n  </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n.request-method {\n  font-family: var(--scalar-font-code);\n  margin-right: 6px;\n}\n.request-card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 6px;\n  flex-shrink: 0;\n  position: relative;\n}\n.request-card-footer-addon {\n  display: flex;\n  align-items: center;\n\n  flex: 1;\n  min-width: 0;\n}\n.request-editor-section {\n  display: flex;\n  flex: 1;\n}\n.request-card-simple {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 8px 8px 8px 12px;\n\n  font-size: var(--scalar-small);\n}\n.code-snippet {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n</style>\n"],"mappings":"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"}

package/dist/constants.js

@@ -1,5 +1,5 @@
 //#region src/constants.ts
-var e = typeof OVERRIDE_PACKAGE_VERSION < "u" ? OVERRIDE_PACKAGE_VERSION : "0.4.0";
+var e = typeof OVERRIDE_PACKAGE_VERSION < "u" ? OVERRIDE_PACKAGE_VERSION : "0.4.2";
 //#endregion
 export { e as APP_VERSION };
 

package/dist/style.css

@@ -212,7 +212,7 @@
     --scalar-background-3: #e7e7e7;
     --scalar-background-accent: #8ab4f81f;
     --scalar-color-1: #1b1b1b;
-    --scalar-color-2: #757575;
+    --scalar-color-2: #707070;
     --scalar-color-3: #8e8e8e;
     --scalar-color-accent: #09f;
     --scalar-border-color: #dfdfdf;
@@ -260,7 +260,7 @@
     --scalar-color-green: #069061;
     --scalar-color-red: #ef0006;
     --scalar-color-yellow: #edbe20;
-    --scalar-color-blue: #0082d0;
+    --scalar-color-blue: #0072bd;
     --scalar-color-orange: #ff5800;
     --scalar-color-purple: #5203d1;
     --scalar-color-query: #007b80;
@@ -378,7 +378,7 @@
       --scalar-color-green: color(display-p3 .023529 .564706 .380392);
       --scalar-color-red: color(display-p3 .937255 0 .023529);
       --scalar-color-yellow: color(display-p3 .929412 .745098 .12549);
-      --scalar-color-blue: color(display-p3 0 .509804 .815686);
+      --scalar-color-blue: color(display-p3 0 .447059 .741176);
       --scalar-color-orange: color(display-p3 1 .4 .02);
       --scalar-color-purple: color(display-p3 .321569 .011765 .819608);
     }
@@ -410,9 +410,19 @@
 :where(.scalar-app) {
   font-family: var(--scalar-font);
   color: var(--scalar-color-1);
+  --scalar-focus-color: var(--scalar-color-accent);
+  line-height: 1.15;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :where(.scalar-app) {
+    --scalar-focus-color: color-mix(in srgb, var(--scalar-color-accent), var(--scalar-color-1) 20%);
+  }
+}
+
+:where(.scalar-app) {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  line-height: 1.15;
 }
 
 :where(.scalar-app) *, :where(.scalar-app) :before, :where(.scalar-app) :after {
@@ -503,6 +513,10 @@
   outline-offset: -1px;
 }
 
+:where(.scalar-app) a:focus-visible, :where(.scalar-app) button:focus-visible, :where(.scalar-app) [role="button"]:focus-visible {
+  outline-color: var(--scalar-focus-color);
+}
+
 :where(.scalar-app) button, :where(.scalar-app) [role="button"] {
   cursor: pointer;
 }
@@ -1535,7 +1549,7 @@
   content: none;
 }
 
-.scalar-app .markdown.markdown-summary.markdown-summary :not(strong, em, a) {
+.scalar-app .markdown.markdown-summary.markdown-summary :not(strong, em, a, code) {
   font-size: inherit;
   font-weight: inherit;
   line-height: var(--markdown-line-height);
@@ -4463,5 +4477,5 @@
     opacity: .5;
   }
 }
-.request-card[data-v-f5cdd60f]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-f5cdd60f]{font-family:var(--scalar-font-code);margin-right:6px}.request-card-footer[data-v-f5cdd60f]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-f5cdd60f]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-f5cdd60f]{flex:1;display:flex}.request-card-simple[data-v-f5cdd60f]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-f5cdd60f]{flex-direction:column;width:100%;display:flex}
+.request-card[data-v-62318392]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-62318392]{font-family:var(--scalar-font-code);margin-right:6px}.request-card-footer[data-v-62318392]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-62318392]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-62318392]{flex:1;display:flex}.request-card-simple[data-v-62318392]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-62318392]{flex-direction:column;width:100%;display:flex}
 /*$vite$:1*/

package/dist/vue-styles.css

@@ -1,2 +1,2 @@
-.request-card[data-v-f5cdd60f]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-f5cdd60f]{font-family:var(--scalar-font-code);margin-right:6px}.request-card-footer[data-v-f5cdd60f]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-f5cdd60f]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-f5cdd60f]{flex:1;display:flex}.request-card-simple[data-v-f5cdd60f]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-f5cdd60f]{flex-direction:column;width:100%;display:flex}
+.request-card[data-v-62318392]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-62318392]{font-family:var(--scalar-font-code);margin-right:6px}.request-card-footer[data-v-62318392]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-62318392]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-62318392]{flex:1;display:flex}.request-card-simple[data-v-62318392]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-62318392]{flex-direction:column;width:100%;display:flex}
 /*$vite$:1*/

package/package.json

@@ -17,7 +17,7 @@
     "blocks",
     "docs"
   ],
-  "version": "0.4.0",
+  "version": "0.4.2",
   "engines": {
     "node": ">=22"
   },
@@ -37,13 +37,13 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/components": "0.30.3",
-    "@scalar/helpers": "0.15.0",
+    "@scalar/components": "0.30.5",
+    "@scalar/helpers": "0.16.0",
     "@scalar/icons": "0.7.6",
-    "@scalar/snippetz": "0.10.2",
-    "@scalar/themes": "0.18.0",
-    "@scalar/types": "0.22.1",
-    "@scalar/workspace-store": "0.67.0",
+    "@scalar/snippetz": "0.10.4",
+    "@scalar/themes": "0.18.1",
+    "@scalar/types": "0.22.3",
+    "@scalar/workspace-store": "0.67.2",
     "@types/har-format": "^1.2.16",
     "js-base64": "^3.9.2",
     "vue": "^3.5.40"