@scalar/api-client 3.21.0 → 3.21.2

package/dist/v2/components/sidebar/SidebarToggle.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarToggle.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { translate } = useLocalization()\n\nconst isSidebarOpen = defineModel<boolean>({\n  required: true,\n})\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded p-2\"\n    type=\"button\"\n    @click=\"isSidebarOpen = !isSidebarOpen\">\n    <span class=\"sr-only\">{{\n      isSidebarOpen\n        ? translate('apiClient.sidebarToggle.hide')\n        : translate('apiClient.sidebarToggle.show')\n    }}</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAGA,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,gBAAgB,SAAoB,SAAA,YAEzC;;uBAGC,mBAoCS,UAAA;IAnCN,gBAAc,cAAA;IACf,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAa,CAAI,cAAA;OACzB,mBAIS,QAJT,YAIS,gBAHP,cAAA,QAAwB,MAAA,SAAA,CAAS,CAAA,8BAAA,IAA2C,MAAA,SAAA,CAAS,CAAA,8BAAA,CAAA,GAAA,CAAA,IAAA,UAAA,GAIvF,mBAyBM,OAzBN,YAyBM;8BApBJ,mBAMO,QAAA,MAAA,CALL,mBAIW,YAAA,EAJD,IAAG,OAAM,GAAA,CACjB,mBAE8D,QAAA;KAD5D,aAAU;KACV,GAAE;;IAGR,mBAMI,KANJ,YAMI,CALF,mBAIwB,QAAA;KAHtB,OAAK,eAAA,CAAC,qCACE,cAAA,QAAa,kBAAA,kBAAA,CAAA;KACrB,GAAE;KACF,MAAK;;8BAET,mBAKqB,QAAA;KAJnB,GAAE;KACF,QAAO;KACP,kBAAe;KACf,mBAAgB;KAChB,gBAAa"}
+{"version":3,"file":"SidebarToggle.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { variant = 'default' } = defineProps<{\n  /**\n   * How the toggle is drawn.\n   *\n   * `default` is a flat button that sits inside a panel. `overlay` is the\n   * modal's treatment: the same flat button while the panel header has room\n   * for it, and a circular control on the dimmed backdrop once the viewport is\n   * narrow enough that the sidebar covers the panel, where it mirrors the\n   * close button in the opposite corner.\n   */\n  variant?: 'default' | 'overlay'\n}>()\n\nconst { translate } = useLocalization()\n\nconst isSidebarOpen = defineModel<boolean>({\n  required: true,\n})\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle\"\n    :class=\"\n      variant === 'overlay'\n        ? 'scalar-sidebar-toggle--overlay'\n        : 'text-c-3 hover:bg-b-2 active:text-c-1 rounded p-2'\n    \"\n    type=\"button\"\n    @click=\"isSidebarOpen = !isSidebarOpen\">\n    <span class=\"sr-only\">{{\n      isSidebarOpen\n        ? translate('apiClient.sidebarToggle.hide')\n        : translate('apiClient.sidebarToggle.show')\n    }}</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n\n<style scoped>\n/**\n * The wide state is the default variant written out in plain CSS. Spelling it\n * out here rather than reusing the utility classes keeps the narrow state below\n * from having to outrank a utility of the same specificity.\n */\n.scalar-sidebar-toggle--overlay {\n  color: var(--scalar-color-3);\n  border-radius: var(--scalar-radius-md);\n  padding: 8px;\n}\n.scalar-sidebar-toggle--overlay:hover {\n  background: var(--scalar-background-2);\n}\n.scalar-sidebar-toggle--overlay:active {\n  color: var(--scalar-color-1);\n}\n\n/**\n * Below the `lg` breakpoint (1000px) the toggle moves onto the dimmed backdrop\n * and matches the close button in the opposite corner: white on a translucent\n * fill, in a 36px circle. The padding is literal rather than a utility class so\n * that circle matches that button even when this component is consumed from a\n * build that generates its own utilities.\n *\n * The breakpoint is where the address bar stops being able to centre itself.\n * The bar caps at 768px, so once the panel is narrower than roughly 870px the\n * bar's left edge slides under a toggle sitting inside the panel and clips the\n * method chip. `lg` clears that crossover with room to spare.\n */\n@media (width < 1000px) {\n  .scalar-sidebar-toggle--overlay {\n    color: white;\n    background: rgba(0, 0, 0, 0.1);\n    border-radius: var(--scalar-radius-full);\n    padding: 10px;\n  }\n  .scalar-sidebar-toggle--overlay:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,gBAAgB,SAAoB,SAAA,YAEzC;;uBAGC,mBAyCS,UAAA;IAxCN,gBAAc,cAAA;IACf,OAAK,eAAA,CAAC,yBACS,QAAA,YAAO,YAAA,mCAAA,mDAAA,CAAA;IAKtB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAa,CAAI,cAAA;OACzB,mBAIS,QAJT,YAIS,gBAHP,cAAA,QAAwB,MAAA,SAAA,CAAS,CAAA,8BAAA,IAA2C,MAAA,SAAA,CAAS,CAAA,8BAAA,CAAA,GAAA,CAAA,IAAA,UAAA,GAIvF,mBAyBM,OAzBN,YAyBM;8BApBJ,mBAMO,QAAA,MAAA,CALL,mBAIW,YAAA,EAJD,IAAG,OAAM,GAAA,CACjB,mBAE8D,QAAA;KAD5D,aAAU;KACV,GAAE;;IAGR,mBAMI,KANJ,YAMI,CALF,mBAIwB,QAAA;KAHtB,OAAK,eAAA,CAAC,qCACE,cAAA,QAAa,kBAAA,kBAAA,CAAA;KACrB,GAAE;KACF,MAAK;;8BAET,mBAKqB,QAAA;KAJnB,GAAE;KACF,QAAO;KACP,kBAAe;KACf,mBAAgB;KAChB,gBAAa"}

