@scalar/components 0.30.7 → 0.31.1

package/README.md

@@ -114,6 +114,12 @@ Since you can directly target the reference element with Tailwind classes any cl
 </ScalarPopover>
 ```
 
+The floating element also paints its own surface: `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`. To change the background, override both modes, since `bg-*` alone does not replace the `dark:` variant:
+
+```html
+<ScalarPopover class="bg-b-2 dark:bg-b-2">...</ScalarPopover>
+```
+
 ## CSS Layers
 
 The components package uses the same [CSS Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) as the themes package to apply the theme styles. For more information see the [themes README](https://github.com/scalar/scalar/tree/main/packages/themes).

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AAuMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;;cApC1B,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;kGA+LlC,CAAC"}
+{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AAuMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAEN,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;;cApC1B,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAWV,+CAA+C;aACtC,MAAM,GAAG,MAAM;;cA5BtB,MAAM,GAAG,MAAM;2BACF,MAAM;WACtB,mBAAmB,GAAG,MAAM;kBACrB,OAAO;sBACH,MAAM,GAAG,MAAM,EAAE;WAC5B,QAAQ,GAAG,OAAO,GAAG,KAAK;IACjC;;;;OAIG;YACK,MAAM;IACd;;;OAGG;gBACS,MAAM;;IAeV;;;;OAIG;0BACmB,MAAM;kGAiMlC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlock.vue.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using highlight.js.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarCodeBlock.vue.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using highlight.js.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 p-0 border-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":""}

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

@@ -61,7 +61,7 @@ var ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				tabindex: "0"
 			}, [createElementVNode("pre", {
 				id: unref(id),
-				class: normalizeClass(["m-0 bg-transparent text-nowrap whitespace-pre w-fit", { "pr-6": reserveCopySpace.value }]),
+				class: normalizeClass(["m-0 p-0 border-0 bg-transparent text-nowrap whitespace-pre w-fit", { "pr-6": reserveCopySpace.value }]),
 				innerHTML: highlightedCode.value
 			}, null, 10, _hoisted_2)], 8, _hoisted_1), showCopy.value ? (openBlock(), createBlock(unref(ScalarCodeBlockCopy_default), {
 				key: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlock.vue.script.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using highlight.js.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,MAAM,KAAK,MAAM;;EAGjB,MAAM,gBAAgB,eACd,QAAA,wBAAwB,gBAAgB,QAAA,WAAW,EAAE,CAC7D;EAEA,MAAM,kBAAkB,eAAe;GASrC,OARa,gBAAgB,cAAc,OAAO;IAChD,MAAM,QAAA,KAAK,KAAK;IAChB,WAAW;IACX,aAAa,QAAA;IACb,iBAAiB,QAAA;GACnB,CAGO,CAAA,CAAK,MAAM,GAAG,EAAE;EACzB,CAAC;;EAGD,MAAM,YAAY,eAAe,CAAC,cAAc,MAAM,SAAS,IAAI,CAAC;EAEpE,MAAM,iBAAiB,eAAe;GACpC,OACE,cAAc,UAAU,QACxB,cAAc,UAAU,UACxB,cAAc,UAAU;EAE5B,CAAC;;EAGD,MAAM,WAAW,eAAe,QAAA,QAAQ,eAAe,KAAK;;;;;;EAO5D,MAAM,mBAAmB,eAAe,UAAU,SAAS,SAAS,KAAK;EAGzE,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBA+CM,OAAA,eAAA,mBA9CW,MAAA,EAAA,CAAE,CAAA,oDAAA,uDAAA,CAAA,CAAA,GAAA,CAWjB,mBAUM,OAAA;IATH,cAAY,QAAA;IACb,OAAM;IACN,MAAK;IACL,UAAS;OACT,mBAI6B,OAAA;IAH1B,IAAI,MAAA,EAAA;IACL,OAAK,eAAA,CAAC,uDAAqD,EAAA,QACzC,iBAAA,MAAgB,CAAA,CAAA;IAClC,WAAQ,gBAAA;8CAGJ,SAAA,SAAA,UAAA,GADR,YAuBsB,MAAA,2BAAA,GAAA;;IArBnB,iBAAe,MAAA,EAAA;IAChB,OAAK,eAAA,CAAC,6BAA2B,CACf,UAAA,QAAA,yCAAA,qBAAA,EAAA,eAAuH,QAAA,SAAI,SAAA,CAAA,CAAA,CAAA;IAM5I,SAAS,cAAA;IACT,WAAW,QAAA;IACX,MAAM,QAAA;IACN,UAAQ,CAAG,UAAA;;IACD,UAAQ,cAOV,CANP,YAMO,4BAAA,EALL,OAAK,eAAA,CAAC,6BAA2B,CACX,UAAA,QAAA,0EAAA,mBAAA,CAAA,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarCodeBlock.vue.script.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Code Block component\n *\n * Renders syntax-highlighted code using highlight.js.\n * Supports line numbers, credential masking, and an optional copy button.\n *\n * @example\n * <ScalarCodeBlock content=\"const x = 1\" lang=\"javascript\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n  /**\n   * Accessible name for the code scroller. Long code scrolls inside a focusable region so\n   * keyboard users can reach it, and a focusable region needs a name or screen readers announce\n   * nothing when focus lands on it.\n   */\n  label?: string\n  /**\n   * Accessible name for the copy button. The visible label only reads \"Copy\" (and the language)\n   * while the block is hovered, so the name has to say what is copied on its own.\n   */\n  copyLabel?: string\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  label = 'Code sample',\n  copyLabel,\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\n/** Whether the copy button is rendered on top of the code */\nconst showCopy = computed(() => copy && isContentValid.value)\n\n/**\n * A one-liner has the copy button floating over the end of the line, so the line needs room to\n * scroll clear of the button. The padding goes on the `w-fit` <pre> because browsers disagree about\n * whether trailing padding on an `overflow-x` container is scrollable.\n */\nconst reserveCopySpace = computed(() => isOneLine.value && showCopy.value)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <!--\n      Inherits the corners so the inset focus ring follows a rounded code block.\n      Always a tab stop so code that scrolls stays reachable by keyboard (WCAG 2.1.1). A named\n      group rather than a region, so every code sample does not add a landmark.\n    -->\n    <div\n      :aria-label=\"label\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 rounded-[inherit] min-h-0 min-w-0 flex-1\"\n      role=\"group\"\n      tabindex=\"0\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 p-0 border-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        :class=\"{ 'pr-6': reserveCopySpace }\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"showCopy\"\n      :aria-controls=\"id\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-1/2 -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :copyLabel=\"copyLabel\"\n      :lang=\"lang\"\n      :showLang=\"!isOneLine\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Disable font ligatures so code renders with literal characters */\n.scalar-code-block pre {\n  font-variant-ligatures: none;\n}\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,MAAM,KAAK,MAAM;;EAGjB,MAAM,gBAAgB,eACd,QAAA,wBAAwB,gBAAgB,QAAA,WAAW,EAAE,CAC7D;EAEA,MAAM,kBAAkB,eAAe;GASrC,OARa,gBAAgB,cAAc,OAAO;IAChD,MAAM,QAAA,KAAK,KAAK;IAChB,WAAW;IACX,aAAa,QAAA;IACb,iBAAiB,QAAA;GACnB,CAGO,CAAA,CAAK,MAAM,GAAG,EAAE;EACzB,CAAC;;EAGD,MAAM,YAAY,eAAe,CAAC,cAAc,MAAM,SAAS,IAAI,CAAC;EAEpE,MAAM,iBAAiB,eAAe;GACpC,OACE,cAAc,UAAU,QACxB,cAAc,UAAU,UACxB,cAAc,UAAU;EAE5B,CAAC;;EAGD,MAAM,WAAW,eAAe,QAAA,QAAQ,eAAe,KAAK;;;;;;EAO5D,MAAM,mBAAmB,eAAe,UAAU,SAAS,SAAS,KAAK;EAGzE,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBA+CM,OAAA,eAAA,mBA9CW,MAAA,EAAA,CAAE,CAAA,oDAAA,uDAAA,CAAA,CAAA,GAAA,CAWjB,mBAUM,OAAA;IATH,cAAY,QAAA;IACb,OAAM;IACN,MAAK;IACL,UAAS;OACT,mBAI6B,OAAA;IAH1B,IAAI,MAAA,EAAA;IACL,OAAK,eAAA,CAAC,oEAAkE,EAAA,QACtD,iBAAA,MAAgB,CAAA,CAAA;IAClC,WAAQ,gBAAA;8CAGJ,SAAA,SAAA,UAAA,GADR,YAuBsB,MAAA,2BAAA,GAAA;;IArBnB,iBAAe,MAAA,EAAA;IAChB,OAAK,eAAA,CAAC,6BAA2B,CACf,UAAA,QAAA,yCAAA,qBAAA,EAAA,eAAuH,QAAA,SAAI,SAAA,CAAA,CAAA,CAAA;IAM5I,SAAS,cAAA;IACT,WAAW,QAAA;IACX,MAAM,QAAA;IACN,UAAQ,CAAG,UAAA;;IACD,UAAQ,cAOV,CANP,YAMO,4BAAA,EALL,OAAK,eAAA,CAAC,6BAA2B,CACX,UAAA,QAAA,0EAAA,mBAAA,CAAA,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AA6DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IASlB,yCAAyC;iBAC5B,OAAO;;;;IADpB,yCAAyC;iBAC5B,OAAO;;;kFAsFhB,CAAC"}
+{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AA6DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IASlB,yCAAyC;iBAC5B,OAAO;;;;IADpB,yCAAyC;iBAC5B,OAAO;;;kFAuFhB,CAAC"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js

@@ -19,7 +19,7 @@ var ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default = /*
 			return openBlock(), createElementBlock("button", mergeProps({
 				"aria-pressed": model.value,
 				type: "button"
-			}, unref(cx)("group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none"), { onClick: _cache[0] || (_cache[0] = ($event) => model.value = !model.value) }), [_cache[1] || (_cache[1] = createElementVNode("div", { class: "h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1" }, null, -1)), createElementVNode("div", { class: normalizeClass(["size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out", { "translate-x-[14px]": model.value }]) }, [createVNode(ScalarColorModeToggleIcon_default, {
+			}, unref(cx)("group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none"), { onClick: _cache[0] || (_cache[0] = ($event) => model.value = !model.value) }), [_cache[1] || (_cache[1] = createElementVNode("div", { class: "h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1" }, null, -1)), createElementVNode("div", { class: normalizeClass(["size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out", { "translate-x-[14px]": model.value }]) }, [createVNode(ScalarColorModeToggleIcon_default, {
 				is: "div",
 				mode: model.value ? "dark" : "light"
 			}, null, 8, ["mode"])], 2)], 16, _hoisted_1);

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarColorModeToggleButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAsBA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,QAAQ,SAAoB,SAAA,YAAC;;uBAGjC,mBAqBS,UArBT,WAqBS;IApBN,gBAAc,MAAA;IACf,MAAK;MACU,MAAA,EAAA,CAAE,CAAA,2GAAA,GAAA,EAKhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,CAAI,MAAA,OAAA,CAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAEjB,mBACuG,OAAA,EAArG,OAAM,6FAA4F,GAAA,MAAA,EAAA,IAEpG,mBAOM,OAAA,EANJ,OAAK,eAAA,CAAC,mMAAiM,EAAA,sBACvK,MAAA,MAAK,CAAA,CAAA,EAAA,GAAA,CAErC,YAEqC,mCAAA;IADnC,IAAG;IACF,MAAM,MAAA,QAAK,SAAA"}
+{"version":3,"file":"ScalarColorModeToggleButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAsBA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,QAAQ,SAAoB,SAAA,YAAC;;uBAGjC,mBAqBS,UArBT,WAqBS;IApBN,gBAAc,MAAA;IACf,MAAK;MACU,MAAA,EAAA,CAAE,CAAA,yFAAA,GAAA,EAKhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,CAAI,MAAA,OAAA,CAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAEjB,mBACuG,OAAA,EAArG,OAAM,6FAA4F,GAAA,MAAA,EAAA,IAEpG,mBAOM,OAAA,EANJ,OAAK,eAAA,CAAC,iNAA+M,EAAA,sBACrL,MAAA,MAAK,CAAA,CAAA,EAAA,GAAA,CAErC,YAEqC,mCAAA;IADnC,IAAG;IACF,MAAM,MAAA,QAAK,SAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAsFA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAsKd,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":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAmFA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAiKd,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/ScalarCombobox/ScalarComboboxPopover.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n *   <button>Toggle</button>\n *   <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx('relative flex flex-col max-h-[inherit] w-40 rounded-xl text-sm')\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n          <ScalarFloatingBackdrop />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n *   <button>Toggle</button>\n *   <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js

@@ -1,5 +1,4 @@
 import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
-import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
@@ -44,11 +43,11 @@ var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 					_: 2
 				}, [open ? {
 					name: "floating",
-					fn: withCtx(({ width }) => [createVNode(unref(PopoverPanel), mergeProps({ style: { width } }, unref(cx)("relative flex flex-col max-h-[inherit] w-40 rounded-xl text-sm")), {
+					fn: withCtx(({ width }) => [createVNode(unref(PopoverPanel), mergeProps({ style: { width } }, unref(cx)("relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border")), {
 						default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
 							close,
 							open
-						}), createVNode(unref(ScalarFloatingBackdrop_default))]),
+						})]),
 						_: 2
 					}, 1040, ["style"])]),
 					key: "0"

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n *   <button>Toggle</button>\n *   <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx('relative flex flex-col max-h-[inherit] w-40 rounded-xl text-sm')\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n          <ScalarFloatingBackdrop />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,mBAAmB,IAAiC,IAAI;;EAG9D,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,CAAC,CAAC,WAAW,WAAW,CAAC,CAAC,SAAS,EAAE,GAAG,GAC1C;GAEF,EAAE,eAAe;GACjB,EAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;EACxE;EAEA,SAAa,EAAE,iBAAiB,CAAC;;uBAG/B,YA2BU,MAAA,OAAA,GAAA,EAzBR,IAAG,WAAU,GAAA;sBAwBI,EAzBP,WAAI,CAEd,YAuBiB,MAAA,sBAAA,GAAA,eAAA,mBAvBOA,KAAAA,MAAM,CAAA,GAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,aAAA,GAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAYc,EAZF,YAAK,CAClB,YAWe,MAAA,YAAA,GAXf,WAWe,EATZ,OAAK,EAAI,MAAK,EAAA,GACM,MAAA,EAAA,CAAE,CAAA,gEAAA,CAAA,GAAA;wBAMb,EARA,YAAK,CAKf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA;UACH,YAA0B,MAAA,8BAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n *   <button>Toggle</button>\n *   <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n    return\n  }\n  e.preventDefault()\n  e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton\n        ref=\"popoverButtonRef\"\n        as=\"template\"\n        @keydown=\"handleKeydown\">\n        <slot :open />\n      </PopoverButton>\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close\n            name=\"popover\"\n            :open />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,mBAAmB,IAAiC,IAAI;;EAG9D,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,CAAC,CAAC,WAAW,WAAW,CAAC,CAAC,SAAS,EAAE,GAAG,GAC1C;GAEF,EAAE,eAAe;GACjB,EAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;EACxE;EAEA,SAAa,EAAE,iBAAiB,CAAC;;uBAG/B,YA4BU,MAAA,OAAA,GAAA,EA1BR,IAAG,WAAU,GAAA;sBAyBI,EA1BP,WAAI,CAEd,YAwBiB,MAAA,sBAAA,GAAA,eAAA,mBAxBOA,KAAAA,MAAM,CAAA,GAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,aAAA,GAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAac,EAbF,YAAK,CAClB,YAYe,MAAA,YAAA,GAZf,WAYe,EAVZ,OAAK,EAAI,MAAK,EAAA,GACM,MAAA,EAAA,CAAE,CAAA,mHAAA,CAAA,GAAA;wBAQb,EAVA,YAAK,CAOf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA"}

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts

@@ -27,8 +27,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     default?(): unknown;
     /** Overrides the normal menu list element */
     menu?(): unknown;
-    /** Overrides the backdrop for the dropdown */
-    backdrop?(): unknown;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AAgEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;IAChB,8CAA8C;iBACjC,OAAO;EAyElB,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":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AA6DA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;EAsEd,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/ScalarDropdown/ScalarDropdownMenu.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n  /** Overrides the backdrop for the dropdown */\n  backdrop?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"cx('relative flex w-56 rounded-xl')\">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n      <slot name=\"backdrop\">\n        <ScalarFloatingBackdrop />\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarDropdownMenu.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"\n      cx(\n        'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.script.js

@@ -1,6 +1,5 @@
-import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { createBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region src/components/ScalarDropdown/ScalarDropdownMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1 rounded-[inherit]" };
 var _hoisted_2 = { class: "flex flex-col p-0.75" };
@@ -11,8 +10,8 @@ var ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), normalizeProps(guardReactiveProps(unref(cx)("relative flex w-56 rounded-xl"))), {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])]), renderSlot(_ctx.$slots, "backdrop", {}, () => [createVNode(unref(ScalarFloatingBackdrop_default))])])]),
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), normalizeProps(guardReactiveProps(unref(cx)("relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border"))), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])])])]),
 				_: 3
 			}, 16);
 		};

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownMenu.vue.script.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n  /** Overrides the backdrop for the dropdown */\n  backdrop?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"cx('relative flex w-56 rounded-xl')\">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n      <slot name=\"backdrop\">\n        <ScalarFloatingBackdrop />\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;EAuCA,MAAM,EAAE,OAAO,UAAU;;uBAIvB,YAeY,wBAdL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACC,MAAA,EAAA,CAAE,CAAA,+BAAA,CAAA,CAAA,GAAA;2BAYJ,CAVN,mBAUM,OAVN,YAUM,CARJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,GAGZ,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADL,YAA0B,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarDropdownMenu.vue.script.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\ndefineProps<{\n  /** The component to render */\n  is?: string | Component\n}>()\n\ndefineSlots<{\n  /** The menu contents */\n  default?(): unknown\n  /** Overrides the normal menu list element */\n  menu?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- Background container -->\n  <component\n    :is=\"is ?? 'div'\"\n    v-bind=\"\n      cx(\n        'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <!-- Scroll container -->\n    <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n      <!-- Menu items -->\n      <slot name=\"menu\">\n        <div class=\"flex flex-col p-0.75\">\n          <slot />\n        </div>\n      </slot>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,UAAU;;uBAIvB,YAgBY,wBAfL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACQ,MAAA,EAAA,CAAE,CAAA,kFAAA,CAAA,CAAA,GAAA;2BAaX,CAPN,mBAOM,OAPN,YAOM,CALJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.d.ts

@@ -1,23 +1,14 @@
 /**
  * Scalar floating backdrop component
  *
- * Provides an absolutely positioned backdrop for the floating element
- * This is used internally by a number of the Scalar floating components
- * (e.g. Dropdown, Popover, Listbox)
- *
- * You can use this component directly if you need to customize the backdrop
- * for a floating component
+ * Provides an absolutely positioned surface behind a floating element
  *
  * The backdrop inherits its border radius from its parent, so set the radius
  * on the floating element itself and the backdrop will follow it
  *
- * @example
- * <ScalarDropdown>
- *   <!-- Menu stuff -->
- *   <template #backdrop>
- *     <ScalarFloatingBackdrop />
- *   </template>
- * </ScalarDropdown>
+ * @deprecated The Scalar floating components now paint their own surface, so
+ * style the floating element directly instead, e.g.
+ * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`
  */
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloatingBackdrop.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"names":[],"mappings":"AAuDA;;;;;;;;;;;;;;;;;;;;GAoBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAwCJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQxC,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":"ScalarFloatingBackdrop.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"names":[],"mappings":"AAqCA;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA8BJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQxC,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/ScalarFloating/ScalarFloatingBackdrop.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloatingBackdrop.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned backdrop for the floating element\n * This is used internally by a number of the Scalar floating components\n * (e.g. Dropdown, Popover, Listbox)\n *\n * You can use this component directly if you need to customize the backdrop\n * for a floating component\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @example\n * <ScalarDropdown>\n *   <!-- Menu stuff -->\n *   <template #backdrop>\n *     <ScalarFloatingBackdrop />\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 overflow-hidden rounded-[inherit] bg-b-1 shadow-md',\n        // Browsers round sub-pixel borders up to a full pixel, so the hairline\n        // is an inset shadow painted above the lifted layer instead\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-border',\n      )\n    \">\n    <!--\n      The lifted brightness lives on an inner layer so it does not also\n      brighten the border, which would stop it matching adjacent inputs\n    -->\n    <div class=\"absolute inset-0 bg-inherit brightness-lifted\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarFloatingBackdrop.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.script.js

