@scalar/api-reference 1.63.0 → 1.64.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @scalar/api-reference
 
+## 1.64.0
+
+### Minor Changes
+
+- [#9683](https://github.com/scalar/scalar/pull/9683): Surface the required OAuth scopes for an operation as a dedicated "OAuth scopes" section below the description (above parameters), instead of only inside the "Auth Required" badge popover. Scopes are de-duplicated across security alternatives and shown in both the modern and classic layouts, as well as on AsyncAPI operations.
+- [#9711](https://github.com/scalar/scalar/pull/9711): feat: add `pluginUrls` configuration option to load API Reference plugins from URLs
+
+  Each entry must point to an ESM module that exports a plugin (the same shape as the `plugins` entries) as its default export. The standalone build (`Scalar.createApiReference`) imports the modules before the API reference mounts and registers their default exports alongside the plugins passed directly. Unlike `plugins`, the new option is JSON-serializable, so integrations that pass their configuration as JSON (for example the Docker container or Scalar for Aspire) can load plugins without replacing the whole bundle.
+
+### Patch Changes
+
+- [#9732](https://github.com/scalar/scalar/pull/9732): Render every `oneOf`/`anyOf` group of an `allOf` in place. Previously, when one object composed several mutually-exclusive choices as sibling `oneOf`/`anyOf` under `allOf`, only the first group was shown and the rest were silently dropped. Each choice group now renders its own selector in the position it was declared, and the generated request example stays in sync per group.
+- [#9794](https://github.com/scalar/scalar/pull/9794): Keep sibling `properties` when flattening a single-member `allOf`. Previously, a schema declaring its own `properties` next to an `allOf` holding a single `$ref` lost those sibling properties: the referenced schema's `properties` overwrote them instead of being combined, and the referenced schema's `title`/`description` replaced the parent's. Sibling and inherited properties now render together, `required` lists are unioned, and the parent schema's own annotations win over the base it extends.
+- [#9757](https://github.com/scalar/scalar/pull/9757): fix: read enum metadata from array items
+
+  When an enum is defined inside an array schema's `items`, the enum values were resolved from `items` but their `x-enum-varnames`, `x-enumNames`, and `x-enumDescriptions` were still read from the outer schema, so the metadata was dropped. Both the values and their metadata are now read from the same schema.
+
+- [#9681](https://github.com/scalar/scalar/pull/9681): The "Auth Required" / "Auth Optional" badge on operations now opens on hover, not just on click
+- [#9753](https://github.com/scalar/scalar/pull/9753): fix: badge base styles no longer rely on zero specificity
+
+  The badge base rule was written with `:where(.badge)`, which the scoped-style compiler collapsed to zero specificity, letting any late-loading reset clobber the badge font size, padding, and colors. The base styles now carry real specificity, and consumers that intentionally override them (the download-link json/yaml badges and the webhook badge) keep winning through tailwind-merge and higher-specificity variant rules.
+
+- [#9766](https://github.com/scalar/scalar/pull/9766): fix: give the collapsible section trigger an accessible name and a valid `aria-controls` target
+
+  The trigger button rendered by `CompactSection` carried `aria-controls` set to its own `id`, so it declared that it controls itself, and it exposed no accessible name of its own. Screen reader users heard an unnamed button, and axe-core reported `button-name` and `aria-allowed-attr` on every model section.
+
+  The trigger now points `aria-controls` at the collapsible region, which carries its own id. While the section is collapsed the attribute is dropped entirely rather than left pointing at an element that is not rendered.
+
+  The accessible name now comes from `aria-labelledby` pointing at the heading the trigger already renders, so the name is always the visible text. Referencing the heading rather than copying it into an `aria-label` means the name cannot drift out of sync with what is on screen, which is the WCAG 2.5.3 (Label in Name) failure a duplicated string would risk.
+
+- [#9754](https://github.com/scalar/scalar/pull/9754): fix: adapt the info links to the rendered width of the reference instead of the viewport
+
+  The introduction's info links (contact, license, terms of service, external docs, and `x-scalar-links`), the section header grid, and the classic-layout selector cards switched their layout based on viewport media queries, while the rest of the reference adapts to the rendered width of the reference through the `narrow-references-container` container query. They now restyle based on the container as well, through a new `narrow:` Tailwind variant.
+
+- [#9751](https://github.com/scalar/scalar/pull/9751): fix: keep even heading-to-description spacing on the operation title in narrow layouts
+
+  The narrow (single-column) operation layout bumped the operation title's bottom margin to 24px, so the gap between the heading and its description no longer matched the 12px used on wider screens. The override is removed so the title keeps the shared 12px spacing at every width.
+
+- [#9676](https://github.com/scalar/scalar/pull/9676): Preload additional documents in a multi-document setup while the browser is idle, so switching between them is instant.
+- [#9788](https://github.com/scalar/scalar/pull/9788): Add print styles so printing (or saving to PDF) no longer renders expanded content over the text that follows it. The reference lays itself out as a fixed-viewport application, and its sticky columns were pinned to a screen measurement that is meaningless on paper. Printing now flattens that shell into ordinary document flow: navigation and floating chrome are hidden, sticky positioning and viewport-derived height caps are dropped so long examples are no longer truncated, and small units such as properties and cards avoid breaking across pages.
+- [#9691](https://github.com/scalar/scalar/pull/9691): Show the `format` of primitive array items (e.g. an array of `uuid` strings) in the schema property heading
+
 ## 1.63.0
 
 ### Minor Changes

package/dist/blocks/scalar-info-block/components/DownloadLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadLink.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"names":[],"mappings":"AAqNA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACjB,kCAAkC;IAClC,oBAAoB,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,CAAA;IACvE,iDAAiD;IACjD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAgJF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DownloadLink.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"names":[],"mappings":"AAsNA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACjB,kCAAkC;IAClC,oBAAoB,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,CAAA;IACvE,iDAAiD;IACjD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAiJF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-info-block/components/DownloadLink.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import DownloadLink_vue_vue_type_script_setup_true_lang_default from "./DownloadLink.vue.script.js";
 /* empty css                           */
 //#region src/blocks/scalar-info-block/components/DownloadLink.vue
-var DownloadLink_default = /* @__PURE__ */ _plugin_vue_export_helper_default(DownloadLink_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-deac5eaa"]]);
+var DownloadLink_default = /* @__PURE__ */ _plugin_vue_export_helper_default(DownloadLink_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-eface7e0"]]);
 //#endregion
 export { DownloadLink_default as default };
 

package/dist/blocks/scalar-info-block/components/DownloadLink.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadLink.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed } from 'vue'\n\nimport Badge from '@/components/Badge/Badge.vue'\nimport { useLocalization } from '@/features/localization'\n\nconst {\n  eventBus,\n  documentDownloadType,\n  documentUrl,\n  documentType = 'openapi',\n} = defineProps<{\n  /** The document download type. */\n  documentDownloadType: ApiReferenceConfiguration['documentDownloadType']\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /**\n   * URL of the OpenAPI document. Required when documentDownloadType is 'direct'\n   * so the link can point to the document.\n   */\n  documentUrl?: string\n  /** The kind of document being rendered. Drives the button label. */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\nconst { translate } = useLocalization()\n\nconst label = computed(() =>\n  documentType === 'asyncapi'\n    ? translate('download.asyncapi')\n    : translate('download.openapi'),\n)\n\n// The id is retrieved at the layout level.\nconst handleDownloadClick = (format: 'json' | 'yaml') => {\n  eventBus.emit('ui:download:document', { format })\n}\n</script>\n<template>\n  <div\n    v-if=\"\n      ['yaml', 'json', 'both'].includes(documentDownloadType) ||\n      (documentDownloadType === 'direct' && documentUrl)\n    \"\n    class=\"download-container group\"\n    :class=\"{\n      'download-both': documentDownloadType === 'both',\n    }\">\n    <!-- Direct link to the document -->\n    <a\n      v-if=\"documentDownloadType === 'direct' && documentUrl\"\n      class=\"download-link download-button\"\n      :href=\"documentUrl\">\n      <span>{{ label }}</span>\n    </a>\n\n    <!-- JSON  -->\n    <button\n      v-if=\"documentDownloadType === 'json' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('json')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">json</Badge>\n    </button>\n\n    <!-- YAML -->\n    <button\n      v-if=\"documentDownloadType === 'yaml' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('yaml')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">yaml</Badge>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n@reference '@/style.css';\n\n.download-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 0 0.5px 8px;\n  position: relative;\n  width: fit-content;\n  z-index: 1;\n}\n\n.download-container:has(:focus-visible)::before,\n.download-container.download-both:hover::before {\n  content: '';\n  width: calc(100% + 24px);\n  height: 90px;\n  position: absolute;\n  top: -11px;\n  left: -12px;\n  border-radius: var(--scalar-radius-lg);\n  box-shadow: var(--scalar-shadow-2);\n  pointer-events: none;\n  background: var(--scalar-background-1);\n}\n\n.download-button {\n  color: var(--scalar-link-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: fit-content;\n  padding: 0;\n  position: relative;\n  white-space: nowrap !important;\n\n  outline: none;\n}\n\n.download-button::before {\n  border-radius: var(--scalar-radius);\n  content: '';\n  height: calc(100% + 16px);\n  left: -9px;\n  position: absolute;\n  top: -8px;\n  width: calc(100% + 18px);\n}\n\n.download-button:last-of-type::before {\n  width: calc(100% + 15px);\n}\n\n.download-button:hover::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.download-button:focus-visible::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply outline;\n}\n\n.download-button span {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  line-height: 1.625;\n  z-index: 1;\n}\n\n.download-button:hover span {\n  text-decoration-color: var(--scalar-color-1, currentColor);\n  color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n  -webkit-text-decoration: var(--scalar-text-decoration-hover);\n  text-decoration: var(--scalar-text-decoration-hover);\n}\n\n/* Second button displayed when hovering over the download container */\n.download-button:nth-of-type(2) {\n  @apply sr-only;\n}\n\n.download-container:has(:focus-visible) .download-button:nth-of-type(2),\n.download-container:hover .download-button:nth-of-type(2) {\n  @apply not-sr-only;\n\n  position: absolute;\n  top: 42px;\n}\n\n.extension {\n  z-index: 1;\n  background: var(--scalar-link-color, var(--scalar-color-accent));\n  color: var(--scalar-background-1);\n}\n.download-container:has(:focus-visible) .extension,\n.download-container:hover .extension {\n  opacity: 1;\n}\n\n.download-link {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n}\n\n.download-link:hover {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  text-decoration-color: var(--font-color);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"DownloadLink.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed } from 'vue'\n\nimport Badge from '@/components/Badge/Badge.vue'\nimport { useLocalization } from '@/features/localization'\n\nconst {\n  eventBus,\n  documentDownloadType,\n  documentUrl,\n  documentType = 'openapi',\n} = defineProps<{\n  /** The document download type. */\n  documentDownloadType: ApiReferenceConfiguration['documentDownloadType']\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /**\n   * URL of the OpenAPI document. Required when documentDownloadType is 'direct'\n   * so the link can point to the document.\n   */\n  documentUrl?: string\n  /** The kind of document being rendered. Drives the button label. */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\nconst { translate } = useLocalization()\n\nconst label = computed(() =>\n  documentType === 'asyncapi'\n    ? translate('download.asyncapi')\n    : translate('download.openapi'),\n)\n\n// The id is retrieved at the layout level.\nconst handleDownloadClick = (format: 'json' | 'yaml') => {\n  eventBus.emit('ui:download:document', { format })\n}\n</script>\n<template>\n  <div\n    v-if=\"\n      ['yaml', 'json', 'both'].includes(documentDownloadType) ||\n      (documentDownloadType === 'direct' && documentUrl)\n    \"\n    class=\"download-container group\"\n    :class=\"{\n      'download-both': documentDownloadType === 'both',\n    }\">\n    <!-- Direct link to the document -->\n    <a\n      v-if=\"documentDownloadType === 'direct' && documentUrl\"\n      class=\"download-link download-button\"\n      :href=\"documentUrl\">\n      <span>{{ label }}</span>\n    </a>\n\n    <!-- JSON  -->\n    <button\n      v-if=\"documentDownloadType === 'json' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('json')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">json</Badge>\n    </button>\n\n    <!-- YAML -->\n    <button\n      v-if=\"documentDownloadType === 'yaml' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('yaml')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">yaml</Badge>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n@reference '@/style.css';\n\n.download-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 0 0.5px 8px;\n  position: relative;\n  width: fit-content;\n  z-index: 1;\n}\n\n.download-container:has(:focus-visible)::before,\n.download-container.download-both:hover::before {\n  content: '';\n  width: calc(100% + 24px);\n  height: 90px;\n  position: absolute;\n  top: -11px;\n  left: -12px;\n  border-radius: var(--scalar-radius-lg);\n  box-shadow: var(--scalar-shadow-2);\n  pointer-events: none;\n  background: var(--scalar-background-1);\n}\n\n.download-button {\n  color: var(--scalar-link-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: fit-content;\n  padding: 0;\n  position: relative;\n  white-space: nowrap !important;\n\n  outline: none;\n}\n\n.download-button::before {\n  border-radius: var(--scalar-radius);\n  content: '';\n  height: calc(100% + 16px);\n  left: -9px;\n  position: absolute;\n  top: -8px;\n  width: calc(100% + 18px);\n}\n\n.download-button:last-of-type::before {\n  width: calc(100% + 15px);\n}\n\n.download-button:hover::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.download-button:focus-visible::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply outline;\n}\n\n.download-button span {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  line-height: 1.625;\n  z-index: 1;\n}\n\n.download-button:hover span {\n  text-decoration-color: var(--scalar-color-1, currentColor);\n  color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n  -webkit-text-decoration: var(--scalar-text-decoration-hover);\n  text-decoration: var(--scalar-text-decoration-hover);\n}\n\n/* Second button displayed when hovering over the download container */\n.download-button:nth-of-type(2) {\n  @apply sr-only;\n}\n\n.download-container:has(:focus-visible) .download-button:nth-of-type(2),\n.download-container:hover .download-button:nth-of-type(2) {\n  @apply not-sr-only;\n\n  position: absolute;\n  top: 42px;\n}\n\n/* Scoped to `.badge.extension` so the accent colors override the badge base styles. */\n.badge.extension {\n  z-index: 1;\n  background: var(--scalar-link-color, var(--scalar-color-accent));\n  color: var(--scalar-background-1);\n}\n.download-container:has(:focus-visible) .extension,\n.download-container:hover .extension {\n  opacity: 1;\n}\n\n.download-link {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n}\n\n.download-link:hover {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  text-decoration-color: var(--font-color);\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-info-block/components/DownloadLink.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadLink.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed } from 'vue'\n\nimport Badge from '@/components/Badge/Badge.vue'\nimport { useLocalization } from '@/features/localization'\n\nconst {\n  eventBus,\n  documentDownloadType,\n  documentUrl,\n  documentType = 'openapi',\n} = defineProps<{\n  /** The document download type. */\n  documentDownloadType: ApiReferenceConfiguration['documentDownloadType']\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /**\n   * URL of the OpenAPI document. Required when documentDownloadType is 'direct'\n   * so the link can point to the document.\n   */\n  documentUrl?: string\n  /** The kind of document being rendered. Drives the button label. */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\nconst { translate } = useLocalization()\n\nconst label = computed(() =>\n  documentType === 'asyncapi'\n    ? translate('download.asyncapi')\n    : translate('download.openapi'),\n)\n\n// The id is retrieved at the layout level.\nconst handleDownloadClick = (format: 'json' | 'yaml') => {\n  eventBus.emit('ui:download:document', { format })\n}\n</script>\n<template>\n  <div\n    v-if=\"\n      ['yaml', 'json', 'both'].includes(documentDownloadType) ||\n      (documentDownloadType === 'direct' && documentUrl)\n    \"\n    class=\"download-container group\"\n    :class=\"{\n      'download-both': documentDownloadType === 'both',\n    }\">\n    <!-- Direct link to the document -->\n    <a\n      v-if=\"documentDownloadType === 'direct' && documentUrl\"\n      class=\"download-link download-button\"\n      :href=\"documentUrl\">\n      <span>{{ label }}</span>\n    </a>\n\n    <!-- JSON  -->\n    <button\n      v-if=\"documentDownloadType === 'json' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('json')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">json</Badge>\n    </button>\n\n    <!-- YAML -->\n    <button\n      v-if=\"documentDownloadType === 'yaml' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('yaml')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">yaml</Badge>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n@reference '@/style.css';\n\n.download-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 0 0.5px 8px;\n  position: relative;\n  width: fit-content;\n  z-index: 1;\n}\n\n.download-container:has(:focus-visible)::before,\n.download-container.download-both:hover::before {\n  content: '';\n  width: calc(100% + 24px);\n  height: 90px;\n  position: absolute;\n  top: -11px;\n  left: -12px;\n  border-radius: var(--scalar-radius-lg);\n  box-shadow: var(--scalar-shadow-2);\n  pointer-events: none;\n  background: var(--scalar-background-1);\n}\n\n.download-button {\n  color: var(--scalar-link-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: fit-content;\n  padding: 0;\n  position: relative;\n  white-space: nowrap !important;\n\n  outline: none;\n}\n\n.download-button::before {\n  border-radius: var(--scalar-radius);\n  content: '';\n  height: calc(100% + 16px);\n  left: -9px;\n  position: absolute;\n  top: -8px;\n  width: calc(100% + 18px);\n}\n\n.download-button:last-of-type::before {\n  width: calc(100% + 15px);\n}\n\n.download-button:hover::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.download-button:focus-visible::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply outline;\n}\n\n.download-button span {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  line-height: 1.625;\n  z-index: 1;\n}\n\n.download-button:hover span {\n  text-decoration-color: var(--scalar-color-1, currentColor);\n  color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n  -webkit-text-decoration: var(--scalar-text-decoration-hover);\n  text-decoration: var(--scalar-text-decoration-hover);\n}\n\n/* Second button displayed when hovering over the download container */\n.download-button:nth-of-type(2) {\n  @apply sr-only;\n}\n\n.download-container:has(:focus-visible) .download-button:nth-of-type(2),\n.download-container:hover .download-button:nth-of-type(2) {\n  @apply not-sr-only;\n\n  position: absolute;\n  top: 42px;\n}\n\n.extension {\n  z-index: 1;\n  background: var(--scalar-link-color, var(--scalar-color-accent));\n  color: var(--scalar-background-1);\n}\n.download-container:has(:focus-visible) .extension,\n.download-container:hover .extension {\n  opacity: 1;\n}\n\n.download-link {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n}\n\n.download-link:hover {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  text-decoration-color: var(--font-color);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA0BA,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,QAAQ,eACZ,QAAA,iBAAiB,aACb,UAAU,oBAAmB,GAC7B,UAAU,mBAAmB,CACnC;EAGA,MAAM,uBAAuB,WAA4B;AACvD,WAAA,SAAS,KAAK,wBAAwB,EAAE,QAAQ,CAAA;;;;;;;KAKR,SAAS,QAAA,qBAAoB,IAAY,QAAA,yBAAoB,YAAiB,QAAA,eAAA,WAAA,EADtH,mBAoCM,OAAA;;IA/BJ,OAAK,eAAA,CAAC,4BAA0B,EAAA,iBACC,QAAA,yBAAoB,QAAA,CAAA,CAAA;;IAK7C,QAAA,yBAAoB,YAAiB,QAAA,eAAA,WAAA,EAD7C,mBAKI,KAAA;;KAHF,OAAM;KACL,MAAM,QAAA;QACP,mBAAwB,QAAA,MAAA,gBAAf,MAAA,MAAK,EAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IAKR,QAAA,yBAAoB,UAAe,QAAA,yBAAoB,UAAA,WAAA,EAD/D,mBAOS,UAAA;;KALP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAgB,oBAAmB,OAAA,EAAA,CAAA,UAAA,CAAA;QACzC,mBAAwB,QAAA,MAAA,gBAAf,MAAA,MAAK,EAAA,EAAA,EACd,YAA6D,eAAA,EAAtD,OAAM,qCAAmC,EAAA;4BAAK,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;IAK/C,QAAA,yBAAoB,UAAe,QAAA,yBAAoB,UAAA,WAAA,EAD/D,mBAOS,UAAA;;KALP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAgB,oBAAmB,OAAA,EAAA,CAAA,UAAA,CAAA;QACzC,mBAAwB,QAAA,MAAA,gBAAf,MAAA,MAAK,EAAA,EAAA,EACd,YAA6D,eAAA,EAAtD,OAAM,qCAAmC,EAAA;4BAAK,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"DownloadLink.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed } from 'vue'\n\nimport Badge from '@/components/Badge/Badge.vue'\nimport { useLocalization } from '@/features/localization'\n\nconst {\n  eventBus,\n  documentDownloadType,\n  documentUrl,\n  documentType = 'openapi',\n} = defineProps<{\n  /** The document download type. */\n  documentDownloadType: ApiReferenceConfiguration['documentDownloadType']\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /**\n   * URL of the OpenAPI document. Required when documentDownloadType is 'direct'\n   * so the link can point to the document.\n   */\n  documentUrl?: string\n  /** The kind of document being rendered. Drives the button label. */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\nconst { translate } = useLocalization()\n\nconst label = computed(() =>\n  documentType === 'asyncapi'\n    ? translate('download.asyncapi')\n    : translate('download.openapi'),\n)\n\n// The id is retrieved at the layout level.\nconst handleDownloadClick = (format: 'json' | 'yaml') => {\n  eventBus.emit('ui:download:document', { format })\n}\n</script>\n<template>\n  <div\n    v-if=\"\n      ['yaml', 'json', 'both'].includes(documentDownloadType) ||\n      (documentDownloadType === 'direct' && documentUrl)\n    \"\n    class=\"download-container group\"\n    :class=\"{\n      'download-both': documentDownloadType === 'both',\n    }\">\n    <!-- Direct link to the document -->\n    <a\n      v-if=\"documentDownloadType === 'direct' && documentUrl\"\n      class=\"download-link download-button\"\n      :href=\"documentUrl\">\n      <span>{{ label }}</span>\n    </a>\n\n    <!-- JSON  -->\n    <button\n      v-if=\"documentDownloadType === 'json' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('json')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">json</Badge>\n    </button>\n\n    <!-- YAML -->\n    <button\n      v-if=\"documentDownloadType === 'yaml' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('yaml')\">\n      <span>{{ label }}</span>\n      <Badge class=\"extension hidden group-hover:flex\">yaml</Badge>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n@reference '@/style.css';\n\n.download-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 0 0.5px 8px;\n  position: relative;\n  width: fit-content;\n  z-index: 1;\n}\n\n.download-container:has(:focus-visible)::before,\n.download-container.download-both:hover::before {\n  content: '';\n  width: calc(100% + 24px);\n  height: 90px;\n  position: absolute;\n  top: -11px;\n  left: -12px;\n  border-radius: var(--scalar-radius-lg);\n  box-shadow: var(--scalar-shadow-2);\n  pointer-events: none;\n  background: var(--scalar-background-1);\n}\n\n.download-button {\n  color: var(--scalar-link-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: fit-content;\n  padding: 0;\n  position: relative;\n  white-space: nowrap !important;\n\n  outline: none;\n}\n\n.download-button::before {\n  border-radius: var(--scalar-radius);\n  content: '';\n  height: calc(100% + 16px);\n  left: -9px;\n  position: absolute;\n  top: -8px;\n  width: calc(100% + 18px);\n}\n\n.download-button:last-of-type::before {\n  width: calc(100% + 15px);\n}\n\n.download-button:hover::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.download-button:focus-visible::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply outline;\n}\n\n.download-button span {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  line-height: 1.625;\n  z-index: 1;\n}\n\n.download-button:hover span {\n  text-decoration-color: var(--scalar-color-1, currentColor);\n  color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n  -webkit-text-decoration: var(--scalar-text-decoration-hover);\n  text-decoration: var(--scalar-text-decoration-hover);\n}\n\n/* Second button displayed when hovering over the download container */\n.download-button:nth-of-type(2) {\n  @apply sr-only;\n}\n\n.download-container:has(:focus-visible) .download-button:nth-of-type(2),\n.download-container:hover .download-button:nth-of-type(2) {\n  @apply not-sr-only;\n\n  position: absolute;\n  top: 42px;\n}\n\n/* Scoped to `.badge.extension` so the accent colors override the badge base styles. */\n.badge.extension {\n  z-index: 1;\n  background: var(--scalar-link-color, var(--scalar-color-accent));\n  color: var(--scalar-background-1);\n}\n.download-container:has(:focus-visible) .extension,\n.download-container:hover .extension {\n  opacity: 1;\n}\n\n.download-link {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n}\n\n.download-link:hover {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  text-decoration-color: var(--font-color);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA0BA,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,QAAQ,eACZ,QAAA,iBAAiB,aACb,UAAU,oBAAmB,GAC7B,UAAU,mBAAmB,CACnC;EAGA,MAAM,uBAAuB,WAA4B;AACvD,WAAA,SAAS,KAAK,wBAAwB,EAAE,QAAQ,CAAA;;;;;;;KAKR,SAAS,QAAA,qBAAoB,IAAY,QAAA,yBAAoB,YAAiB,QAAA,eAAA,WAAA,EADtH,mBAoCM,OAAA;;IA/BJ,OAAK,eAAA,CAAC,4BAA0B,EAAA,iBACC,QAAA,yBAAoB,QAAA,CAAA,CAAA;;IAK7C,QAAA,yBAAoB,YAAiB,QAAA,eAAA,WAAA,EAD7C,mBAKI,KAAA;;KAHF,OAAM;KACL,MAAM,QAAA;QACP,mBAAwB,QAAA,MAAA,gBAAf,MAAA,MAAK,EAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IAKR,QAAA,yBAAoB,UAAe,QAAA,yBAAoB,UAAA,WAAA,EAD/D,mBAOS,UAAA;;KALP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAgB,oBAAmB,OAAA,EAAA,CAAA,UAAA,CAAA;QACzC,mBAAwB,QAAA,MAAA,gBAAf,MAAA,MAAK,EAAA,EAAA,EACd,YAA6D,eAAA,EAAtD,OAAM,qCAAmC,EAAA;4BAAK,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;IAK/C,QAAA,yBAAoB,UAAe,QAAA,yBAAoB,UAAA,WAAA,EAD/D,mBAOS,UAAA;;KALP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAgB,oBAAmB,OAAA,EAAA,CAAA,UAAA,CAAA;QACzC,mBAAwB,QAAA,MAAA,gBAAf,MAAA,MAAK,EAAA,EAAA,EACd,YAA6D,eAAA,EAAtD,OAAM,qCAAmC,EAAA;4BAAK,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA"}

package/dist/blocks/scalar-info-block/components/IntroductionCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionCard.vue"],"names":[],"mappings":"AAwEA,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAC;AA+CF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"IntroductionCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionCard.vue"],"names":[],"mappings":"AAkEA,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAC;AA2CF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/blocks/scalar-info-block/components/IntroductionCard.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import IntroductionCard_vue_vue_type_script_setup_true_lang_default from "./IntroductionCard.vue.script.js";
 /* empty css                               */
 //#region src/blocks/scalar-info-block/components/IntroductionCard.vue
-var IntroductionCard_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionCard_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5764c94a"]]);
+var IntroductionCard_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionCard_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e60166e1"]]);
 //#endregion
 export { IntroductionCard_default as default };
 

package/dist/blocks/scalar-info-block/components/IntroductionCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionCard.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { row } = defineProps<{\n  row?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-card\"\n    :class=\"{ 'introduction-card-row': row }\">\n    <slot />\n  </div>\n</template>\n\n<style scoped>\n/* Modern layout */\n.introduction-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.introduction-card-row {\n  gap: 24px;\n}\n/* Classic layout */\n@media (min-width: 600px) {\n  .introduction-card-row {\n    flex-flow: row wrap;\n  }\n}\n.introduction-card-row > * {\n  flex: 1;\n}\n@media (min-width: 600px) {\n  .introduction-card-row > * {\n    min-width: min-content;\n  }\n}\n@media (max-width: 600px) {\n  .introduction-card-row > * {\n    max-width: 100%;\n  }\n}\n@container (max-width: 900px) {\n  .introduction-card-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0px;\n  }\n}\n.introduction-card :deep(.security-scheme-label) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-semibold);\n}\n.introduction-card-row :deep(.scalar-card:nth-of-type(2) .scalar-card-header) {\n  display: none;\n}\n.introduction-card-row :deep(.scalar-card:nth-of-type(2) .scalar-card-header) {\n  display: none;\n}\n.introduction-card-row\n  :deep(\n    .scalar-card:nth-of-type(2)\n      .scalar-card-header.scalar-card--borderless\n      + .scalar-card-content\n  ) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"IntroductionCard.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { row } = defineProps<{\n  row?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-card\"\n    :class=\"{ 'introduction-card-row': row }\">\n    <slot />\n  </div>\n</template>\n\n<style scoped>\n/* Modern layout */\n.introduction-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.introduction-card-row {\n  gap: 24px;\n}\n/*\n * Classic layout: a row of cards that stacks when the reference is narrow.\n * The reference is an embeddable widget, so the cards adapt to its rendered\n * width (see Content.vue), not to the viewport.\n */\n.introduction-card-row {\n  flex-flow: row wrap;\n}\n.introduction-card-row > * {\n  flex: 1;\n  min-width: min-content;\n}\n@container narrow-references-container (max-width: 900px) {\n  .introduction-card-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n  .introduction-card-row > * {\n    min-width: auto;\n    max-width: 100%;\n  }\n}\n.introduction-card :deep(.security-scheme-label) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-semibold);\n}\n.introduction-card-row :deep(.scalar-card:nth-of-type(2) .scalar-card-header) {\n  display: none;\n}\n.introduction-card-row\n  :deep(\n    .scalar-card:nth-of-type(2)\n      .scalar-card-header.scalar-card--borderless\n      + .scalar-card-content\n  ) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-info-block/components/IntroductionCard.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionCard.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { row } = defineProps<{\n  row?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-card\"\n    :class=\"{ 'introduction-card-row': row }\">\n    <slot />\n  </div>\n</template>\n\n<style scoped>\n/* Modern layout */\n.introduction-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.introduction-card-row {\n  gap: 24px;\n}\n/* Classic layout */\n@media (min-width: 600px) {\n  .introduction-card-row {\n    flex-flow: row wrap;\n  }\n}\n.introduction-card-row > * {\n  flex: 1;\n}\n@media (min-width: 600px) {\n  .introduction-card-row > * {\n    min-width: min-content;\n  }\n}\n@media (max-width: 600px) {\n  .introduction-card-row > * {\n    max-width: 100%;\n  }\n}\n@container (max-width: 900px) {\n  .introduction-card-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0px;\n  }\n}\n.introduction-card :deep(.security-scheme-label) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-semibold);\n}\n.introduction-card-row :deep(.scalar-card:nth-of-type(2) .scalar-card-header) {\n  display: none;\n}\n.introduction-card-row :deep(.scalar-card:nth-of-type(2) .scalar-card-header) {\n  display: none;\n}\n.introduction-card-row\n  :deep(\n    .scalar-card:nth-of-type(2)\n      .scalar-card-header.scalar-card--borderless\n      + .scalar-card-content\n  ) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":";;;;;;;uBAOE,mBAIM,OAAA,EAHJ,OAAK,eAAA,CAAC,qBAAmB,EAAA,yBACU,QAAA,KAAG,CAAA,CAAA,EAAA,EAAA,CACtC,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"IntroductionCard.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { row } = defineProps<{\n  row?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-card\"\n    :class=\"{ 'introduction-card-row': row }\">\n    <slot />\n  </div>\n</template>\n\n<style scoped>\n/* Modern layout */\n.introduction-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.introduction-card-row {\n  gap: 24px;\n}\n/*\n * Classic layout: a row of cards that stacks when the reference is narrow.\n * The reference is an embeddable widget, so the cards adapt to its rendered\n * width (see Content.vue), not to the viewport.\n */\n.introduction-card-row {\n  flex-flow: row wrap;\n}\n.introduction-card-row > * {\n  flex: 1;\n  min-width: min-content;\n}\n@container narrow-references-container (max-width: 900px) {\n  .introduction-card-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n  .introduction-card-row > * {\n    min-width: auto;\n    max-width: 100%;\n  }\n}\n.introduction-card :deep(.security-scheme-label) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-semibold);\n}\n.introduction-card-row :deep(.scalar-card:nth-of-type(2) .scalar-card-header) {\n  display: none;\n}\n.introduction-card-row\n  :deep(\n    .scalar-card:nth-of-type(2)\n      .scalar-card-header.scalar-card--borderless\n      + .scalar-card-content\n  ) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":";;;;;;;uBAOE,mBAIM,OAAA,EAHJ,OAAK,eAAA,CAAC,qBAAmB,EAAA,yBACU,QAAA,KAAG,CAAA,CAAA,EAAA,EAAA,CACtC,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,EAAA,EAAA"}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLoading.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"names":[],"mappings":"AAyGA,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA8PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"IntroductionLoading.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"names":[],"mappings":"AA0GA,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA8PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import IntroductionLoading_vue_vue_type_script_setup_true_lang_default from "./IntroductionLoading.vue.script.js";
 /* empty css                                  */
 //#region src/blocks/scalar-info-block/components/IntroductionLoading.vue
-var IntroductionLoading_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLoading_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1bd6e256"]]);
+var IntroductionLoading_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLoading_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-41a61989"]]);
 //#endregion
 export { IntroductionLoading_default as default };
 

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLoading.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-loading flex flex-col gap-5\"\n    aria-hidden=\"true\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid at xl) -->\n    <div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div class=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"flex flex-col gap-3 sm:flex-row sm:gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"IntroductionLoading.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"introduction-loading flex flex-col gap-5\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid on wide references) -->\n    <div class=\"narrow:grid-cols-1 narrow:gap-3 grid grid-cols-2 gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div\n        class=\"narrow:justify-start flex flex-wrap items-center justify-end gap-2\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"narrow:flex-col narrow:gap-3 flex gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.script.js

@@ -3,12 +3,12 @@ import SectionColumns_default from "../../../components/Section/SectionColumns.v
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
 //#region src/blocks/scalar-info-block/components/IntroductionLoading.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	class: "introduction-loading flex flex-col gap-5",
-	"aria-hidden": "true"
+	"aria-hidden": "true",
+	class: "introduction-loading flex flex-col gap-5"
 };
 var _hoisted_2 = {
 	key: 0,
-	class: "flex flex-col gap-3 sm:flex-row sm:gap-6"
+	class: "narrow:flex-col narrow:gap-3 flex gap-6"
 };
 var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "IntroductionLoading",
@@ -24,7 +24,7 @@ var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
-				_cache[3] || (_cache[3] = createStaticVNode("<div class=\"flex gap-1.5\" data-v-1bd6e256><div class=\"introduction-skeleton h-6 w-14 rounded-full\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-6 w-24 rounded-full\" data-v-1bd6e256></div></div><div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\" data-v-1bd6e256><div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" data-v-1bd6e256></div><div class=\"flex flex-wrap items-center gap-2 xl:justify-end\" data-v-1bd6e256><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-12 rounded\" data-v-1bd6e256></div></div></div>", 2)),
+				_cache[3] || (_cache[3] = createStaticVNode("<div class=\"flex gap-1.5\" data-v-41a61989><div class=\"introduction-skeleton h-6 w-14 rounded-full\" data-v-41a61989></div><div class=\"introduction-skeleton h-6 w-24 rounded-full\" data-v-41a61989></div></div><div class=\"narrow:grid-cols-1 narrow:gap-3 grid grid-cols-2 gap-12\" data-v-41a61989><div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" data-v-41a61989></div><div class=\"narrow:justify-start flex flex-wrap items-center justify-end gap-2\" data-v-41a61989><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-41a61989></div><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-41a61989></div><div class=\"introduction-skeleton h-5 w-12 rounded\" data-v-41a61989></div></div></div>", 2)),
 				createVNode(unref(SectionColumns_default), null, {
 					default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
 						default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "flex flex-col gap-3" }, [

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLoading.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-loading flex flex-col gap-5\"\n    aria-hidden=\"true\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid at xl) -->\n    <div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div class=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"flex flex-col gap-3 sm:flex-row sm:gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;uBAmBE,mBAkDM,OAlDN,YAkDM;;IAjCJ,YAwBiB,MAAA,uBAAA,EAAA,MAAA;4BATC,CAdhB,YAcgB,MAAA,sBAAA,EAAA,MAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZN,mBAYM,OAAA,EAZD,OAAM,uBAAqB,EAAA;OAE9B,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OAExD,mBAAwD,OAAA,EAAnD,OAAM,4CAA0C,CAAA;OACrD,mBAAyD,OAAA,EAApD,OAAM,6CAA2C,CAAA;OACtD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OAEpD,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OACxD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;;;SAInC,QAAA,YAAA,WAAA,EAArB,YAMgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAJN,mBAIM,OAAA,EAJD,OAAM,sBAAoB,EAAA;OAC7B,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;;;;;;KAMtD,QAAA,YAAA,WAAA,EADT,mBAMM,OANN,YAMM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAHJ,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA"}
+{"version":3,"file":"IntroductionLoading.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"introduction-loading flex flex-col gap-5\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid on wide references) -->\n    <div class=\"narrow:grid-cols-1 narrow:gap-3 grid grid-cols-2 gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div\n        class=\"narrow:justify-start flex flex-wrap items-center justify-end gap-2\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"narrow:flex-col narrow:gap-3 flex gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;uBAmBE,mBAmDM,OAnDN,YAmDM;;IAjCJ,YAwBiB,MAAA,uBAAA,EAAA,MAAA;4BATC,CAdhB,YAcgB,MAAA,sBAAA,EAAA,MAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZN,mBAYM,OAAA,EAZD,OAAM,uBAAqB,EAAA;OAE9B,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OAExD,mBAAwD,OAAA,EAAnD,OAAM,4CAA0C,CAAA;OACrD,mBAAyD,OAAA,EAApD,OAAM,6CAA2C,CAAA;OACtD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OAEpD,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OACxD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;;;SAInC,QAAA,YAAA,WAAA,EAArB,YAMgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAJN,mBAIM,OAAA,EAJD,OAAM,sBAAoB,EAAA;OAC7B,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;;;;;;KAMtD,QAAA,YAAA,WAAA,EADT,mBAMM,OANN,YAMM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAHJ,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA"}