@scalar/components 0.14.23 → 0.14.25

package/README.md

@@ -105,6 +105,12 @@ Since you can directly target the reference element with Tailwind classes any cl
 
 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).
 
+## Testing
+
+The components library uses both unit testing (vitest) and snapshot testing to ensure quality and visual consistency. Snapshot tests are written using Playwright and capture screenshots of Storybook stories to detect visual regressions.
+
+For detailed information about the testing setup, see the [test README](./test/README.md).
+
 ## Contributing
 
 All pull requests should include the following checklist:
@@ -123,4 +129,5 @@ All pull requests should include the following checklist:
 - [ ] Allows overriding of Tailwind classes where applicable (see useBindCx)
 - [ ] Has stories showcasing any applicable variants
 - [ ] Has unit tests covering any applicable interactions
+- [ ] Has snapshot tests covering any visual variations
 ```

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":"AA8IA;;GAEG;AACH,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC;;UAJO,MAAM;iBACC,OAAO;UAEd,OAAO;;AA4HlB,wBAQG"}
+{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AA4FA;;GAEG;AACH,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC;;UAJO,MAAM;iBACC,OAAO;UAEd,OAAO;;AAiHlB,wBAQG"}

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

@@ -1,15 +1,11 @@
-import { defineComponent as y, computed as r, createElementBlock as o, openBlock as n, createCommentVNode as a, createElementVNode as c, unref as l, createVNode as f } from "vue";
-import { syntaxHighlight as C, standardLanguages as b } from "@scalar/code-highlight";
-import { ScalarIconCopy as g } from "@scalar/icons";
-import { prettyPrintJson as i } from "@scalar/oas-utils/helpers";
-import { useClipboard as h } from "@scalar/use-hooks/useClipboard";
-const k = {
-  class: "scalar-code-block custom-scroll min-h-12 focus-visible:outline",
+import { defineComponent as d, useId as u, computed as l, createElementBlock as m, openBlock as c, createBlock as p, createCommentVNode as f, createElementVNode as h, unref as t } from "vue";
+import { syntaxHighlight as g, standardLanguages as k } from "@scalar/code-highlight";
+import { prettyPrintJson as r } from "@scalar/oas-utils/helpers";
+import C from "./ScalarCodeBlockCopy.vue.js";
+const _ = {
+  class: "scalar-code-block group/code-block custom-scroll min-h-12 focus-visible:outline",
   tabindex: "0"
-}, N = {
-  key: 0,
-  class: "scalar-code-copy"
-}, _ = ["innerHTML"], T = /* @__PURE__ */ y({
+}, b = ["id", "innerHTML"], H = /* @__PURE__ */ d({
   __name: "ScalarCodeBlock",
   props: {
     content: {},
@@ -18,32 +14,27 @@ const k = {
     hideCredentials: {},
     copy: { type: Boolean, default: !0 }
   },
-  setup(d) {
-    const e = d, u = r(() => C(i(e.content), {
+  setup(a) {
+    const e = a, n = u(), s = l(() => g(r(e.content), {
       lang: e.lang.trim(),
-      languages: b,
+      languages: k,
       lineNumbers: e.lineNumbers,
       maskCredentials: e.hideCredentials
-    }).slice(5, -6)), { copyToClipboard: p } = h(), m = r(() => e.content !== null && e.content !== "null" && e.content !== "404 Not Found");
-    return (s, t) => (n(), o("div", k, [
-      s.copy ? (n(), o("div", N, [
-        m.value ? (n(), o("button", {
-          key: 0,
-          class: "copy-button",
-          type: "button",
-          onClick: t[0] || (t[0] = (v) => l(p)(l(i)(e.content)))
-        }, [
-          t[1] || (t[1] = c("span", { class: "sr-only" }, "Copy content", -1)),
-          f(l(g), { class: "size-4" })
-        ])) : a("", !0)
-      ])) : a("", !0),
-      c("pre", {
+    }).slice(5, -6)), i = l(() => e.content !== null && e.content !== "null" && e.content !== "404 Not Found");
+    return (o, y) => (c(), m("div", _, [
+      o.copy && i.value ? (c(), p(t(C), {
+        key: 0,
+        content: t(r)(e.content),
+        controls: t(n)
+      }, null, 8, ["content", "controls"])) : f("", !0),
+      h("pre", {
+        id: t(n),
         class: "scalar-codeblock-pre",
-        innerHTML: u.value
-      }, null, 8, _)
+        innerHTML: s.value
+      }, null, 8, b)
     ]));
   }
 });
 export {
-  T as default
+  H as default
 };

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    /** Content to copy to clipboard */
+    content: string | object;
+    /** ID of the parent element this button controls */
+    controls?: string;
+    /** Class to apply to the copy button */
+    class?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=ScalarCodeBlockCopy.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCodeBlockCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"names":[],"mappings":"AA4HA,KAAK,WAAW,GAAG;IACjB,mCAAmC;IACnC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;AA+JF,wBAOG"}

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

@@ -0,0 +1,7 @@
+import o from "./ScalarCodeBlockCopy.vue2.js";
+import "./ScalarCodeBlockCopy.vue3.js";
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ a(o, [["__scopeId", "data-v-0295860a"]]);
+export {
+  c as default
+};

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue2.js

@@ -0,0 +1,66 @@
+import { defineComponent as f, ref as d, createElementBlock as n, openBlock as l, normalizeClass as s, unref as o, createVNode as a, createCommentVNode as m, withCtx as y } from "vue";
+import { ScalarIconCopy as C, ScalarIconCheck as h } from "@scalar/icons";
+import { cva as v, cx as i } from "@scalar/use-hooks/useBindCx";
+import { useClipboard as b } from "@scalar/use-hooks/useClipboard";
+import k from "../ScalarButton/ScalarButton.vue.js";
+const g = {
+  key: 0,
+  role: "alert",
+  class: "sr-only"
+}, N = /* @__PURE__ */ f({
+  __name: "ScalarCodeBlockCopy",
+  props: {
+    content: {},
+    controls: {},
+    class: {}
+  },
+  setup(t) {
+    const { copyToClipboard: r } = b(), e = d(!1), u = async () => {
+      if (e.value)
+        return;
+      const c = typeof t.content == "string" ? t.content : JSON.stringify(t.content, null, 2);
+      await r(c), e.value = !0, setTimeout(() => {
+        e.value = !1;
+      }, 1200);
+    }, p = v({
+      base: "absolute top-0 right-0 h-8 w-8 p-0 flex items-center justify-center brightness-lifted bg-inherit rounded focus-visible:opacity-100 -outline-offset-1",
+      variants: {
+        showCopied: {
+          true: "text-c-1",
+          false: "text-c-3 hover:text-c-1"
+        }
+      }
+    });
+    return (c, x) => (l(), n("div", {
+      class: s(
+        o(i)(
+          "scalar-code-copy opacity-0 group-hover/code-block:opacity-100 sticky flex inset-0 justify-end items-start bg-inherit",
+          t.class
+        )
+      )
+    }, [
+      a(o(k), {
+        class: s(o(i)(o(p)({ showCopied: e.value }))),
+        type: "button",
+        variant: "ghost",
+        "aria-controls": c.controls,
+        "aria-label": "Copy",
+        onClick: u
+      }, {
+        default: y(() => [
+          a(o(C), {
+            class: s(["copy-icon size-4", { copied: e.value }])
+          }, null, 8, ["class"]),
+          a(o(h), {
+            class: s(["check-icon size-4", { visible: e.value }])
+          }, null, 8, ["class"])
+        ]),
+        _: 1
+      }, 8, ["class", "aria-controls"]),
+      e.value ? (l(), n("div", g, " Copied ")) : m("", !0)
+    ], 2));
+  }
+});
+export {
+  N as default
+};

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue3.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

package/dist/components/ScalarCodeBlock/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ScalarCodeBlock } from './ScalarCodeBlock.vue.js';
+export { default as ScalarCodeBlockCopy } from './ScalarCodeBlockCopy.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA"}

package/dist/components/ScalarHotkey/ScalarHotkey.vue.d.ts

@@ -0,0 +1,8 @@
+import type { HotKeyModifier } from './types';
+type __VLS_Props = {
+    hotkey: string;
+    modifier?: HotKeyModifier[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarHotkey.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHotkey.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/ScalarHotkey.vue"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC5B,CAAC;;AA2EF,wBAMG"}

package/dist/components/ScalarHotkey/ScalarHotkey.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as c, computed as m, createElementBlock as e, openBlock as t, normalizeProps as u, guardReactiveProps as p, unref as n, Fragment as f, renderList as y, createElementVNode as a, toDisplayString as s } from "vue";
+import { useBindCx as h } from "@scalar/use-hooks/useBindCx";
+import { formatHotkeySymbols as k, getKeyLabel as x } from "./formatHotkey.js";
+const _ = {
+  "aria-hidden": "true",
+  class: "contents"
+}, g = { class: "sr-only" }, E = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "ScalarHotkey",
+  props: {
+    hotkey: {},
+    modifier: { default: () => ["Meta"] }
+  },
+  setup(o) {
+    const { cx: i } = h(), d = m(() => k(o.hotkey, o.modifier));
+    return (b, v) => (t(), e("div", u(p(
+      n(i)(
+        "border-(--scalar-background-3) inline-flex gap-0.5 overflow-hidden rounded border text-xxs rounded-b p-1 font-medium uppercase leading-none"
+      )
+    )), [
+      (t(!0), e(f, null, y(d.value, (r, l) => (t(), e("div", { key: l }, [
+        a("span", _, s(r), 1),
+        a("span", g, s(n(x)(r)), 1)
+      ]))), 128))
+    ], 16));
+  }
+});
+export {
+  E as default
+};

package/dist/components/ScalarHotkey/ScalarHotkey.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarHotkey.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarHotkey/constants.d.ts

@@ -0,0 +1,30 @@
+/** Screen reader labels for the hotkey modifiers */
+export declare const HOTKEY_LABELS: {
+    readonly '\u2318': "Command";
+    readonly '^': "Control";
+    readonly ctrl: "Control";
+    readonly '\u2325': "Option";
+    readonly alt: "Alt";
+    readonly '\u21E7': "Shift";
+    readonly '\u21EA': "Caps Lock";
+    readonly '\u21B5': "Enter";
+    readonly '\u2190': "Left Arrow";
+    readonly '\u2192': "Right Arrow";
+    readonly '\u2191': "Up Arrow";
+    readonly '\u2193': "Down Arrow";
+};
+/** Symbols for the hotkey modifiers on MacOS */
+export declare const MODIFIER_KEY_SYMBOLS_MACOS: {
+    readonly Meta: "⌘";
+    readonly Shift: "⇧";
+    readonly Alt: "⌥";
+    readonly Control: "^";
+};
+/** Symbols for the hotkey modifiers outside of MacOS */
+export declare const MODIFIER_KEY_SYMBOLS: {
+    readonly Meta: "ctrl";
+    readonly Shift: "⇧";
+    readonly Alt: "alt";
+    readonly Control: "ctrl";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/ScalarHotkey/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/constants.ts"],"names":[],"mappings":"AAEA,oDAAoD;AACpD,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAahB,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,0BAA0B;;;;;CAKkB,CAAA;AAEzD,wDAAwD;AACxD,eAAO,MAAM,oBAAoB;;;;;CAKwB,CAAA"}

package/dist/components/ScalarHotkey/constants.js

@@ -0,0 +1,29 @@
+const t = {
+  "⌘": "Command",
+  "^": "Control",
+  ctrl: "Control",
+  "⌥": "Option",
+  alt: "Alt",
+  "⇧": "Shift",
+  "⇪": "Caps Lock",
+  "↵": "Enter",
+  "←": "Left Arrow",
+  "→": "Right Arrow",
+  "↑": "Up Arrow",
+  "↓": "Down Arrow"
+}, o = {
+  Meta: "⌘",
+  Shift: "⇧",
+  Alt: "⌥",
+  Control: "^"
+}, r = {
+  Meta: "ctrl",
+  Shift: "⇧",
+  Alt: "alt",
+  Control: "ctrl"
+};
+export {
+  t as HOTKEY_LABELS,
+  r as MODIFIER_KEY_SYMBOLS,
+  o as MODIFIER_KEY_SYMBOLS_MACOS
+};

package/dist/components/ScalarHotkey/formatHotkey.d.ts

@@ -0,0 +1,10 @@
+import type { HotKeyModifier } from './types';
+/** Typescript helper to check if a modifier is the default modifier */
+export declare function isDefault(modifier: HotKeyModifier): modifier is 'default';
+/** Get the modifier key symbol for a modifier */
+export declare function getModifierKeySymbol(modifier: HotKeyModifier): string;
+/** Format the hotkey symbols for a hotkey */
+export declare function formatHotkeySymbols(hotkey: string, modifier: HotKeyModifier[]): string[];
+/** Get the hotkey label for a hotkey */
+export declare function getKeyLabel(key: string): string;
+//# sourceMappingURL=formatHotkey.d.ts.map

package/dist/components/ScalarHotkey/formatHotkey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatHotkey.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/formatHotkey.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,QAAQ,IAAI,SAAS,CAEzE;AAKD,iDAAiD;AACjD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,CAGrE;AAED,6CAA6C;AAC7C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAGxF;AAKD,wCAAwC;AACxC,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE/C"}

package/dist/components/ScalarHotkey/formatHotkey.js

@@ -0,0 +1,21 @@
+import { isMacOS as n } from "@scalar/helpers/general/is-mac-os";
+import { HOTKEY_LABELS as e, MODIFIER_KEY_SYMBOLS_MACOS as i, MODIFIER_KEY_SYMBOLS as f } from "./constants.js";
+function u(t) {
+  return t === "default";
+}
+function m(t) {
+  const o = u(t) ? "Meta" : t;
+  return n() ? i[o] : f[o];
+}
+function c(t, o) {
+  return [...o.map((r) => m(r)), t];
+}
+function s(t) {
+  return t in e ? e[t] : t;
+}
+export {
+  c as formatHotkeySymbols,
+  s as getKeyLabel,
+  m as getModifierKeySymbol,
+  u as isDefault
+};

package/dist/components/ScalarHotkey/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ScalarHotkey } from './ScalarHotkey.vue.js';
+export { formatHotkeySymbols } from './formatHotkey.js';
+export type { HotKeyModifier as ScalarHotkeyModifier } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarHotkey/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,YAAY,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,5 @@
+/** Possible modifier keys for a hotkey */
+export type HotKeyModifier = HotKeyModifierKey | 'default';
+/** Possible modifier keys for a hotkey */
+export type HotKeyModifierKey = 'Meta' | 'Control' | 'Shift' | 'Alt';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarHotkey/types.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG,SAAS,CAAA;AAE1D,0CAA0C;AAC1C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAA"}

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue.d.ts

@@ -1,16 +1,8 @@
-type __VLS_Props = {
-    value?: string;
-    withImages?: boolean;
-    transform?: (node: Record<string, any>) => Record<string, any>;
-    transformType?: string;
-    clamp?: string | boolean;
-    class?: string;
-    withAnchors?: boolean;
-    anchorPrefix?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    withImages: boolean;
-    withAnchors: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+import type { ScalarMarkdownProps } from './types';
+declare const _default: import("vue").DefineComponent<ScalarMarkdownProps, {
+    el: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarMarkdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    div: HTMLDivElement;
+}, any>;
 export default _default;
 //# sourceMappingURL=ScalarMarkdown.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMarkdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdown.vue"],"names":[],"mappings":"AAkrBA,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC;;gBAPa,OAAO;iBAKN,OAAO;;AAmHzB,wBAQG"}
+{"version":3,"file":"ScalarMarkdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdown.vue"],"names":[],"mappings":"AA0qBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;;;;;;AAqHlD,wBAQG"}

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue.js

@@ -1,45 +1,42 @@
-import { defineComponent as f, computed as p, createElementBlock as h, openBlock as u, normalizeStyle as d, normalizeClass as g, unref as w } from "vue";
+import { defineComponent as h, useTemplateRef as d, computed as g, createElementBlock as w, openBlock as T, mergeProps as v, unref as x } from "vue";
 import { htmlFromMarkdown as y } from "@scalar/code-highlight";
-import { cx as T } from "@scalar/use-hooks/useBindCx";
-const v = ["innerHTML"], _ = /* @__PURE__ */ f({
+import { useBindCx as k } from "@scalar/use-hooks/useBindCx";
+const B = ["innerHTML"], C = /* @__PURE__ */ h({
+  inheritAttrs: !1,
   __name: "ScalarMarkdown",
   props: {
     value: {},
     withImages: { type: Boolean, default: !1 },
-    transform: {},
-    transformType: {},
-    clamp: { type: [String, Boolean] },
-    class: {},
     withAnchors: { type: Boolean, default: !1 },
+    transform: { type: Function },
+    transformType: {},
+    clamp: {},
     anchorPrefix: {}
   },
-  setup(s) {
-    const r = s, l = (e) => {
-      var a, n, o;
-      if (!r.withAnchors)
-        return ((a = r.transform) == null ? void 0 : a.call(r, e)) || e;
-      const t = (((o = (n = e.children) == null ? void 0 : n[0]) == null ? void 0 : o.value) || "").toLowerCase().replace(/\s+/g, "-"), c = r.anchorPrefix ? `${r.anchorPrefix}/description/${t}` : t;
-      return e.data = {
+  setup(e, { expose: o }) {
+    const { cx: i } = k(), c = d("div");
+    o({ el: c });
+    const l = (t) => {
+      var n, a, m;
+      if (!e.withAnchors)
+        return ((n = e.transform) == null ? void 0 : n.call(e, t)) || t;
+      const r = (((m = (a = t.children) == null ? void 0 : a[0]) == null ? void 0 : m.value) || "").toLowerCase().replace(/\s+/g, "-"), u = e.anchorPrefix ? `${e.anchorPrefix}/description/${r}` : r;
+      return t.data = {
         hProperties: {
-          id: c
+          id: u
         }
-      }, r.transform ? r.transform(e) : e;
-    }, i = p(() => y(r.value ?? "", {
-      removeTags: r.withImages ? [] : ["img", "picture"],
-      transform: r.withAnchors && r.transformType === "heading" ? l : r.transform,
-      transformType: r.transformType
+      }, e.transform ? e.transform(t) : t;
+    }, f = g(() => y(e.value ?? "", {
+      removeTags: e.withImages ? [] : ["img", "picture"],
+      transform: e.withAnchors && e.transformType === "heading" ? l : e.transform,
+      transformType: e.transformType
     }));
-    return (e, m) => (u(), h("div", {
-      class: g(
-        w(T)("markdown text-ellipsis", { "line-clamp-4": e.clamp }, r.class)
-      ),
-      style: d({
-        "-webkit-line-clamp": typeof e.clamp == "string" ? e.clamp : void 0
-      }),
-      innerHTML: i.value
-    }, null, 14, v));
+    return (t, s) => (T(), w("div", v({ ref: "div" }, x(i)("markdown", { "line-clamp-(--markdown-clamp)": !!t.clamp }), {
+      style: { "--markdown-clamp": t.clamp },
+      innerHTML: f.value
+    }), null, 16, B));
   }
 });
 export {
-  _ as default
+  C as default
 };

package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue.d.ts

@@ -0,0 +1,59 @@
+import type { ScalarMarkdownProps } from './types';
+type __VLS_Props = ScalarMarkdownProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {
+            open: boolean;
+        }): any;
+    };
+    refs: {
+        "scalar-markdown": import("vue").CreateComponentPublicInstanceWithMixins<Readonly<ScalarMarkdownProps> & Readonly<{}>, {
+            el: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {
+            div: HTMLDivElement;
+        }, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<ScalarMarkdownProps> & Readonly<{}>, {
+            el: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+        }, {}, {}, {}, {}> | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    "scalar-markdown": import("vue").CreateComponentPublicInstanceWithMixins<Readonly<ScalarMarkdownProps> & Readonly<{}>, {
+        el: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {
+        div: HTMLDivElement;
+    }, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<ScalarMarkdownProps> & Readonly<{}>, {
+        el: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+    }, {}, {}, {}, {}> | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarMarkdownSummary.vue.d.ts.map

package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarMarkdownSummary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAIlD,KAAK,WAAW,GAAG,mBAAmB,CAAC;AAuCvC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAiET,OAAO,IAA6B;;;;YATtB,GAAG;;;;;;;;;;;;;;;;;;;EAc9B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;OAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue.js

@@ -0,0 +1,63 @@
+import { defineComponent as p, mergeModels as f, createPropsRestProxy as v, useId as h, useModel as y, useTemplateRef as w, ref as k, onMounted as x, createElementBlock as u, openBlock as m, normalizeProps as g, guardReactiveProps as B, unref as r, createVNode as M, createCommentVNode as P, mergeProps as V, normalizeClass as b, renderSlot as C, createTextVNode as S, toDisplayString as T } from "vue";
+import { useBindCx as R } from "@scalar/use-hooks/useBindCx";
+import { useResizeObserver as _ } from "@vueuse/core";
+import z from "./ScalarMarkdown.vue.js";
+import "./ScalarMarkdown.vue2.js";
+const N = ["aria-controls", "aria-expanded"], E = /* @__PURE__ */ p({
+  inheritAttrs: !1,
+  __name: "ScalarMarkdownSummary",
+  props: /* @__PURE__ */ f({
+    value: {},
+    withImages: { type: Boolean },
+    withAnchors: { type: Boolean },
+    transform: { type: Function },
+    transformType: {},
+    clamp: { default: 1 },
+    anchorPrefix: {}
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    const c = v(t, ["clamp"]), l = h(), o = y(t, "modelValue"), n = w("scalar-markdown"), s = k(!1);
+    _(() => {
+      var e;
+      return (e = n.value) == null ? void 0 : e.el;
+    }, i);
+    function i() {
+      var a;
+      const e = (a = n.value) == null ? void 0 : a.el;
+      e && (s.value = e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth);
+    }
+    x(i);
+    const { cx: d } = R();
+    return (e, a) => (m(), u("div", g(B(
+      r(d)(
+        "group/summary flex gap-0.5",
+        o.value ? "flex-col" : "flex-row items-baseline"
+      )
+    )), [
+      M(z, V({ ref: "scalar-markdown" }, c, {
+        id: r(l),
+        class: { "markdown-summary truncate": !o.value },
+        clamp: o.value ? void 0 : e.clamp
+      }), null, 16, ["id", "class", "clamp"]),
+      s.value || o.value ? (m(), u("button", {
+        key: 0,
+        class: b(["whitespace-nowrap font-medium hover:underline", { "self-end": o.value }]),
+        type: "button",
+        "aria-controls": r(l),
+        "aria-expanded": o.value,
+        onClick: a[0] || (a[0] = ($) => o.value = !o.value)
+      }, [
+        C(e.$slots, "button", { open: o.value }, () => [
+          S(T(o.value ? " Show Less" : "More"), 1)
+        ])
+      ], 10, N)) : P("", !0)
+    ], 16));
+  }
+});
+export {
+  E as default
+};

package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue2.js

@@ -0,0 +1,4 @@
+const a = "";
+export {
+  a as default
+};

package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue3.js

@@ -0,0 +1,5 @@
+import o from "./ScalarMarkdownSummary.vue.js";
+import "./ScalarMarkdownSummary.vue2.js";
+export {
+  o as default
+};

package/dist/components/ScalarMarkdown/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ScalarMarkdown } from './ScalarMarkdown.vue.js';
+export { default as ScalarMarkdownSummary } from './ScalarMarkdownSummary.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarMarkdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA"}