@@ -1,14 +1,12 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
-//#region src/components/ScalarFloating/ScalarFloatingBackdrop.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "absolute inset-0 bg-inherit brightness-lifted" };
+import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
 var ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarFloatingBackdrop",
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("absolute inset-0 -z-1 overflow-hidden rounded-[inherit] bg-b-1 shadow-md", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-border"))), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])], 16);
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border"))), [renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}
 });

package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloatingBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned backdrop for the floating element\n * This is used internally by a number of the Scalar floating components\n * (e.g. Dropdown, Popover, Listbox)\n *\n * You can use this component directly if you need to customize the backdrop\n * for a floating component\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @example\n * <ScalarDropdown>\n *   <!-- Menu stuff -->\n *   <template #backdrop>\n *     <ScalarFloatingBackdrop />\n *   </template>\n * </ScalarDropdown>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 overflow-hidden rounded-[inherit] bg-b-1 shadow-md',\n        // Browsers round sub-pixel borders up to a full pixel, so the hairline\n        // is an inset shadow painted above the lifted layer instead\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-border',\n      )\n    \">\n    <!--\n      The lifted brightness lives on an inner layer so it does not also\n      brighten the border, which would stop it matching adjacent inputs\n    -->\n    <div class=\"absolute inset-0 bg-inherit brightness-lifted\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA4BA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAgBM,OAAA,eAAA,mBAfW,MAAA,EAAA,CAAE,CAAA,4EAAA,oGAAA,CAAA,CAAA,GAAA,CAYjB,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"ScalarFloatingBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAOM,OAAA,eAAA,mBANW,MAAA,EAAA,CAAE,CAAA,4FAAA,CAAA,CAAA,GAAA,CAKjB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AA4HA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAGrC;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAYL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;aAItB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;IAmBjC,4CAA4C;mBAC7B;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;EA4LT,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":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAuHA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAGrC;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAYL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;aAItB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;IAmBjC,4CAA4C;mBAC7B;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;EAoLT,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/ScalarListbox/ScalarListbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl text-sm',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n          <ScalarFloatingBackdrop />\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarListbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":""}

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

