@scalar/components 0.27.8 → 0.27.10

package/README.md

@@ -18,9 +18,8 @@ Scalar Components provides a library of components used across Scalar products.
 Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.
 
 - **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
-- **[Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
-- **[SDKs](https://scalar.com/products/sdks/getting-started)** — Type-safe client libraries in TypeScript, Python, Go, PHP, Java, and Ruby.
-- **[MCP Servers](https://scalar.com/products/agent/getting-started)** — Generate secure MCP servers from your API spec.
+- **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
+- **[SDK Generator](https://scalar.com/products/sdk-generator/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
 - **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.
 
 20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkeyTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border-tooltip *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarHotkeyTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.script.js

@@ -17,7 +17,7 @@ var ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			content: computed(() => {
 				if (!document) return "";
 				const el = document.createElement("div");
-				const hotKeyClass = "-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border-tooltip *:rounded *:px-1 *:flex *:items-center *:justify-center";
+				const hotKeyClass = "-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center";
 				if (__props.content) render(h("div", { class: "flex items-center gap-2" }, [__props.content, h(ScalarHotkey_default, {
 					class: hotKeyClass,
 					hotkey: __props.hotkey,

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border-tooltip *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAwCA,MAAM,aAAsC,IAAI,KAAI;AA4CpD,aAAW;GACT,SAxCsB,eAAuB;AAC7C,QAAI,CAAC,SAAU,QAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,MAAK;IAEvC,MAAM,cACJ;AAEF,QAAI,QAAA,QAEF,QACE,EAAE,OAAO,EAAE,OAAO,2BAA2B,EAAE,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,CACH,CAAC,EACF,GACF;QAEA,QACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,EACF,GACF;AAMF,WAHa,GAAG;KAIjB;GAIC,eAAe;GACf,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAwCA,MAAM,aAAsC,IAAI,KAAI;AA4CpD,aAAW;GACT,SAxCsB,eAAuB;AAC7C,QAAI,CAAC,SAAU,QAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,MAAK;IAEvC,MAAM,cACJ;AAEF,QAAI,QAAA,QAEF,QACE,EAAE,OAAO,EAAE,OAAO,2BAA2B,EAAE,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,CACH,CAAC,EACF,GACF;QAEA,QACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,EACF,GACF;AAMF,WAHa,GAAG;KAIjB;GAIC,eAAe;GACf,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAmHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding: 8px;\n\n  padding: var(--scalar-tooltip-padding);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-medium break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded bg-b-tooltip -z-1 backdrop-blur;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n\n:where(body.dark-mode) > .scalar-tooltip:before {\n  @apply shadow-border;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding: 8px;\n\n  padding: var(--scalar-tooltip-padding);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-medium break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded bg-b-tooltip -z-1 backdrop-blur;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n\n:where(body.dark-mode) > .scalar-tooltip:before {\n  @apply shadow-border;\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,KAAI;AAEpD,aAAW;GACT,SAAS,eAAe,QAAA,QAAQ;GAChC,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,KAAI;AAEpD,aAAW;GACT,SAAS,eAAe,QAAA,QAAQ;GAChC,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/style.css

@@ -194,6 +194,14 @@
     }
   }
 
+  @media (max-resolution: 1.5x) {
+    @supports ((-moz-appearance: none)) {
+      :root {
+        --scalar-border-width: 1px;
+      }
+    }
+  }
+
   :root {
     --scalar-text-decoration: underline;
     --scalar-text-decoration-hover: underline;
@@ -261,8 +269,17 @@
     --scalar-button-1: #000;
     --scalar-button-1-hover: #000c;
     --scalar-button-1-color: #fff;
-    --scalar-tooltip-background: #1a1a1ae6;
-    --scalar-tooltip-color: #ffffffd9;
+    --scalar-tooltip-background: var(--scalar-background-1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .light-mode {
+      --scalar-tooltip-background: color-mix(in srgb, var(--scalar-background-1), transparent 10%);
+    }
+  }
+
+  .light-mode {
+    --scalar-tooltip-color: var(--scalar-color-1);
     --scalar-color-alert: var(--scalar-color-orange);
   }
 
@@ -2655,14 +2672,8 @@
   border-width: var(--scalar-border-width);
 }
 
-:is(.scalar-app .\*\:border-border-tooltip > *) {
-  border-color: var(--scalar-tooltip-color);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(.scalar-app .\*\:border-border-tooltip > *) {
-    border-color: color-mix(in srgb, var(--scalar-tooltip-color), var(--scalar-tooltip-background));
-  }
+:is(.scalar-app .\*\:border-border > *) {
+  border-color: var(--scalar-border-color);
 }
 
 :is(.scalar-app .\*\:px-1 > *) {
@@ -4572,15 +4583,7 @@ to {
 @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
 *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
+      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -4595,38 +4598,52 @@ to {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
 }
 }
 }
 :where(body) > .scalar-tooltip {
-  --scalar-tooltip-padding: 8px;
-  padding: var(--scalar-tooltip-padding);
+  --scalar-tooltip-padding-x: 8px;
+  --scalar-tooltip-padding-y: 6px;
+  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);
   z-index: 99999;
   max-width: 320px;
   font-size: var(--scalar-font-size-5);
-  --tw-font-weight: var(--scalar-semibold);
+  --tw-font-weight: var(--scalar-regular);
   line-height: 16px;
-  font-weight: var(--scalar-semibold);
+  font-weight: var(--scalar-regular);
   overflow-wrap: break-word;
   color: var(--scalar-tooltip-color);
 }
 :where(body) > .scalar-tooltip[data-side="top"] {
-  padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-bottom: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip[data-side="bottom"] {
-  padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-top: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip[data-side="left"] {
-  padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-right: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip[data-side="right"] {
-  padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-left: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip:before {
   content: "";
   z-index: calc(1 * -1);
-  border-radius: var(--scalar-radius-md);
+  border-radius: var(--scalar-radius-lg);
+  border-style: var(--tw-border-style);
+  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
+  --tw-shadow: var(--scalar-shadow-1);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
   backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
@@ -4645,49 +4662,14 @@ to {
 :where(body) > .scalar-tooltip[data-side="right"]:before {
   left: var(--scalar-tooltip-offset);
 }
-:where(body.dark-mode) > .scalar-tooltip:before {
-  --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
 }
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-sepia {
+@property --tw-border-style {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: solid;
 }
 @property --tw-shadow {
   syntax: "*";
@@ -4754,6 +4736,42 @@ to {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
 
 .scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
   display: none;

package/dist/vue-styles.css

@@ -1129,15 +1129,7 @@ to {
 @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
 *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
+      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1152,38 +1144,52 @@ to {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
 }
 }
 }
 :where(body) > .scalar-tooltip {
-  --scalar-tooltip-padding: 8px;
-  padding: var(--scalar-tooltip-padding);
+  --scalar-tooltip-padding-x: 8px;
+  --scalar-tooltip-padding-y: 6px;
+  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);
   z-index: 99999;
   max-width: 320px;
   font-size: var(--scalar-font-size-5);
-  --tw-font-weight: var(--scalar-semibold);
+  --tw-font-weight: var(--scalar-regular);
   line-height: 16px;
-  font-weight: var(--scalar-semibold);
+  font-weight: var(--scalar-regular);
   overflow-wrap: break-word;
   color: var(--scalar-tooltip-color);
 }
 :where(body) > .scalar-tooltip[data-side="top"] {
-  padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-bottom: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip[data-side="bottom"] {
-  padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-top: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip[data-side="left"] {
-  padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-right: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip[data-side="right"] {
-  padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-left: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
 :where(body) > .scalar-tooltip:before {
   content: "";
   z-index: calc(1 * -1);
-  border-radius: var(--scalar-radius-md);
+  border-radius: var(--scalar-radius-lg);
+  border-style: var(--tw-border-style);
+  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
+  --tw-shadow: var(--scalar-shadow-1);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
   backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
@@ -1202,49 +1208,14 @@ to {
 :where(body) > .scalar-tooltip[data-side="right"]:before {
   left: var(--scalar-tooltip-offset);
 }
-:where(body.dark-mode) > .scalar-tooltip:before {
-  --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
 }
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-opacity {
+@property --tw-border-style {
   syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: solid;
 }
 @property --tw-shadow {
   syntax: "*";
@@ -1311,6 +1282,42 @@ to {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
 
 .scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
   display: none;

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.27.8",
+  "version": "0.27.10",
   "engines": {
     "node": ">=22"
   },
@@ -221,11 +221,11 @@
     "radix-vue": "^1.9.17",
     "vue": "^3.5.30",
     "vue-component-type-helpers": "^3.2.6",
-    "@scalar/code-highlight": "0.4.2",
-    "@scalar/helpers": "0.9.1",
-    "@scalar/themes": "0.17.0",
-    "@scalar/icons": "0.7.4",
-    "@scalar/use-hooks": "0.4.8"
+    "@scalar/code-highlight": "0.4.3",
+    "@scalar/icons": "0.7.5",
+    "@scalar/helpers": "0.9.2",
+    "@scalar/themes": "0.17.2",
+    "@scalar/use-hooks": "0.4.9"
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",