package/dist/v2/constants.js

@@ -1,6 +1,6 @@
 //#region src/v2/constants.ts
 /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
-var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.21.0";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.21.2";
 //#endregion
 export { APP_VERSION };
 

package/dist/v2/features/modal/Modal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AA2NA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AACnG,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAKZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG/E,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qGAAqG;IACrG,QAAQ,EAAE,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;IAC7C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACvC,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,kEAAkE;IAClE,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC/B,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGA8R3E,CAAC"}
+{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AAmOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AACnG,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAKZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG/E,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qGAAqG;IACrG,QAAQ,EAAE,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;IAC7C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACvC,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,kEAAkE;IAClE,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC/B,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGAkS3E,CAAC"}

package/dist/v2/features/modal/Modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<string | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { provideLocalization } from '@/v2/features/localization'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst { translate, locale, direction } = provideLocalization(\n  () => options.value.localization,\n)\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer\n    :dir=\"direction\"\n    :lang=\"locale\"\n    :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isActive=\"modalState.open\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">{{\n        translate('apiClient.modal.noDocumentSelected')\n      }}</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<string | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { provideLocalization } from '@/v2/features/localization'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst { translate, locale, direction } = provideLocalization(\n  () => options.value.localization,\n)\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer\n    :dir=\"direction\"\n    :lang=\"locale\"\n    :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <!--\n        The toggle keeps its place inside the panel while the header row is wide\n        enough for the address bar to centre itself clear of it. Below `lg` the\n        bar fills the row and its method chip reaches the panel edge, so the\n        toggle moves onto the backdrop and mirrors the close button in the\n        opposite corner, leaving the whole row to the bar.\n      -->\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-lg:fixed max-lg:top-2 max-lg:left-2\"\n        variant=\"overlay\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isActive=\"modalState.open\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">{{\n        translate('apiClient.modal.noDocumentSelected')\n      }}</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}