@@ -1,11 +1,10 @@
 import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
-import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
 import ScalarListboxItem_default from "./ScalarListboxItem.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { Listbox, ListboxButton, ListboxLabel, ListboxOptions } from "@headlessui/vue";
 //#region src/components/ScalarListbox/ScalarListbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1" };
+var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1 rounded-[inherit]" };
 var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarListbox",
@@ -45,7 +44,7 @@ var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					floating: withCtx(({ width }) => [open ? (openBlock(), createElementBlock("div", mergeProps({
 						key: 0,
 						style: { width }
-					}, unref(cx)("relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl text-sm")), [createElementVNode("div", _hoisted_1, [createVNode(unref(ListboxOptions), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
+					}, unref(cx)("relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border")), [createElementVNode("div", _hoisted_1, [createVNode(unref(ListboxOptions), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 							return openBlock(), createBlock(ScalarListboxItem_default, {
 								key: option.id,
@@ -54,7 +53,7 @@ var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							}, null, 8, ["multiselect", "option"]);
 						}), 128))]),
 						_: 1
-					})]), createVNode(unref(ScalarFloatingBackdrop_default))], 16)) : createCommentVNode("", true)]),
+					})])], 16)) : createCommentVNode("", true)]),
 					default: withCtx(() => [createVNode(unref(ListboxButton), {
 						id: __props.id,
 						as: "template"

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.script.js","names":["$emit","$props"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl text-sm',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n          <ScalarFloatingBackdrop />\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgEA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YA4CU,MAAA,OAAA,GAAA;IA1CP,YAAY,QAAA;IACZ,UAAU,QAAA;IACV,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAMA,KAAAA,MAAK,qBAAsB,CAAC;;sBAKxC,EARL,WAAI,CAKN,QAAA,SAAA,UAAA,GADR,YAIe,MAAA,YAAA,GAAA;;KAFb,OAAM;;4BACK,CAAA,gBAAA,gBAAR,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;wCAEV,YAiCiB,MAAA,sBAAA,GAjCjB,WACUC,KAgCO,QAhCD,EACb,WAAW,QAAA,aAAS,eAAA,CAAA,GAAA;KAMV,UAAQ,SAuBX,EAvBe,YAAK,CAGlB,QAAA,UAAA,GADR,mBAqBM,OArBN,WAqBM;;MAnBH,OAAK,EAAI,MAAK;QACM,MAAA,EAAA,CAAE,CAAA,uEAAA,CAAA,GAAA,CAMvB,mBAUM,OAVN,YAUM,CARJ,YAOiB,MAAA,cAAA,GAAA,EANf,OAAM,kDAAiD,GAAA;6BAE5B,EAAA,UAAA,IAAA,GAD3B,mBAIqB,UAAA,MAAA,WAHF,QAAA,UAAV,WAAM;2BADf,YAIqB,2BAAA;QAFlB,KAAK,OAAO;QACZ,aAAa,QAAA;QACL;;;;WAGf,YAA0B,MAAA,8BAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;4BAvBd,CAJhB,YAIgB,MAAA,aAAA,GAAA;MAHb,IAAI,QAAA;MACL,IAAG;;6BACkB,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarListbox.vue.script.js","names":["$emit","$props"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n *   <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxLabel,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n  multiple?: false | undefined\n  modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n  multiple: true\n  modelValue?: Option[] | undefined\n}\n\ndefineProps<\n  {\n    options: Option[]\n    id?: string\n    label?: string\n  } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n    ScalarFloatingOptions\n>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n  /** The reference element for the listbox */\n  default(props: {\n    /** Whether or not the listbox is open */\n    open: boolean\n  }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Listbox\n    v-slot=\"{ open }\"\n    :modelValue=\"modelValue\"\n    :multiple=\"multiple\"\n    @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n    <ListboxLabel\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </ListboxLabel>\n    <ScalarFloating\n      v-bind=\"$props\"\n      :placement=\"placement ?? 'bottom-start'\">\n      <ListboxButton\n        :id=\"id\"\n        as=\"template\">\n        <slot :open=\"open\" />\n      </ListboxButton>\n      <template #floating=\"{ width }\">\n        <!-- Background container -->\n        <div\n          v-if=\"open\"\n          :style=\"{ width }\"\n          v-bind=\"\n            cx(\n              'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n            )\n          \">\n          <!-- Scroll container -->\n          <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n            <!-- Options list -->\n            <ListboxOptions\n              class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n              <ScalarListboxOption\n                v-for=\"option in options\"\n                :key=\"option.id\"\n                :multiselect=\"multiple\"\n                :option=\"option\" />\n            </ListboxOptions>\n          </div>\n        </div>\n      </template>\n    </ScalarFloating>\n  </Listbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YA2CU,MAAA,OAAA,GAAA;IAzCP,YAAY,QAAA;IACZ,UAAU,QAAA;IACV,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAMA,KAAAA,MAAK,qBAAsB,CAAC;;sBAKxC,EARL,WAAI,CAKN,QAAA,SAAA,UAAA,GADR,YAIe,MAAA,YAAA,GAAA;;KAFb,OAAM;;4BACK,CAAA,gBAAA,gBAAR,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;wCAEV,YAgCiB,MAAA,sBAAA,GAhCjB,WACUC,KA+BO,QA/BD,EACb,WAAW,QAAA,aAAS,eAAA,CAAA,GAAA;KAMV,UAAQ,SAsBX,EAtBe,YAAK,CAGlB,QAAA,UAAA,GADR,mBAoBM,OApBN,WAoBM;;MAlBH,OAAK,EAAI,MAAK;QACM,MAAA,EAAA,CAAE,CAAA,0HAAA,CAAA,GAAA,CAMvB,mBAUM,OAVN,YAUM,CARJ,YAOiB,MAAA,cAAA,GAAA,EANf,OAAM,kDAAiD,GAAA;6BAE5B,EAAA,UAAA,IAAA,GAD3B,mBAIqB,UAAA,MAAA,WAHF,QAAA,UAAV,WAAM;2BADf,YAIqB,2BAAA;QAFlB,KAAK,OAAO;QACZ,aAAa,QAAA;QACL;;;;;4BApBH,CAJhB,YAIgB,MAAA,aAAA,GAAA;MAHb,IAAI,QAAA;MACL,IAAG;;6BACkB,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AAwEA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,0DAA0D;YAClD,OAAO;;IADf,0DAA0D;YAClD,OAAO;iIAuIf,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":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AAmEA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,0DAA0D;YAClD,OAAO;;IADf,0DAA0D;YAClD,OAAO;iIAmIf,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/ScalarPopover/ScalarPopover.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.vue.js","names":[],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"cx('relative flex flex-col rounded-xl p-0.75')\">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n          <slot\n            name=\"backdrop\"\n            :open=\"open\">\n            <ScalarFloatingBackdrop />\n          </slot>\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarPopover.vue.js","names":[],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,4 @@
 import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
-import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
@@ -30,11 +29,11 @@ var ScalarPopover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							width,
 							height
 						}
-					}, unref(cx)("relative flex flex-col rounded-xl p-0.75")), {
+					}, unref(cx)("relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border")), {
 						default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
 							close: () => close(),
 							open
-						}), renderSlot(_ctx.$slots, "backdrop", { open }, () => [createVNode(unref(ScalarFloatingBackdrop_default))])]),
+						})]),
 						_: 2
 					}, 1040, ["focus", "style"])]),
 					default: withCtx(() => [createVNode(unref(PopoverButton), { as: "template" }, {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  type ScalarFloatingOptions,\n} from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"cx('relative flex flex-col rounded-xl p-0.75')\">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n          <slot\n            name=\"backdrop\"\n            :open=\"open\">\n            <ScalarFloatingBackdrop />\n          </slot>\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YAyBU,MAAA,OAAA,GAAA,EAvBR,IAAG,WAAU,GAAA;sBAsBI,EAvBP,WAAI,CAEd,YAqBiB,MAAA,sBAAA,GAAA,eAAA,mBArBOA,KAAAA,MAAM,CAAA,GAAA;KAIjB,UAAQ,SAeF,EAfM,OAAO,aAAM,CAClC,YAce,MAAA,YAAA,GAdf,WAce;MAZZ,OAAO,QAAA;MACP,OAAK;OAAI;OAAO;MAAM;QACf,MAAA,EAAA,CAAE,CAAA,0CAAA,CAAA,GAAA;wBAIO,EAPP,YAAK,CAIf,WAGiB,KAAA,QAAA,WAAA;OAFd,aAAa,MAAK;OAEZ;UACT,WAIO,KAAA,QAAA,YAAA,EAFE,KAAI,SAEN,CADL,YAA0B,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;4BAdhB,CAFhB,YAEgB,MAAA,aAAA,GAAA,EAFD,IAAG,WAAU,GAAA;6BACL,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n *   <button>Open</button>\n *   <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n  {\n    /** Automatically focus the popover panel when it opens */\n    focus?: boolean\n  } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <Popover\n    v-slot=\"{ open }\"\n    as=\"template\">\n    <ScalarFloating v-bind=\"$props\">\n      <PopoverButton as=\"template\">\n        <slot :open=\"open\" />\n      </PopoverButton>\n      <template #floating=\"{ width, height }\">\n        <PopoverPanel\n          v-slot=\"{ close }\"\n          :focus=\"focus\"\n          :style=\"{ width, height }\"\n          v-bind=\"\n            cx(\n              'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n            )\n          \">\n          <slot\n            :close=\"() => close()\"\n            name=\"popover\"\n            :open=\"open\" />\n        </PopoverPanel>\n      </template>\n    </ScalarFloating>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YAwBU,MAAA,OAAA,GAAA,EAtBR,IAAG,WAAU,GAAA;sBAqBI,EAtBP,WAAI,CAEd,YAoBiB,MAAA,sBAAA,GAAA,eAAA,mBApBOA,KAAAA,MAAM,CAAA,GAAA;KAIjB,UAAQ,SAcF,EAdM,OAAO,aAAM,CAClC,YAae,MAAA,YAAA,GAbf,WAae;MAXZ,OAAO,QAAA;MACP,OAAK;OAAI;OAAO;MAAM;QACF,MAAA,EAAA,CAAE,CAAA,6FAAA,CAAA,GAAA;wBAQN,EAXP,YAAK,CAQf,WAGiB,KAAA,QAAA,WAAA;OAFd,aAAa,MAAK;OAEZ;;;;4BAdG,CAFhB,YAEgB,MAAA,aAAA,GAAA,EAFD,IAAG,WAAU,GAAA;6BACL,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}

package/dist/components/ScalarPopover/types.d.ts

@@ -10,10 +10,5 @@ export type Slots = {
         /** A callback to close the popover */
         close: () => void;
     }): unknown;
-    /** Overrides the popover backdrop */
-    backdrop?(props: {
-        /** Whether or not the popover is open */
-        open: boolean;
-    }): unknown;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarPopover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO,CAAA;IACX,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,OAAO,CAAA;IACX,qCAAqC;IACrC,QAAQ,CAAC,CAAC,KAAK,EAAE;QACf,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO,CAAA;CACZ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO,CAAA;IACX,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,OAAO,CAAA;CACZ,CAAA"}

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":"AAuHA,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":"AA6HA,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/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .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, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .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, dialog) > .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, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\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/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .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, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n/*\n * The hairline is spelled out: the preflight that gives `border` its theme colour only reaches\n * descendants of `.scalar-app`, and this element is the `.scalar-app` root itself, so the\n * utility alone would fall back to currentColor (black on light, white on dark).\n */\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .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/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .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, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .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, dialog) > .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, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,IAAI;EAEpD,WAAW;GACT,SAAS,eAAe,QAAA,OAAO;GAC/B,OAAO,eAAe,QAAA,KAAK;GAC3B,WAAW,eAAe,QAAA,SAAS;GACnC,QAAQ,eAAe,QAAA,MAAM;GAC7B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,CAC/D;EACF,CAAC;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}
+{"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/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .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, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n/*\n * The hairline is spelled out: the preflight that gives `border` its theme colour only reaches\n * descendants of `.scalar-app`, and this element is the `.scalar-app` root itself, so the\n * utility alone would fall back to currentColor (black on light, white on dark).\n */\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,IAAI;EAEpD,WAAW;GACT,SAAS,eAAe,QAAA,OAAO;GAC/B,OAAO,eAAe,QAAA,KAAK;GAC3B,WAAW,eAAe,QAAA,SAAS;GACnC,QAAQ,eAAe,QAAA,MAAM;GAC7B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,CAC/D;EACF,CAAC;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4J1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AAgID;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QA8EpD"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4J1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AAqID;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QA8EpD"}

package/dist/components/ScalarTooltip/useTooltip.js

@@ -151,12 +151,17 @@ function getAllParents(el) {
 	}
 	return parents;
 }
-/** Check if mouse moved off the target but onto the tooltip */
+/**
+* Check if the mouse moved off the target and the tooltip altogether
+*
+* Moving between the two keeps the tooltip open. Landing on a child of the target (an icon
+* inside a button, say) counts as landing on the target: the pointer never left it.
+*/
 function isMovingOffElements(e) {
 	const target = unref(config.value?.targetRef);
 	if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {
 		const relatedTargetParents = getAllParents(e.relatedTarget);
-		return e.relatedTarget.id !== "scalar-tooltip" && !relatedTargetParents.some((parent) => parent.id === "scalar-tooltip") && e.relatedTarget !== target;
+		return e.relatedTarget.id !== "scalar-tooltip" && !relatedTargetParents.some((parent) => parent.id === "scalar-tooltip") && !target.contains(e.relatedTarget);
 	}
 	return true;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles, placement, update } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Expose the resolved placement side (post-flip) so the CSS can apply the offset\n// gap only on the side facing the target. We key off the side (the part before\n// the '-') because that is where the tooltip sits relative to the target. The\n// initial side is set synchronously when the tooltip is shown (see the config\n// watcher below); this watcher keeps it in sync once Floating UI flips it.\nwatch(placement, (value) => {\n  if (!el.value || !value) {\n    return\n  }\n  el.value.dataset.side = value.split('-')[0]\n})\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      // Keep the element in the right host if the target moved into or out of a modal\n      // dialog while the tooltip was already showing. Opening a tooltip is handled in\n      // `showTooltip` before the config is assigned, so this only fires when `targetRef`\n      // changes underneath an open tooltip, and it has to ask Floating UI for a fresh\n      // position because a reparent is neither a scroll nor a resize.\n      if (moveTooltipToHost(unref(opts.targetRef))) {\n        update()\n      }\n\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n\n      // Set the side the tooltip sits on so the offset gap is only applied to\n      // the target-facing side. Floating UI defaults to 'bottom' when no\n      // placement is provided; the placement watcher above refines this after\n      // any flip.\n      el.value.dataset.side = (unref(opts?.placement) ?? 'bottom').split('-')[0]\n\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n\n      // Park the element back on the body. Left inside a dialog it would be removed from\n      // the document when that dialog unmounts, taking the shared tooltip with it.\n      moveTooltipToHost(undefined)\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/**\n * Find the modal dialog containing an element, if there is one\n *\n * Only a dialog opened with `showModal()` is promoted to the browser's top layer, and\n * `:modal` matches exactly those. The `open` property is not a substitute: it is also\n * true for `dialog.show()`, which leaves the dialog in the normal flow where the\n * tooltip already paints correctly.\n */\nfunction getModalDialog(target: Element | undefined | null): HTMLDialogElement | undefined {\n  const dialog = target?.closest('dialog')\n\n  if (!dialog) {\n    return undefined\n  }\n\n  try {\n    return dialog.matches(':modal') ? dialog : undefined\n  } catch {\n    // `:modal` reached Safari a couple of releases after `showModal()` did, and an\n    // unknown pseudo-class throws. Treating it as \"not modal\" degrades to the old\n    // behaviour for that one case instead of breaking every tooltip on the page.\n    return undefined\n  }\n}\n\n/**\n * Move the tooltip element into the host it needs to paint above\n *\n * Top layer content paints above the rest of the document whatever `z-index` anything\n * else carries, so the only way to sit above a modal dialog is to live inside it.\n * Everywhere else the tooltip belongs on the body.\n *\n * This doubles as a repair step: appending an element that is no longer in the document\n * puts it back, which covers a dialog being unmounted while the tooltip sat inside it.\n *\n * Returns whether the element actually moved.\n */\nfunction moveTooltipToHost(target: Element | undefined | null): boolean {\n  if (!el.value) {\n    return false\n  }\n\n  const host = getModalDialog(target) ?? document.body\n\n  if (el.value.parentElement === host) {\n    return false\n  }\n\n  host.appendChild(el.value)\n\n  return true\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Move the element before the config is assigned, not after. Floating UI watches the\n    // target with `flush: 'sync'`, so it measures the position the instant the config\n    // lands, and that measurement has to happen with the tooltip already in its final\n    // parent or the first frame is positioned against the wrong offset parent.\n    moveTooltipToHost(unref(opts.targetRef))\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles, placement, update } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Expose the resolved placement side (post-flip) so the CSS can apply the offset\n// gap only on the side facing the target. We key off the side (the part before\n// the '-') because that is where the tooltip sits relative to the target. The\n// initial side is set synchronously when the tooltip is shown (see the config\n// watcher below); this watcher keeps it in sync once Floating UI flips it.\nwatch(placement, (value) => {\n  if (!el.value || !value) {\n    return\n  }\n  el.value.dataset.side = value.split('-')[0]\n})\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      // Keep the element in the right host if the target moved into or out of a modal\n      // dialog while the tooltip was already showing. Opening a tooltip is handled in\n      // `showTooltip` before the config is assigned, so this only fires when `targetRef`\n      // changes underneath an open tooltip, and it has to ask Floating UI for a fresh\n      // position because a reparent is neither a scroll nor a resize.\n      if (moveTooltipToHost(unref(opts.targetRef))) {\n        update()\n      }\n\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n\n      // Set the side the tooltip sits on so the offset gap is only applied to\n      // the target-facing side. Floating UI defaults to 'bottom' when no\n      // placement is provided; the placement watcher above refines this after\n      // any flip.\n      el.value.dataset.side = (unref(opts?.placement) ?? 'bottom').split('-')[0]\n\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n\n      // Park the element back on the body. Left inside a dialog it would be removed from\n      // the document when that dialog unmounts, taking the shared tooltip with it.\n      moveTooltipToHost(undefined)\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/**\n * Find the modal dialog containing an element, if there is one\n *\n * Only a dialog opened with `showModal()` is promoted to the browser's top layer, and\n * `:modal` matches exactly those. The `open` property is not a substitute: it is also\n * true for `dialog.show()`, which leaves the dialog in the normal flow where the\n * tooltip already paints correctly.\n */\nfunction getModalDialog(target: Element | undefined | null): HTMLDialogElement | undefined {\n  const dialog = target?.closest('dialog')\n\n  if (!dialog) {\n    return undefined\n  }\n\n  try {\n    return dialog.matches(':modal') ? dialog : undefined\n  } catch {\n    // `:modal` reached Safari a couple of releases after `showModal()` did, and an\n    // unknown pseudo-class throws. Treating it as \"not modal\" degrades to the old\n    // behaviour for that one case instead of breaking every tooltip on the page.\n    return undefined\n  }\n}\n\n/**\n * Move the tooltip element into the host it needs to paint above\n *\n * Top layer content paints above the rest of the document whatever `z-index` anything\n * else carries, so the only way to sit above a modal dialog is to live inside it.\n * Everywhere else the tooltip belongs on the body.\n *\n * This doubles as a repair step: appending an element that is no longer in the document\n * puts it back, which covers a dialog being unmounted while the tooltip sat inside it.\n *\n * Returns whether the element actually moved.\n */\nfunction moveTooltipToHost(target: Element | undefined | null): boolean {\n  if (!el.value) {\n    return false\n  }\n\n  const host = getModalDialog(target) ?? document.body\n\n  if (el.value.parentElement === host) {\n    return false\n  }\n\n  host.appendChild(el.value)\n\n  return true\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/**\n * Check if the mouse moved off the target and the tooltip altogether\n *\n * Moving between the two keeps the tooltip open. Landing on a child of the target (an icon\n * inside a button, say) counts as landing on the target: the pointer never left it.\n */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      !target.contains(e.relatedTarget)\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Move the element before the config is assigned, not after. Floating UI watches the\n    // target with `flush: 'sync'`, so it measures the position the instant the config\n    // lands, and that measurement has to happen with the tooltip already in its final\n    // parent or the first frame is positioned against the wrong offset parent.\n    moveTooltipToHost(unref(opts.targetRef))\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -86,7 +86,6 @@
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-content: "";
     }
   }
 }