package/dist/v2/features/modal/Modal.vue.script.js

@@ -93,7 +93,8 @@ var Modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					createVNode(unref(SidebarToggle_default), {
 						modelValue: isSidebarOpen.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isSidebarOpen.value = $event),
-						class: "absolute top-2 left-4 z-10 max-md:top-4"
+						class: "absolute top-2 left-4 z-10 max-lg:fixed max-lg:top-2 max-lg:left-2",
+						variant: "overlay"
 					}, null, 8, ["modelValue"]),
 					withDirectives(createVNode(unref(Sidebar_default), {
 						sidebarWidth: sidebarWidth.value,

package/dist/v2/features/modal/Modal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<string | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { provideLocalization } from '@/v2/features/localization'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst { translate, locale, direction } = provideLocalization(\n  () => options.value.localization,\n)\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer\n    :dir=\"direction\"\n    :lang=\"locale\"\n    :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isActive=\"modalState.open\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">{{\n        translate('apiClient.modal.noDocumentSelected')\n      }}</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,EAAE,WAAW,QAAQ,cAAc,0BACjC,QAAA,QAAQ,MAAM,YACtB;EAEA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;EACN;;EAGA,MAAM,gBAAgB,IAAI,KAAK;;EAG/B,sBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;EACT,CAAC;;EAGD,iBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,IAAI;;EAG1D,MAAM,gBAAgB;GACpB,QAAA,SAAS,KAAK,0BAA0B;EAC1C;EAEA,MAAM,WAAW,oBAAoB;GACnC,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,SAAS;GAEzB,OAAO;EACT,CAAC;EAED,YACQ,QAAA,WAAW,OAChB,SAAS;GAER,SAAS,QAAQ;GAEjB,IAAI,CAAC,MACH,QAAQ;EAEZ,CACF;EAGA,sBAAsB,QAAQ,CAAC;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,qBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,KAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,KAAK,CAAC,CAAC,WAC7D;EAEA,SAAa;GACX;GACA;EACF,CAAC;;uBAIC,YAqDuB,8BAAA;IApDpB,KAAK,MAAA,SAAA;IACL,MAAM,MAAA,MAAA;IACN,YAAA,QAAA;;2BAEe,CAAhB,YAAgB,MAAA,YAAA,CAAA,GAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,UAAA,GADjD,mBAoCO,QApCP,YAoCO;KAjCL,YAEoD,MAAA,qBAAA,GAAA;kBADzC,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,eAAA,GAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,wBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,KAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,CAAA;MACZ,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,KAAa,CAAA,CAAA;KAYvB,YAgBoB,mBAAA;MAfA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,sBAAA,EAAyB,QAAI;MACzD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC1B,UAAU,QAAA,WAAW;MACrB,WAAW,QAAA,UAAU;MACtB,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;;;wBAGL,mBAMM,OANN,YAMM,CAHJ,mBAES,QAFT,YAES,gBADP,MAAA,SAAA,CAAS,CAAA,oCAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in. OpenAPI-only — the modal has no AsyncAPI path. */\n  document: ComputedRef<OpenApiDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<string | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Whether the active route resolves from `document.webhooks`. */\n  isWebhook: ComputedRef<boolean>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarListboxOption } from '@scalar/components/listbox'\nimport type { ModalState } from '@scalar/components/modal'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { provideLocalization } from '@/v2/features/localization'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptions, ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst { translate, locale, direction } = provideLocalization(\n  () => options.value.localization,\n)\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer\n    :dir=\"direction\"\n    :lang=\"locale\"\n    :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <!--\n        The toggle keeps its place inside the panel while the header row is wide\n        enough for the address bar to centre itself clear of it. Below `lg` the\n        bar fills the row and its method chip reaches the panel edge, so the\n        toggle moves onto the backdrop and mirrors the close button in the\n        opposite corner, leaving the whole row to the bar.\n      -->\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-lg:fixed max-lg:top-2 max-lg:left-2\"\n        variant=\"overlay\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.name ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        :isActive=\"modalState.open\"\n        :isWebhook=\"isWebhook.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">{{\n        translate('apiClient.modal.noDocumentSelected')\n      }}</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,EAAE,WAAW,QAAQ,cAAc,0BACjC,QAAA,QAAQ,MAAM,YACtB;EAEA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;EACN;;EAGA,MAAM,gBAAgB,IAAI,KAAK;;EAG/B,sBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;EACT,CAAC;;EAGD,iBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,IAAI;;EAG1D,MAAM,gBAAgB;GACpB,QAAA,SAAS,KAAK,0BAA0B;EAC1C;EAEA,MAAM,WAAW,oBAAoB;GACnC,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,SAAS;GAEzB,OAAO;EACT,CAAC;EAED,YACQ,QAAA,WAAW,OAChB,SAAS;GAER,SAAS,QAAQ;GAEjB,IAAI,CAAC,MACH,QAAQ;EAEZ,CACF;EAGA,sBAAsB,QAAQ,CAAC;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,qBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,KAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,KAAK,CAAC,CAAC,WAC7D;EAEA,SAAa;GACX;GACA;EACF,CAAC;;uBAIC,YA6DuB,8BAAA;IA5DpB,KAAK,MAAA,SAAA;IACL,MAAM,MAAA,MAAA;IACN,YAAA,QAAA;;2BAEe,CAAhB,YAAgB,MAAA,YAAA,CAAA,GAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,UAAA,GADjD,mBA4CO,QA5CP,YA4CO;KAlCL,YAGsB,MAAA,qBAAA,GAAA;kBAFX,cAAA;iFAAa,QAAA;MACtB,OAAM;MACN,SAAQ;;oBACV,YAYoD,MAAA,eAAA,GAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,wBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,KAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,CAAA;MACZ,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,KAAa,CAAA,CAAA;KAYvB,YAgBoB,mBAAA;MAfA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,sBAAA,EAAyB,QAAI;MACzD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC1B,UAAU,QAAA,WAAW;MACrB,WAAW,QAAA,UAAU;MACtB,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;;;wBAGL,mBAMM,OANN,YAMM,CAHJ,mBAES,QAFT,YAES,gBADP,MAAA,SAAA,CAAS,CAAA,oCAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA"}

package/dist/vue-styles.css

@@ -60,21 +60,21 @@ to {
   );
 }
 
-.fade-request-section-content[data-v-48147b15] {
+.fade-request-section-content[data-v-50fd0a3c] {
   background: linear-gradient(
     to left,
     var(--scalar-background-1) 64%,
     transparent
   );
 }
-.fade-request-section-content[data-v-48147b15]:dir(rtl) {
+.fade-request-section-content[data-v-50fd0a3c]:dir(rtl) {
   background: linear-gradient(
     to right,
     var(--scalar-background-1) 64%,
     transparent
   );
 }
-.filter-hover[data-v-48147b15] {
+.filter-hover[data-v-50fd0a3c] {
   height: 100%;
   padding-inline-end: 39px;
   padding-inline-start: 24px;
@@ -83,12 +83,12 @@ to {
   transition: width 0s ease-in-out 0.2s;
   overflow: hidden;
 }
-.filter-hover[data-v-48147b15]:hover,
-.filter-hover[data-v-48147b15]:has(:focus-visible) {
+.filter-hover[data-v-50fd0a3c]:hover,
+.filter-hover[data-v-50fd0a3c]:has(:focus-visible) {
   width: 100%;
   z-index: 10;
 }
-.filter-hover[data-v-48147b15]:before {
+.filter-hover[data-v-50fd0a3c]:before {
   content: '';
   position: absolute;
   top: 0;
@@ -100,59 +100,59 @@ to {
   transition: all 0.3s ease-in-out;
   pointer-events: none;
 }
-.filter-hover-item[data-v-48147b15] {
+.filter-hover-item[data-v-50fd0a3c] {
   opacity: 0;
 }
-.filter-hover-item[data-v-48147b15]:not(:last-of-type) {
+.filter-hover-item[data-v-50fd0a3c]:not(:last-of-type) {
   transform: translate3d(0, 3px, 0);
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15] {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c] {
   transition:
     opacity 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(1) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(1) {
   transition-delay: 0.05s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(2) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(2) {
   transition-delay: 0.1s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(3) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(3) {
   transition-delay: 0.15s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(4) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(4) {
   transition-delay: 0.2s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(5) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(5) {
   transition-delay: 0.25s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(6) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(6) {
   transition-delay: 0.3s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(7) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(7) {
   transition-delay: 0.35s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15],
-.filter-hover:has(:focus-visible) .filter-hover-item[data-v-48147b15] {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c],
+.filter-hover:has(:focus-visible) .filter-hover-item[data-v-50fd0a3c] {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }
-.filter-hover[data-v-48147b15]:hover:before,
-.filter-hover[data-v-48147b15]:has(:focus-visible):before {
+.filter-hover[data-v-50fd0a3c]:hover:before,
+.filter-hover[data-v-50fd0a3c]:has(:focus-visible):before {
   opacity: 0.9;
   backdrop-filter: blur(10px);
 }
-.filter-button[data-v-48147b15] {
+.filter-button[data-v-50fd0a3c] {
   top: 50%;
   transform: translateY(-50%);
 }
-.context-bar-group:hover .context-bar-group-hover\:text-c-1[data-v-48147b15],
-.context-bar-group:has(:focus-visible) .context-bar-group-hover\:text-c-1[data-v-48147b15] {
+.context-bar-group:hover .context-bar-group-hover\:text-c-1[data-v-50fd0a3c],
+.context-bar-group:has(:focus-visible) .context-bar-group-hover\:text-c-1[data-v-50fd0a3c] {
   --tw-text-opacity: 1;
   color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));
 }
-.context-bar-group:hover .context-bar-group-hover\:hidden[data-v-48147b15],
-.context-bar-group:has(:focus-visible) .context-bar-group-hover\:hidden[data-v-48147b15] {
+.context-bar-group:hover .context-bar-group-hover\:hidden[data-v-50fd0a3c],
+.context-bar-group:has(:focus-visible) .context-bar-group-hover\:hidden[data-v-50fd0a3c] {
   display: none;
 }
 
@@ -328,13 +328,13 @@ to {
   color: var(--scalar-color-1);
 }
 
-.code-input-lite[data-v-9bca2f92] {
+.code-input-lite[data-v-360ebc3c] {
   /* Flex so the editor centres vertically in whatever height the cell gives us.
      Font properties inherit so we adopt the surrounding typography. */
   display: flex;
   align-items: center;
 }
-.code-input-lite__editor[data-v-9bca2f92] {
+.code-input-lite__editor[data-v-360ebc3c] {
   /* Everything font-related inherits from the surrounding context. */
   font: inherit;
   letter-spacing: inherit;
@@ -356,7 +356,7 @@ to {
   /* Positioning context for the absolutely positioned placeholder. */
   position: relative;
 }
-.code-input-lite__editor[data-v-9bca2f92]::-webkit-scrollbar {
+.code-input-lite__editor[data-v-360ebc3c]::-webkit-scrollbar {
   display: none;
 }
 
@@ -364,7 +364,7 @@ to {
    contenteditable; otherwise the caret would land after it on focus.
    `pointer-events: none` lets clicks fall through to focus the editor.
    Hidden on focus so it never renders on top of the text caret. */
-.code-input-lite--empty .code-input-lite__editor[data-v-9bca2f92]:not(:focus)::before {
+.code-input-lite--empty .code-input-lite__editor[data-v-360ebc3c]:not(:focus)::before {
   content: attr(data-placeholder);
   color: var(--scalar-color-3);
   pointer-events: none;
@@ -375,7 +375,7 @@ to {
   display: flex;
   align-items: center;
 }
-.code-input-lite--error .code-input-lite__editor[data-v-9bca2f92] {
+.code-input-lite--error .code-input-lite__editor[data-v-360ebc3c] {
   outline: 1px solid var(--scalar-color-red);
 }
 
@@ -419,41 +419,41 @@ to {
   background: color-mix(in srgb, var(--scalar-background-3), transparent 40%);
 }
 
-[data-v-bb7a09e9] .code-input-lite__editor {
+[data-v-e29008b7] .code-input-lite__editor {
   background-color: transparent;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
 }
-[data-v-bb7a09e9] .scalar-pill:not(:last-of-type) {
+[data-v-e29008b7] .scalar-pill:not(:last-of-type) {
   margin-right: 0.15em;
 }
-[data-v-bb7a09e9] .scalar-pill:not(:first-of-type) {
+[data-v-e29008b7] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
 
-[data-v-c8b034c3] .cm-content {
+[data-v-42eb1913] .cm-content {
   font-size: var(--scalar-small);
 }
 
-[data-v-135d11b9] .code-input-lite__editor {
+[data-v-8e7de9be] .code-input-lite__editor {
   background-color: transparent;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
 }
-[data-v-135d11b9] .scalar-pill:not(:last-of-type) {
+[data-v-8e7de9be] .scalar-pill:not(:last-of-type) {
   margin-right: 0.15em;
 }
-[data-v-135d11b9] .scalar-pill:not(:first-of-type) {
+[data-v-8e7de9be] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
 /* Tailwind placeholder is busted */
-input[data-v-135d11b9]::placeholder {
+input[data-v-8e7de9be]::placeholder {
   color: var(--scalar-color-3);
 }
 /* we want our inputs to look like a password input but not be one */
-.scalar-password-input[data-v-135d11b9] {
+.scalar-password-input[data-v-8e7de9be] {
   text-security: disc;
   -webkit-text-security: disc;
   -moz-text-security: disc;
@@ -481,20 +481,20 @@ input[data-v-135d11b9]::placeholder {
   scrollbar-width: none;
 }
 
-.request-section-content[data-v-ec56362c] {
+.request-section-content[data-v-5bf07c90] {
   --scalar-border-width: 0.5px;
 }
-.request-section-content-filter[data-v-ec56362c] {
+.request-section-content-filter[data-v-5bf07c90] {
   box-shadow: 0 -10px 0 10px var(--scalar-background-1);
 }
-.request-item:focus-within .request-meta-buttons[data-v-ec56362c] {
+.request-item:focus-within .request-meta-buttons[data-v-5bf07c90] {
   opacity: 1;
 }
-.group-hover-input[data-v-ec56362c] {
+.group-hover-input[data-v-5bf07c90] {
   border-width: var(--scalar-border-width);
   border-color: transparent;
 }
-.group:hover .group-hover-input[data-v-ec56362c] {
+.group:hover .group-hover-input[data-v-5bf07c90] {
   background: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -502,7 +502,7 @@ input[data-v-135d11b9]::placeholder {
   );
   border-color: var(--scalar-border-color);
 }
-.group-hover-input[data-v-ec56362c]:focus {
+.group-hover-input[data-v-5bf07c90]:focus {
   background: transparent !important;
   border-color: var(--scalar-border-color) !important;
 }
@@ -582,11 +582,11 @@ input[data-v-135d11b9]::placeholder {
   opacity: 0;
 }
 
-.animate-response-heading .response-heading[data-v-fd52d047] {
-  animation: push-response-fd52d047 0.2s ease-in-out forwards;
+.animate-response-heading .response-heading[data-v-29000e66] {
+  animation: push-response-29000e66 0.2s ease-in-out forwards;
   opacity: 1;
 }
-@keyframes push-response-fd52d047 {
+@keyframes push-response-29000e66 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -596,11 +596,11 @@ to {
     transform: translateY(-4px);
 }
 }
-.animate-response-heading .animate-response-children[data-v-fd52d047] {
-  animation: response-spans-fd52d047 0.2s ease-in-out forwards 0.05s;
+.animate-response-heading .animate-response-children[data-v-29000e66] {
+  animation: response-spans-29000e66 0.2s ease-in-out forwards 0.05s;
   opacity: 0;
 }
-@keyframes response-spans-fd52d047 {
+@keyframes response-spans-29000e66 {
 from {
     opacity: 0;
     transform: translateY(4px);
@@ -628,21 +628,21 @@ to {
   background: var(--scalar-background-2);
 }
 
-[data-v-0e96b5b8] .cm-editor {
+[data-v-6edfa5a3] .cm-editor {
   height: 100%;
   outline: none;
   width: 100%;
 }
-[data-v-0e96b5b8] .cm-line {
+[data-v-6edfa5a3] .cm-line {
   padding: 0;
 }
-[data-v-0e96b5b8] .cm-content {
+[data-v-6edfa5a3] .cm-content {
   padding: 0;
   display: flex;
   align-items: center;
   font-size: var(--scalar-small);
 }
-.scroll-timeline-x[data-v-0e96b5b8] {
+.scroll-timeline-x[data-v-6edfa5a3] {
   -ms-overflow-style: none;
   /* Fade the URL at the viewport edges. Mask lives on the scrollport (this
      element) rather than on `.cm-scroller`, whose width follows the URL's
@@ -655,31 +655,31 @@ to {
     transparent 100%
   );
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8] {
+.scroll-timeline-x-hidden[data-v-6edfa5a3] {
   overflow-x: auto;
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8] .cm-scroller {
+.scroll-timeline-x-hidden[data-v-6edfa5a3] .cm-scroller {
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-right: 20px;
   overflow: auto;
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8]::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-6edfa5a3]::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8] .cm-scroller::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-6edfa5a3] .cm-scroller::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-address[data-v-0e96b5b8] {
+.scroll-timeline-x-address[data-v-6edfa5a3] {
   line-height: 27px;
   scrollbar-width: none; /* Firefox */
 }
 /* make clickable are to left of send button */
-.scroll-timeline-x-address[data-v-0e96b5b8]:after {
+.scroll-timeline-x-address[data-v-6edfa5a3]:after {
   content: '';
   position: absolute;
   height: 100%;
@@ -687,7 +687,7 @@ to {
   right: 0;
   cursor: text;
 }
-.address-bar-bg-states[data-v-0e96b5b8] {
+.address-bar-bg-states[data-v-6edfa5a3] {
   --scalar-address-bar-bg: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -695,22 +695,22 @@ to {
   );
   background: var(--scalar-address-bar-bg);
 }
-.address-bar-bg-states[data-v-0e96b5b8]:has(.cm-focused) {
+.address-bar-bg-states[data-v-6edfa5a3]:has(.cm-focused) {
   --scalar-address-bar-bg: var(--scalar-background-1);
   border-color: var(--scalar-border-color);
   outline-width: 1px;
   outline-style: solid;
 }
-.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-0e96b5b8],
-.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-0e96b5b8] {
+.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-6edfa5a3],
+.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-6edfa5a3] {
   --scalar-address-bar-bg: var(--scalar-background-1);
 }
 
-.app-exit-button[data-v-cf0538d1] {
+.app-exit-button[data-v-6e1ebfa0] {
   color: white;
   background: rgba(0, 0, 0, 0.1);
 }
-.app-exit-button[data-v-cf0538d1]:hover {
+.app-exit-button[data-v-6e1ebfa0]:hover {
   background: rgba(255, 255, 255, 0.1);
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@@ -747,6 +747,47 @@ to {
   bottom: 0;
 }
 
+/**
+ * The wide state is the default variant written out in plain CSS. Spelling it
+ * out here rather than reusing the utility classes keeps the narrow state below
+ * from having to outrank a utility of the same specificity.
+ */
+.scalar-sidebar-toggle--overlay[data-v-4a35414a] {
+  color: var(--scalar-color-3);
+  border-radius: var(--scalar-radius-md);
+  padding: 8px;
+}
+.scalar-sidebar-toggle--overlay[data-v-4a35414a]:hover {
+  background: var(--scalar-background-2);
+}
+.scalar-sidebar-toggle--overlay[data-v-4a35414a]:active {
+  color: var(--scalar-color-1);
+}
+
+/**
+ * Below the `lg` breakpoint (1000px) the toggle moves onto the dimmed backdrop
+ * and matches the close button in the opposite corner: white on a translucent
+ * fill, in a 36px circle. The padding is literal rather than a utility class so
+ * that circle matches that button even when this component is consumed from a
+ * build that generates its own utilities.
+ *
+ * The breakpoint is where the address bar stops being able to centre itself.
+ * The bar caps at 768px, so once the panel is narrower than roughly 870px the
+ * bar's left edge slides under a toggle sitting inside the panel and clips the
+ * method chip. `lg` clears that crossover with room to spare.
+ */
+@media (width < 1000px) {
+.scalar-sidebar-toggle--overlay[data-v-4a35414a] {
+    color: white;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: var(--scalar-radius-full);
+    padding: 10px;
+}
+.scalar-sidebar-toggle--overlay[data-v-4a35414a]:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+}
+
 [data-v-4b7f675d] .code-input-lite__editor {
   background-color: transparent;
   font-family: var(--scalar-font);
@@ -760,7 +801,7 @@ to {
   margin-left: 0.5px;
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.scalar .scalar-app-layout[data-v-0eebddf5] {
+.scalar .scalar-app-layout[data-v-44c68ca5] {
   background: var(--scalar-background-1);
   border: var(--scalar-border-width) solid var(--scalar-border-color);
   border-radius: 8px;
@@ -772,12 +813,12 @@ to {
   overflow: hidden;
 }
 @media (max-width: 720px) and (max-height: 480px) {
-.scalar .scalar-app-layout[data-v-0eebddf5] {
+.scalar .scalar-app-layout[data-v-44c68ca5] {
     height: 100%;
     max-height: 90svh;
 }
 }
-.scalar .scalar-app-exit[data-v-0eebddf5] {
+.scalar .scalar-app-exit[data-v-44c68ca5] {
   cursor: pointer;
   z-index: -1;
   background: #00000038;
@@ -787,10 +828,10 @@ to {
   top: 0;
   left: 0;
 }
-.dark-mode .scalar .scalar-app-exit[data-v-0eebddf5] {
+.dark-mode .scalar .scalar-app-exit[data-v-44c68ca5] {
   background: #00000073;
 }
-.scalar .scalar-app-exit[data-v-0eebddf5]:before {
+.scalar .scalar-app-exit[data-v-44c68ca5]:before {
   text-align: center;
   color: #fff;
   opacity: .6;
@@ -802,10 +843,10 @@ to {
   top: 0;
   right: 12px;
 }
-.scalar .scalar-app-exit[data-v-0eebddf5]:hover:before {
+.scalar .scalar-app-exit[data-v-44c68ca5]:hover:before {
   opacity: 1;
 }
-.scalar-container[data-v-0eebddf5] {
+.scalar-container[data-v-44c68ca5] {
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
@@ -822,16 +863,16 @@ to {
   left: 0;
   overflow: hidden;
 }
-.scalar-container.scalar-client--open[data-v-0eebddf5] {
+.scalar-container.scalar-client--open[data-v-44c68ca5] {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity .35s;
 }
-.scalar .url-form-input[data-v-0eebddf5] {
+.scalar .url-form-input[data-v-44c68ca5] {
   min-height: auto !important;
 }
-.scalar .scalar-container[data-v-0eebddf5] {
+.scalar .scalar-container[data-v-44c68ca5] {
   line-height: normal;
 }