@@ -1949,10 +1948,6 @@
   }
 }
 
-.scalar-app .bg-red {
-  background-color: var(--scalar-color-red);
-}
-
 .scalar-app .bg-sidebar-b-1 {
   background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
 }
@@ -2500,6 +2495,11 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
+.scalar-app .inset-shadow-border {
+  --tw-inset-shadow: inset 0 0 0 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);
+}
+
 .scalar-app .outline {
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
@@ -2767,32 +2767,6 @@
   font-family: inherit;
 }
 
-.scalar-app .after\:pointer-events-none:after {
-  content: var(--tw-content);
-  pointer-events: none;
-}
-
-.scalar-app .after\:absolute:after {
-  content: var(--tw-content);
-  position: absolute;
-}
-
-.scalar-app .after\:inset-0:after {
-  content: var(--tw-content);
-  inset: 0;
-}
-
-.scalar-app .after\:rounded-\[inherit\]:after {
-  content: var(--tw-content);
-  border-radius: inherit;
-}
-
-.scalar-app .after\:shadow-border:after {
-  content: var(--tw-content);
-  --tw-shadow: inset 0 0 0 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);
-}
-
 .scalar-app .first\:rounded-t-\[inherit\]:first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -3528,12 +3502,6 @@
   inherits: false
 }
 
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
-}
-
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -4669,7 +4637,6 @@ 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-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -4723,10 +4690,9 @@ to {
 }
 :where(body, dialog) > .scalar-tooltip:before {
   content: "";
+  border: var(--scalar-border-width) solid var(--scalar-border-color);
   z-index: calc(1 * -1);
   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);
@@ -4752,11 +4718,6 @@ to {
   syntax: "*";
   inherits: false
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/dist/vue-styles.css

@@ -1128,7 +1128,6 @@ 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-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1182,10 +1181,9 @@ to {
 }
 :where(body, dialog) > .scalar-tooltip:before {
   content: "";
+  border: var(--scalar-border-width) solid var(--scalar-border-color);
   z-index: calc(1 * -1);
   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);
@@ -1211,11 +1209,6 @@ to {
   syntax: "*";
   inherits: false
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.30.7",
+  "version": "0.31.1",
   "engines": {
     "node": ">=22"
   },
@@ -216,11 +216,11 @@
     "@floating-ui/vue": "1.1.9",
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "1.7.23",
-    "@scalar/code-highlight": "0.4.8",
-    "@scalar/helpers": "0.16.1",
+    "@scalar/code-highlight": "0.4.9",
+    "@scalar/helpers": "0.16.3",
     "@scalar/icons": "0.7.6",
-    "@scalar/themes": "0.18.1",
-    "@scalar/use-hooks": "0.4.18",
+    "@scalar/themes": "0.19.1",
+    "@scalar/use-hooks": "0.4.20",
     "@vueuse/core": "13.9.0",
     "cva": "1.0.0-beta.4",
     "radix-vue": "^1.9.17",