@scalar/components 0.21.3 → 0.21.4

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"names":[],"mappings":"AAoEA;;;;;;;;;;;;;GAaG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yCAAyC;YACjC,MAAM;;IADd,yCAAyC;YACjC,MAAM;;cAwDF,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,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":"ScalarCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"names":[],"mappings":"AAkEA;;;;;;;;;;;;;GAaG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,yCAAyC;YACjC,MAAM;;IADd,yCAAyC;YACjC,MAAM;;cAsDF,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,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/ScalarCard/ScalarCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCard.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx(\n        'scalar-card bg-b-2 flex flex-col divide-y rounded-xl border *:first:rounded-t-[inherit] *:last:rounded-b-[inherit]',\n      ),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCard.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx('scalar-card bg-b-2 flex flex-col divide-y rounded-xl border'),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -16,7 +16,7 @@ var ScalarCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ role: "group" }, {
 				...labelAttrs.value,
-				...unref(cx)("scalar-card bg-b-2 flex flex-col divide-y rounded-xl border *:first:rounded-t-[inherit] *:last:rounded-b-[inherit]")
+				...unref(cx)("scalar-card bg-b-2 flex flex-col divide-y rounded-xl border")
 			}), [renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCard.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx(\n        'scalar-card bg-b-2 flex flex-col divide-y rounded-xl border *:first:rounded-t-[inherit] *:last:rounded-b-[inherit]',\n      ),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA6BA,MAAM,EAAE,OAAO,eAAc;EAE7B,MAAM,aAAa,eAAe;AAChC,OAAI,QAAA,MAEF,QAAO,EAAE,cAAc,QAAA,OAAM;AAE/B,OAAI,GAAG,MAEL,QAAO,EAAE,mBAAmB,GAAG,OAAM;AAGvC,UAAO,EAAC;IACT;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBASM,OATN,WASM,EARJ,MAAK,SAAO,EAAA;OACO,WAAA;OAAqB,MAAA,GAAE,CAAA,qHAAA;QAM1C,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarCard.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card component\n *\n * Creates an aria region using the nearest ScalarCardHeader as the label\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role\n *\n * @example\n * <ScalarCard>\n *   <ScalarCardHeader>Header</ScalarCardHeader>\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   <ScalarCardFooter>Footer</ScalarCardFooter>\n * </ScalarCard>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { useCardRegion } from './useCardHeading'\n\nconst { label } = defineProps<{\n  /** The a11y label for the card region */\n  label?: string\n}>()\n\n// Get the id for the nearest ScalarCardHeader if it exists\nconst { id } = useCardRegion()\n\nconst labelAttrs = computed(() => {\n  if (label) {\n    // If a label is provided, use it\n    return { 'aria-label': label }\n  }\n  if (id.value) {\n    // If no label is provided, use the heading id\n    return { 'aria-labelledby': id.value }\n  }\n  // If no label or heading id is provided, don't add any aria attributes\n  return {}\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"{\n      ...labelAttrs,\n      ...cx('scalar-card bg-b-2 flex flex-col divide-y rounded-xl border'),\n    }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EA6BA,MAAM,EAAE,OAAO,eAAc;EAE7B,MAAM,aAAa,eAAe;AAChC,OAAI,QAAA,MAEF,QAAO,EAAE,cAAc,QAAA,OAAM;AAE/B,OAAI,GAAG,MAEL,QAAO,EAAE,mBAAmB,GAAG,OAAM;AAGvC,UAAO,EAAC;IACT;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAOM,OAPN,WAOM,EANJ,MAAK,SAAO,EAAA;OACO,WAAA;OAAqB,MAAA,GAAE,CAAA,8DAAA;QAI1C,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarCard/ScalarCardSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"names":[],"mappings":"AAgCA;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA0BJ,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":"ScalarCardSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCard/ScalarCardSection.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/ScalarCard/ScalarCardSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardSection.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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 v-bind=\"cx('scalar-card-content flex overflow-auto')\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarCardSection.vue.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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        'scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCard/ScalarCardSection.vue.script.js

@@ -6,7 +6,7 @@ var ScalarCardSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-card-content flex overflow-auto"))), [renderSlot(_ctx.$slots, "default")], 16);
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]"))), [renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}
 });

package/dist/components/ScalarCard/ScalarCardSection.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCardSection.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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 v-bind=\"cx('scalar-card-content flex overflow-auto')\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAEM,OAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,yCAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarCardSection.vue.script.js","names":[],"sources":["../../../src/components/ScalarCard/ScalarCardSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar card section component\n *\n * A generic section of a ScalarCard component, provides the base for ScalarCardHeader and ScalarCardFooter\n *\n * @example\n * <ScalarCard>\n *   ...\n *   <ScalarCardSection>Content</ScalarCardSection>\n *   ...\n * </ScalarCard>\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        'scalar-card-content flex overflow-auto first:rounded-t-[inherit] last:rounded-b-[inherit]',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAOM,OAAA,eAAA,mBANW,MAAA,GAAE,CAAA,4FAAA,CAAA,CAAA,EAAA,CAKjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

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

@@ -14,15 +14,21 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 } & {
     /** * Whether the summary is open. */
     modelValue?: boolean;
+    /** Whether the markdown is being truncated */
+    truncated?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
+    "update:truncated": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("./types").ScalarMarkdownProps & {
     controlled?: boolean;
 } & {
     /** * Whether the summary is open. */
     modelValue?: boolean;
+    /** Whether the markdown is being truncated */
+    truncated?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:truncated"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         open: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMarkdownSummary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"names":[],"mappings":"AA0HA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;IAqClB,qCAAqC;iBACxB,OAAO;;;;;;IADpB,qCAAqC;iBACxB,OAAO;;;;aAiFP,CAAC,KAAK;;KAAgB,KAAK,GAAG;EAYvC,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":"ScalarMarkdownSummary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"names":[],"mappings":"AA0HA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;IAsClB,qCAAqC;iBACxB,OAAO;IACpB,8CAA8C;gBAChC,OAAO;;;;;;;IAHrB,qCAAqC;iBACxB,OAAO;IACpB,8CAA8C;gBAChC,OAAO;;;;;aAkFR,CAAC,KAAK;;KAAgB,KAAK,GAAG;EAYvC,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/ScalarMarkdown/ScalarMarkdownSummary.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMarkdownSummary.vue.js","names":[],"sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Markdown Summary component\n *\n * Displays a truncated preview of markdown content with\n * a \"More\" / \"Show Less\" toggle to expand and collapse.\n *\n * @example\n * <ScalarMarkdownSummary value=\"Long markdown text...\" :clamp=\"2\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useResizeObserver } from '@vueuse/core'\nimport { onMounted, ref, useId, useTemplateRef } from 'vue'\n\nimport ScalarMarkdown from './ScalarMarkdown.vue'\nimport type { ScalarMarkdownSummaryProps } from './types'\n\nconst { clamp = 1, ...props } = defineProps<ScalarMarkdownSummaryProps>()\n\nconst id = useId()\n\n/** * Whether the summary is open. */\nconst open = defineModel<boolean>({ default: false })\n\nconst markdown = useTemplateRef('scalar-markdown')\n\n/** Whether the markdown is being truncated */\nconst isTruncated = ref(false)\n\nuseResizeObserver(() => markdown.value?.el, checkTruncation)\n\n/** Check if the markdown is being truncated */\nfunction checkTruncation() {\n  const el = markdown.value?.el\n  if (!el) {\n    return\n  }\n  isTruncated.value =\n    el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\n}\n\nonMounted(checkTruncation)\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'group/summary flex gap-0.5',\n        open ? 'flex-col' : 'flex-row items-baseline',\n      )\n    \">\n    <ScalarMarkdown\n      v-bind=\"props\"\n      :id=\"id\"\n      ref=\"scalar-markdown\"\n      :clamp=\"open ? undefined : clamp\"\n      :class=\"{ 'markdown-summary truncate': !open }\" />\n    <button\n      v-if=\"!controlled && (isTruncated || open)\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"open\"\n      class=\"whitespace-nowrap font-medium hover:underline\"\n      :class=\"{ 'self-end': open }\"\n      type=\"button\"\n      @click=\"open = !open\">\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        {{ open ? ' Show Less' : 'More' }}\n      </slot>\n    </button>\n  </div>\n</template>\n<style>\n.scalar-app {\n  /*\n    Summarized markdown styles\n    Doubled up to bump specificity\n  */\n  .markdown.markdown-summary.markdown-summary {\n    /* Hide the before and after pseudo-elements for all elements */\n    *:before,\n    *:after {\n      content: none;\n    }\n\n    *:not(strong, em, a) {\n      /* Disable formatting for non-inline elements */\n      display: contents;\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: var(--markdown-line-height);\n    }\n\n    /* Hide elements that don't make sense in the summary */\n    img,\n    svg,\n    hr,\n    pre {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarMarkdownSummary.vue.js","names":[],"sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Markdown Summary component\n *\n * Displays a truncated preview of markdown content with\n * a \"More\" / \"Show Less\" toggle to expand and collapse.\n *\n * @example\n * <ScalarMarkdownSummary value=\"Long markdown text...\" :clamp=\"2\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useResizeObserver } from '@vueuse/core'\nimport { onMounted, useId, useTemplateRef } from 'vue'\n\nimport ScalarMarkdown from './ScalarMarkdown.vue'\nimport type { ScalarMarkdownSummaryProps } from './types'\n\nconst { clamp = 1, ...props } = defineProps<ScalarMarkdownSummaryProps>()\n\nconst id = useId()\n\n/** * Whether the summary is open. */\nconst open = defineModel<boolean>({ default: false })\n\n/** Whether the markdown is being truncated */\nconst truncated = defineModel<boolean>('truncated', { default: false })\n\nconst markdown = useTemplateRef('scalar-markdown')\n\nuseResizeObserver(() => markdown.value?.el, checkTruncation)\n\n/** Check if the markdown is being truncated */\nfunction checkTruncation() {\n  const el = markdown.value?.el\n  if (!el) {\n    return\n  }\n  truncated.value =\n    el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\n}\n\nonMounted(checkTruncation)\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'group/summary flex gap-0.5',\n        open ? 'flex-col' : 'flex-row items-baseline',\n      )\n    \">\n    <ScalarMarkdown\n      v-bind=\"props\"\n      :id=\"id\"\n      ref=\"scalar-markdown\"\n      :clamp=\"open ? undefined : clamp\"\n      :class=\"{ 'markdown-summary truncate': !open }\" />\n    <button\n      v-if=\"!controlled && (truncated || open)\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"open\"\n      class=\"whitespace-nowrap font-medium hover:underline\"\n      :class=\"{ 'self-end': open }\"\n      type=\"button\"\n      @click=\"open = !open\">\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        {{ open ? ' Show Less' : 'More' }}\n      </slot>\n    </button>\n  </div>\n</template>\n<style>\n.scalar-app {\n  /*\n    Summarized markdown styles\n    Doubled up to bump specificity\n  */\n  .markdown.markdown-summary.markdown-summary {\n    /* Hide the before and after pseudo-elements for all elements */\n    *:before,\n    *:after {\n      content: none;\n    }\n\n    *:not(strong, em, a) {\n      /* Disable formatting for non-inline elements */\n      display: contents;\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: var(--markdown-line-height);\n    }\n\n    /* Hide elements that don't make sense in the summary */\n    img,\n    svg,\n    hr,\n    pre {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import ScalarMarkdown_default from "./ScalarMarkdown.vue.js";
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createCommentVNode, createElementBlock, createPropsRestProxy, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef } from "vue";
+import { createCommentVNode, createElementBlock, createPropsRestProxy, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, onMounted, openBlock, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 //#region src/components/ScalarMarkdown/ScalarMarkdownSummary.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-controls", "aria-expanded"];
@@ -21,23 +21,28 @@ var ScalarMarkdownSummary_vue_vue_type_script_setup_true_lang_default = /* @__PU
 			type: Boolean,
 			default: false
 		},
-		"modelModifiers": {}
+		"modelModifiers": {},
+		"truncated": {
+			type: Boolean,
+			default: false
+		},
+		"truncatedModifiers": {}
 	}),
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "update:truncated"],
 	setup(__props) {
 		const props = createPropsRestProxy(__props, ["clamp"]);
 		const id = useId();
 		/** * Whether the summary is open. */
 		const open = useModel(__props, "modelValue");
-		const markdown = useTemplateRef("scalar-markdown");
 		/** Whether the markdown is being truncated */
-		const isTruncated = ref(false);
+		const truncated = useModel(__props, "truncated");
+		const markdown = useTemplateRef("scalar-markdown");
 		useResizeObserver(() => markdown.value?.el, checkTruncation);
 		/** Check if the markdown is being truncated */
 		function checkTruncation() {
 			const el = markdown.value?.el;
 			if (!el) return;
-			isTruncated.value = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+			truncated.value = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
 		}
 		onMounted(checkTruncation);
 		const { cx } = useBindCx();
@@ -51,7 +56,7 @@ var ScalarMarkdownSummary_vue_vue_type_script_setup_true_lang_default = /* @__PU
 				"id",
 				"clamp",
 				"class"
-			]), !__props.controlled && (isTruncated.value || open.value) ? (openBlock(), createElementBlock("button", {
+			]), !__props.controlled && (truncated.value || open.value) ? (openBlock(), createElementBlock("button", {
 				key: 0,
 				"aria-controls": unref(id),
 				"aria-expanded": open.value,

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarMarkdownSummary.vue.script.js","names":[],"sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Markdown Summary component\n *\n * Displays a truncated preview of markdown content with\n * a \"More\" / \"Show Less\" toggle to expand and collapse.\n *\n * @example\n * <ScalarMarkdownSummary value=\"Long markdown text...\" :clamp=\"2\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useResizeObserver } from '@vueuse/core'\nimport { onMounted, ref, useId, useTemplateRef } from 'vue'\n\nimport ScalarMarkdown from './ScalarMarkdown.vue'\nimport type { ScalarMarkdownSummaryProps } from './types'\n\nconst { clamp = 1, ...props } = defineProps<ScalarMarkdownSummaryProps>()\n\nconst id = useId()\n\n/** * Whether the summary is open. */\nconst open = defineModel<boolean>({ default: false })\n\nconst markdown = useTemplateRef('scalar-markdown')\n\n/** Whether the markdown is being truncated */\nconst isTruncated = ref(false)\n\nuseResizeObserver(() => markdown.value?.el, checkTruncation)\n\n/** Check if the markdown is being truncated */\nfunction checkTruncation() {\n  const el = markdown.value?.el\n  if (!el) {\n    return\n  }\n  isTruncated.value =\n    el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\n}\n\nonMounted(checkTruncation)\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'group/summary flex gap-0.5',\n        open ? 'flex-col' : 'flex-row items-baseline',\n      )\n    \">\n    <ScalarMarkdown\n      v-bind=\"props\"\n      :id=\"id\"\n      ref=\"scalar-markdown\"\n      :clamp=\"open ? undefined : clamp\"\n      :class=\"{ 'markdown-summary truncate': !open }\" />\n    <button\n      v-if=\"!controlled && (isTruncated || open)\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"open\"\n      class=\"whitespace-nowrap font-medium hover:underline\"\n      :class=\"{ 'self-end': open }\"\n      type=\"button\"\n      @click=\"open = !open\">\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        {{ open ? ' Show Less' : 'More' }}\n      </slot>\n    </button>\n  </div>\n</template>\n<style>\n.scalar-app {\n  /*\n    Summarized markdown styles\n    Doubled up to bump specificity\n  */\n  .markdown.markdown-summary.markdown-summary {\n    /* Hide the before and after pseudo-elements for all elements */\n    *:before,\n    *:after {\n      content: none;\n    }\n\n    *:not(strong, em, a) {\n      /* Disable formatting for non-inline elements */\n      display: contents;\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: var(--markdown-line-height);\n    }\n\n    /* Hide elements that don't make sense in the summary */\n    img,\n    svg,\n    hr,\n    pre {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAA0B,qBAAA,SAAA,CAAA,QAAA,CAAA;EAEhC,MAAM,KAAK,OAAM;;EAGjB,MAAM,OAAO,SAAoB,SAAA,aAAmB;EAEpD,MAAM,WAAW,eAAe,kBAAiB;;EAGjD,MAAM,cAAc,IAAI,MAAK;AAE7B,0BAAwB,SAAS,OAAO,IAAI,gBAAe;;EAG3D,SAAS,kBAAkB;GACzB,MAAM,KAAK,SAAS,OAAO;AAC3B,OAAI,CAAC,GACH;AAEF,eAAY,QACV,GAAG,eAAe,GAAG,gBAAgB,GAAG,cAAc,GAAG;;AAG7D,YAAU,gBAAe;EAEzB,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBA2BM,OAAA,eAAA,mBA1BW,MAAA,GAAE,CAAA,8BAAgD,KAAA,QAAI,aAAA,0BAAA,CAAA,CAAA,EAAA,CAMrE,YAKoD,wBALpD,WACU,OAAK;IACZ,IAAI,MAAA,GAAE;IACP,KAAI;IACH,OAAO,KAAA,QAAO,KAAA,IAAY,QAAA;IAC1B,OAAK,EAAA,6BAAA,CAAkC,KAAA,OAAI;;;;;QAErC,QAAA,eAAe,YAAA,SAAe,KAAA,UAAA,WAAA,EADvC,mBAaS,UAAA;;IAXN,iBAAe,MAAA,GAAE;IACjB,iBAAe,KAAA;IAChB,OAAK,eAAA,CAAC,iDAA+C,EAAA,YAC/B,KAAA,OAAI,CAAA,CAAA;IAC1B,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI,CAAI,KAAA;OAChB,WAIO,KAAA,QAAA,UAAA,EAFJ,MAAM,KAAA,OAAI,QAEN,CAAA,gBAAA,gBADF,KAAA,QAAI,eAAA,OAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarMarkdownSummary.vue.script.js","names":[],"sources":["../../../src/components/ScalarMarkdown/ScalarMarkdownSummary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Markdown Summary component\n *\n * Displays a truncated preview of markdown content with\n * a \"More\" / \"Show Less\" toggle to expand and collapse.\n *\n * @example\n * <ScalarMarkdownSummary value=\"Long markdown text...\" :clamp=\"2\" />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useResizeObserver } from '@vueuse/core'\nimport { onMounted, useId, useTemplateRef } from 'vue'\n\nimport ScalarMarkdown from './ScalarMarkdown.vue'\nimport type { ScalarMarkdownSummaryProps } from './types'\n\nconst { clamp = 1, ...props } = defineProps<ScalarMarkdownSummaryProps>()\n\nconst id = useId()\n\n/** * Whether the summary is open. */\nconst open = defineModel<boolean>({ default: false })\n\n/** Whether the markdown is being truncated */\nconst truncated = defineModel<boolean>('truncated', { default: false })\n\nconst markdown = useTemplateRef('scalar-markdown')\n\nuseResizeObserver(() => markdown.value?.el, checkTruncation)\n\n/** Check if the markdown is being truncated */\nfunction checkTruncation() {\n  const el = markdown.value?.el\n  if (!el) {\n    return\n  }\n  truncated.value =\n    el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\n}\n\nonMounted(checkTruncation)\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'group/summary flex gap-0.5',\n        open ? 'flex-col' : 'flex-row items-baseline',\n      )\n    \">\n    <ScalarMarkdown\n      v-bind=\"props\"\n      :id=\"id\"\n      ref=\"scalar-markdown\"\n      :clamp=\"open ? undefined : clamp\"\n      :class=\"{ 'markdown-summary truncate': !open }\" />\n    <button\n      v-if=\"!controlled && (truncated || open)\"\n      :aria-controls=\"id\"\n      :aria-expanded=\"open\"\n      class=\"whitespace-nowrap font-medium hover:underline\"\n      :class=\"{ 'self-end': open }\"\n      type=\"button\"\n      @click=\"open = !open\">\n      <slot\n        name=\"button\"\n        :open=\"open\">\n        {{ open ? ' Show Less' : 'More' }}\n      </slot>\n    </button>\n  </div>\n</template>\n<style>\n.scalar-app {\n  /*\n    Summarized markdown styles\n    Doubled up to bump specificity\n  */\n  .markdown.markdown-summary.markdown-summary {\n    /* Hide the before and after pseudo-elements for all elements */\n    *:before,\n    *:after {\n      content: none;\n    }\n\n    *:not(strong, em, a) {\n      /* Disable formatting for non-inline elements */\n      display: contents;\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: var(--markdown-line-height);\n    }\n\n    /* Hide elements that don't make sense in the summary */\n    img,\n    svg,\n    hr,\n    pre {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAA0B,qBAAA,SAAA,CAAA,QAAA,CAAA;EAEhC,MAAM,KAAK,OAAM;;EAGjB,MAAM,OAAO,SAAoB,SAAA,aAAmB;;EAGpD,MAAM,YAAY,SAAoB,SAAC,YAA+B;EAEtE,MAAM,WAAW,eAAe,kBAAiB;AAEjD,0BAAwB,SAAS,OAAO,IAAI,gBAAe;;EAG3D,SAAS,kBAAkB;GACzB,MAAM,KAAK,SAAS,OAAO;AAC3B,OAAI,CAAC,GACH;AAEF,aAAU,QACR,GAAG,eAAe,GAAG,gBAAgB,GAAG,cAAc,GAAG;;AAG7D,YAAU,gBAAe;EAEzB,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBA2BM,OAAA,eAAA,mBA1BW,MAAA,GAAE,CAAA,8BAAgD,KAAA,QAAI,aAAA,0BAAA,CAAA,CAAA,EAAA,CAMrE,YAKoD,wBALpD,WACU,OAAK;IACZ,IAAI,MAAA,GAAE;IACP,KAAI;IACH,OAAO,KAAA,QAAO,KAAA,IAAY,QAAA;IAC1B,OAAK,EAAA,6BAAA,CAAkC,KAAA,OAAI;;;;;QAErC,QAAA,eAAe,UAAA,SAAa,KAAA,UAAA,WAAA,EADrC,mBAaS,UAAA;;IAXN,iBAAe,MAAA,GAAE;IACjB,iBAAe,KAAA;IAChB,OAAK,eAAA,CAAC,iDAA+C,EAAA,YAC/B,KAAA,OAAI,CAAA,CAAA;IAC1B,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI,CAAI,KAAA;OAChB,WAIO,KAAA,QAAA,UAAA,EAFJ,MAAM,KAAA,OAAI,QAEN,CAAA,gBAAA,gBADF,KAAA,QAAI,eAAA,OAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarItems.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarItems.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Items component\n *\n * A base container for ScalarSidebarItem(s), renders as\n * a  `<ul>` by default to meet accessibility requirements\n *\n * @example\n * <ScalarSidebarItems>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n * </ScalarSidebarItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useSidebarNestedItems } from './useSidebarNestedItems'\n\nconst { is = 'ul' } = defineProps<{\n  is?: Component | string\n}>()\n\nconst { open } = useSidebarNestedItems()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"\n      cx(\n        'group/items relative flex flex-col p-3 gap-px transition-transform duration-300',\n        open ? '-translate-x-full' : 'translate-x-0',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Hide the buttons from the keyboard when a nested item is open */\n.group\\/items.-translate-x-full .group\\/button {\n  /* Required to prevent the button from being focused */\n  display: none;\n  /* Required to prevent the button from taking up scroll space */\n  max-height: 0;\n\n  transition-property: display, max-height;\n  transition-behavior: allow-discrete;\n  transition-duration: 0s;\n  transition-delay: 300ms;\n}\n\n/* Show the buttons within a nested item when it is open */\n.group\\/item.group\\/nested-items-open\n  > *\n  > .group\\/items.translate-x-0\n  .group\\/button {\n  max-height: calc(infinity * 1px);\n  display: flex;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarItems.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Items component\n *\n * A base container for ScalarSidebarItem(s), renders as\n * a  `<ul>` by default to meet accessibility requirements\n *\n * @example\n * <ScalarSidebarItems>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n * </ScalarSidebarItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useSidebarNestedItems } from './useSidebarNestedItems'\n\nconst { is = 'ul' } = defineProps<{\n  is?: Component | string\n}>()\n\nconst { open } = useSidebarNestedItems()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"\n      cx(\n        'group/items relative flex flex-col p-(--scalar-sidebar-padding) gap-px transition-transform duration-300',\n        open ? '-translate-x-full' : 'translate-x-0',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Hide the buttons from the keyboard when a nested item is open */\n.group\\/items.-translate-x-full .group\\/button {\n  /* Required to prevent the button from being focused */\n  display: none;\n  /* Required to prevent the button from taking up scroll space */\n  max-height: 0;\n\n  transition-property: display, max-height;\n  transition-behavior: allow-discrete;\n  transition-duration: 0s;\n  transition-delay: 300ms;\n}\n\n/* Show the buttons within a nested item when it is open */\n.group\\/item.group\\/nested-items-open\n  > *\n  > .group\\/items.translate-x-0\n  .group\\/button {\n  max-height: calc(infinity * 1px);\n  display: flex;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarItems.vue.script.js

@@ -9,7 +9,7 @@ var ScalarSidebarItems_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		const { open } = useSidebarNestedItems();
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("group/items relative flex flex-col p-3 gap-px transition-transform duration-300", unref(open) ? "-translate-x-full" : "translate-x-0"))), {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), normalizeProps(guardReactiveProps(unref(cx)("group/items relative flex flex-col p-(--scalar-sidebar-padding) gap-px transition-transform duration-300", unref(open) ? "-translate-x-full" : "translate-x-0"))), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16);

package/dist/components/ScalarSidebar/ScalarSidebarItems.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarItems.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Items component\n *\n * A base container for ScalarSidebarItem(s), renders as\n * a  `<ul>` by default to meet accessibility requirements\n *\n * @example\n * <ScalarSidebarItems>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n * </ScalarSidebarItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useSidebarNestedItems } from './useSidebarNestedItems'\n\nconst { is = 'ul' } = defineProps<{\n  is?: Component | string\n}>()\n\nconst { open } = useSidebarNestedItems()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"\n      cx(\n        'group/items relative flex flex-col p-3 gap-px transition-transform duration-300',\n        open ? '-translate-x-full' : 'translate-x-0',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Hide the buttons from the keyboard when a nested item is open */\n.group\\/items.-translate-x-full .group\\/button {\n  /* Required to prevent the button from being focused */\n  display: none;\n  /* Required to prevent the button from taking up scroll space */\n  max-height: 0;\n\n  transition-property: display, max-height;\n  transition-behavior: allow-discrete;\n  transition-duration: 0s;\n  transition-delay: 300ms;\n}\n\n/* Show the buttons within a nested item when it is open */\n.group\\/item.group\\/nested-items-open\n  > *\n  > .group\\/items.translate-x-0\n  .group\\/button {\n  max-height: calc(infinity * 1px);\n  display: flex;\n}\n</style>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,SAAS,uBAAsB;EAGvC,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YASY,wBARL,QAAA,GAAE,EAAA,eAAA,mBACQ,MAAA,GAAE,CAAA,mFAAqG,MAAA,KAAI,GAAA,sBAAA,gBAAA,CAAA,CAAA,EAAA;2BAMlH,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarSidebarItems.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Items component\n *\n * A base container for ScalarSidebarItem(s), renders as\n * a  `<ul>` by default to meet accessibility requirements\n *\n * @example\n * <ScalarSidebarItems>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n *   <ScalarSidebarItem>...</ScalarSidebarItem>\n * </ScalarSidebarItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nimport { useSidebarNestedItems } from './useSidebarNestedItems'\n\nconst { is = 'ul' } = defineProps<{\n  is?: Component | string\n}>()\n\nconst { open } = useSidebarNestedItems()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"\n      cx(\n        'group/items relative flex flex-col p-(--scalar-sidebar-padding) gap-px transition-transform duration-300',\n        open ? '-translate-x-full' : 'translate-x-0',\n      )\n    \">\n    <slot />\n  </component>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/* Hide the buttons from the keyboard when a nested item is open */\n.group\\/items.-translate-x-full .group\\/button {\n  /* Required to prevent the button from being focused */\n  display: none;\n  /* Required to prevent the button from taking up scroll space */\n  max-height: 0;\n\n  transition-property: display, max-height;\n  transition-behavior: allow-discrete;\n  transition-duration: 0s;\n  transition-delay: 300ms;\n}\n\n/* Show the buttons within a nested item when it is open */\n.group\\/item.group\\/nested-items-open\n  > *\n  > .group\\/items.translate-x-0\n  .group\\/button {\n  max-height: calc(infinity * 1px);\n  display: flex;\n}\n</style>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,SAAS,uBAAsB;EAGvC,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YASY,wBARL,QAAA,GAAE,EAAA,eAAA,mBACQ,MAAA,GAAE,CAAA,4GAA8H,MAAA,KAAI,GAAA,sBAAA,gBAAA,CAAA,CAAA,EAAA;2BAM3I,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"names":[],"mappings":"AA8LA;;;;;;;;;;;;;;;GAeG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;WA+FT,OAAO;;;;;;;;;;WAAP,OAAO;;;;;;IA9Ed,qCAAqC;cACzB,MAAM,OAAO;IACzB,iCAAiC;aACtB,MAAM,OAAO;IACxB,wBAAwB;WACf,MAAM,OAAO;IACtB,8BAA8B;YACpB,MAAM,OAAO;IACvB,+BAA+B;WACtB,MAAM,OAAO;IACtB,qCAAqC;mBACtB,MAAM,OAAO;IAC5B,mCAAmC;YACzB,MAAM,OAAO;EAoSrB,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":"ScalarSidebarNestedItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"names":[],"mappings":"AAoNA;;;;;;;;;;;;;;;GAeG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;WA+FT,OAAO;;;;;;;;;;WAAP,OAAO;;;;;;IA9Ed,qCAAqC;cACzB,MAAM,OAAO;IACzB,iCAAiC;aACtB,MAAM,OAAO;IACxB,wBAAwB;WACf,MAAM,OAAO;IACtB,8BAA8B;YACpB,MAAM,OAAO;IACvB,+BAA+B;WACtB,MAAM,OAAO;IACtB,qCAAqC;mBACtB,MAAM,OAAO;IAC5B,mCAAmC;YACzB,MAAM,OAAO;EAoTrB,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/ScalarSidebar/ScalarSidebarNestedItems.vue.js

@@ -1,4 +1,5 @@
 import ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarNestedItems.vue.script.js";
+/* empty css                                       */
 //#region src/components/ScalarSidebar/ScalarSidebarNestedItems.vue
 var ScalarSidebarNestedItems_default = ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <slot name=\"back\">\n            <ScalarSidebarButton\n              is=\"button\"\n              class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n              @click=\"handleBack\">\n              <template #icon>\n                <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n              </template>\n              <slot name=\"back-label\">Back</slot>\n            </ScalarSidebarButton>\n          </slot>\n          <ScalarSidebarSpacer class=\"h-3\" />\n          <slot name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarNestedItems.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <div\n            class=\"flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) p-(--scalar-sidebar-padding) -m-(--scalar-sidebar-padding) mb-0 pb-0 bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border\">\n            <slot name=\"back\">\n              <ScalarSidebarButton\n                is=\"button\"\n                class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n                @click=\"handleBack\">\n                <template #icon>\n                  <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <slot name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n\n<style>\n@reference \"../../style.css\";\n\n.animate-sidebar-border-bottom {\n  animation: border-bottom forwards;\n  animation-timeline: scroll();\n  animation-range-end: 1px;\n}\n\n@keyframes border-bottom {\n  from {\n    border-bottom-width: 0;\n  }\n  to {\n    border-bottom-width: var(--scalar-border-width);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.script.js

@@ -4,13 +4,14 @@ import { useSidebarNestedItem } from "./useSidebarNestedItems.js";
 import ScalarSidebarItems_default from "./ScalarSidebarItems.vue.js";
 import ScalarSidebarSpacer_default from "./ScalarSidebarSpacer.vue.js";
 import { findScrollContainer } from "./findScrollContainer.js";
-import { Transition, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, withCtx } from "vue";
+import { Transition, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, withCtx } from "vue";
 import { ScalarIconArrowRight, ScalarIconCaretLeft } from "@scalar/icons";
 //#region src/components/ScalarSidebar/ScalarSidebarNestedItems.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "absolute inset-0 translate-x-full"
 };
+var _hoisted_2 = { class: "flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) p-(--scalar-sidebar-padding) -m-(--scalar-sidebar-padding) mb-0 pb-0 bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border" };
 var ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarNestedItems",
@@ -100,19 +101,15 @@ var ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default = /* @_
 				onLeave: onClose
 			}, {
 				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(ScalarSidebarItems_default, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
-					default: withCtx(() => [
-						renderSlot(_ctx.$slots, "back", {}, () => [createVNode(ScalarSidebarButton_default, {
-							is: "button",
-							class: "text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1",
-							onClick: handleBack
-						}, {
-							icon: withCtx(() => [createVNode(unref(ScalarIconCaretLeft), { class: "size-4 -m-px text-sidebar-c-2" })]),
-							default: withCtx(() => [renderSlot(_ctx.$slots, "back-label", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Back", -1))])]),
-							_: 3
-						})]),
-						createVNode(ScalarSidebarSpacer_default, { class: "h-3" }),
-						renderSlot(_ctx.$slots, "items")
-					]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "back", {}, () => [createVNode(ScalarSidebarButton_default, {
+						is: "button",
+						class: "text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1",
+						onClick: handleBack
+					}, {
+						icon: withCtx(() => [createVNode(unref(ScalarIconCaretLeft), { class: "size-4 -m-px text-sidebar-c-2" })]),
+						default: withCtx(() => [renderSlot(_ctx.$slots, "back-label", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Back", -1))])]),
+						_: 3
+					})]), createVNode(ScalarSidebarSpacer_default, { class: "h-3" })]), renderSlot(_ctx.$slots, "items")]),
 					_: 3
 				}, 16)])) : createCommentVNode("", true)]),
 				_: 3

package/dist/components/ScalarSidebar/ScalarSidebarNestedItems.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarNestedItems.vue.script.js","names":["$attrs","$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <slot name=\"back\">\n            <ScalarSidebarButton\n              is=\"button\"\n              class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n              @click=\"handleBack\">\n              <template #icon>\n                <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n              </template>\n              <slot name=\"back-label\">Back</slot>\n            </ScalarSidebarButton>\n          </slot>\n          <ScalarSidebarSpacer class=\"h-3\" />\n          <slot name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,OAAO;EAOb,MAAM,OAAO,SAAoB,SAAC,OAA0B;AAC5D,uBAAqB,KAAI;EAmBzB,MAAM,EAAE,UAAU,iBAAiB,EAAE,OAAO,MAAM,CAAA;;EAGlD,MAAM,KAAK,eAAe,KAAI;;EAG9B,MAAM,SAAS,IAAI,EAAC;EAIpB,SAAS,SAAS;AAIhB,UAAO,QAAQ,oBAAoB,GAAG,MAAM,CAAC,aAAa;AAG1D,kBACE,GAAG,OACC,cAAiC,uCAAoC,EACrE,MAAM,EAAE,eAAe,MAAM,CAAC,CACpC;;EAEF,SAAS,WAAW;;AAElB,uBAAoB,GAAG,MAAM,CAAC,YAAY;;EAE5C,SAAS,UAAU;AACjB,kBAAe;AACb,OAAG,OAAO,cAAc,SAAS,EAAE,MAAM,EAAE,eAAe,MAAM,CAAA;AAChE,wBAAoB,GAAG,MAAM,CAAC,YAAY,OAAO;KAClD;;;EAMH,MAAM,eAAe,UAAsB;AAEzC,QAAK,SAAS,MAAK;AACnB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;EAKjB,MAAM,cAAc,UAAsB;AAExC,QAAK,QAAQ,MAAK;AAClB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;uBAKf,mBAwDK,MAAA;aAvDC;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,0CAAwC,EAAA,2BACT,KAAA,OAAI,CAAA,CAAA;IACxC,OAAK,eAAA,EAAA,yBAAA,GAAgC,OAAA,MAAM,KAAA,CAAA;OAC5C,WAsBO,KAAA,QAAA,UAAA,EAAA,QAAA,CArBL,YAoBsB,6BApBtB,WAoBsB;IAnBpB,IAAG;IACF,iBAAe,KAAA;IACf,UAAA,QAAA;IACA,MAAA,QAAA;IACA,QAAQ,MAAA,MAAK;IACb,UAAA,QAAA;MACOA,KAAAA,QAAM,EACb,SAAO,aAAW,CAAA,EAAA,YAAA;IAOR,OAAK,cAGP,CAFP,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CADL,YAAwD,MAAA,qBAAA,EAAA,EAAlC,OAAM,2BAAyB,CAAA,CAAA,CAAA,CAAA,CAAA;2BAHjD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;OAJAC,KAAAA,OAAO,OAAA;UACZ;sBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;;SAW1B,YA0Ba,YAAA;IAzBV,UAAU;IACX,kBAAiB;IACjB,kBAAiB;IAChB,cAAY;IACZ,SAAO;IACP,SAAO;;2BAmBF,CAjBE,KAAA,SAAA,WAAA,EADR,mBAkBM,OAlBN,YAkBM,CAfJ,YAcqB,4BAAA,eAAA,mBAdOD,KAAAA,OAAM,CAAA,EAAA;4BAWzB;MAVP,WAUO,KAAA,QAAA,QAAA,EAAA,QAAA,CATL,YAQsB,6BAAA;OAPpB,IAAG;OACH,OAAM;OACL,SAAO;;OACG,MAAI,cACgD,CAA7D,YAA6D,MAAA,oBAAA,EAAA,EAAxC,OAAM,iCAA+B,CAAA,CAAA,CAAA;8BAEzB,CAAnC,WAAmC,KAAA,QAAA,cAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,GAAA,EAAA,CAAA,CAAA,CAAA;;;MAGhC,YAAmC,6BAAA,EAAd,OAAM,OAAK,CAAA;MAChC,WAAqB,KAAA,QAAA,QAAA"}
+{"version":3,"file":"ScalarSidebarNestedItems.vue.script.js","names":["$attrs","$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarNestedItems.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Nested Items component\n *\n * A provides list of items thats presented over the parent list\n * Needs to be nested inside a ScalarSidebarItems component\n *\n * @example\n * <ScalarSidebarNestedItems v-model=\"open\">\n *   <!-- Item text -->\n *   <template #items>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *     <ScalarSidebarItem>...</ScalarSidebarItem>\n *   </template>\n * </ScalarSidebarNestedItems>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconArrowRight, ScalarIconCaretLeft } from '@scalar/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\nimport { findScrollContainer } from './findScrollContainer'\nimport type { ScalarSidebarGroupProps } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\nimport { useSidebarNestedItem } from './useSidebarNestedItems'\n\nconst { controlled } = defineProps<ScalarSidebarGroupProps>()\n\nconst emit = defineEmits<{\n  /** Emitted when the nested item button is clicked */\n  (e: 'click', event: MouseEvent): void\n  /** Emitted when the back button is clicked */\n  (e: 'back', event: MouseEvent): void\n}>()\n\nconst open = defineModel<boolean>('open', { default: false })\nuseSidebarNestedItem(open)\n\ndefineSlots<{\n  /** The text content of the button */\n  'default'?: () => unknown\n  /** Override the entire button */\n  'button'?: () => unknown\n  /** Override the icon */\n  'icon'?: () => unknown\n  /** Override the aside slot */\n  'aside'?: () => unknown\n  /** Override the back button */\n  'back'?: () => unknown\n  /** Override the back button label */\n  'back-label'?: () => unknown\n  /** The list of sidebar subitems */\n  'items'?: () => unknown\n}>()\n\nconst { level } = useSidebarGroups({ reset: true })\n\n/** The root element ref */\nconst el = useTemplateRef('el')\n\n/** How far down to offset the nested items by when animating them in */\nconst offset = ref(0)\n\n// Transition hooks\n\nfunction onOpen() {\n  // Calculate how far down the nearest scroll container is scrolled\n  // We offset the nested items by this amount when animating them\n  // in so they appear in line with the parent items list.\n  offset.value = findScrollContainer(el.value).scrollTop ?? 0\n\n  // Focus the first button in the nested items\n  nextTick(() =>\n    el.value\n      ?.querySelector<HTMLButtonElement>('button:not([aria-expanded=\"true\"])')\n      ?.focus({ preventScroll: true }),\n  )\n}\nfunction onOpened() {\n  /** Reset the scroll position of the scroll container after opening */\n  findScrollContainer(el.value).scrollTop = 0\n}\nfunction onClose() {\n  nextTick(() => {\n    el.value?.querySelector('button')?.focus({ preventScroll: true })\n    findScrollContainer(el.value).scrollTop = offset.value\n  })\n}\n\ndefineOptions({ inheritAttrs: false })\n\n/** Handle the click event for the nested items button */\nconst handleClick = (event: MouseEvent) => {\n  // Bubble up the click event\n  emit('click', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = true\n  }\n}\n\n/** Handle the back button click event */\nconst handleBack = (event: MouseEvent) => {\n  // Bubble up the back event\n  emit('back', event)\n  if (!controlled) {\n    // Only toggle the open state if the group is uncontrolled\n    open.value = false\n  }\n}\n</script>\n<template>\n  <li\n    ref=\"el\"\n    class=\"group/item group/nested-items contents\"\n    :class=\"{ 'group/nested-items-open': open }\"\n    :style=\"{ '--nested-items-offset': `${offset}px` }\">\n    <slot name=\"button\">\n      <ScalarSidebarButton\n        is=\"button\"\n        :aria-expanded=\"open\"\n        :disabled\n        :icon\n        :indent=\"level\"\n        :selected\n        v-bind=\"$attrs\"\n        @click=\"handleClick\">\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <slot />\n        <template #aside>\n          <slot name=\"aside\">\n            <ScalarIconArrowRight class=\"size-4 text-sidebar-c-2\" />\n          </slot>\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <!-- Make sure the div is around for the entire transition -->\n    <Transition\n      :duration=\"300\"\n      enterActiveClass=\"top-(--nested-items-offset)!\"\n      leaveActiveClass=\"top-(--nested-items-offset)!\"\n      @afterEnter=\"onOpened\"\n      @enter=\"onOpen\"\n      @leave=\"onClose\">\n      <div\n        v-if=\"open\"\n        class=\"absolute inset-0 translate-x-full\">\n        <ScalarSidebarItems v-bind=\"$attrs\">\n          <div\n            class=\"flex flex-col gap-px sticky top-(--scalar-sidebar-sticky-offset,0) p-(--scalar-sidebar-padding) -m-(--scalar-sidebar-padding) mb-0 pb-0 bg-sidebar-b-1 z-1 animate-sidebar-border-bottom border-b-sidebar-border\">\n            <slot name=\"back\">\n              <ScalarSidebarButton\n                is=\"button\"\n                class=\"text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1\"\n                @click=\"handleBack\">\n                <template #icon>\n                  <ScalarIconCaretLeft class=\"size-4 -m-px text-sidebar-c-2\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <slot name=\"items\" />\n        </ScalarSidebarItems>\n      </div>\n    </Transition>\n  </li>\n</template>\n\n<style>\n@reference \"../../style.css\";\n\n.animate-sidebar-border-bottom {\n  animation: border-bottom forwards;\n  animation-timeline: scroll();\n  animation-range-end: 1px;\n}\n\n@keyframes border-bottom {\n  from {\n    border-bottom-width: 0;\n  }\n  to {\n    border-bottom-width: var(--scalar-border-width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,OAAO;EAOb,MAAM,OAAO,SAAoB,SAAC,OAA0B;AAC5D,uBAAqB,KAAI;EAmBzB,MAAM,EAAE,UAAU,iBAAiB,EAAE,OAAO,MAAM,CAAA;;EAGlD,MAAM,KAAK,eAAe,KAAI;;EAG9B,MAAM,SAAS,IAAI,EAAC;EAIpB,SAAS,SAAS;AAIhB,UAAO,QAAQ,oBAAoB,GAAG,MAAM,CAAC,aAAa;AAG1D,kBACE,GAAG,OACC,cAAiC,uCAAoC,EACrE,MAAM,EAAE,eAAe,MAAM,CAAC,CACpC;;EAEF,SAAS,WAAW;;AAElB,uBAAoB,GAAG,MAAM,CAAC,YAAY;;EAE5C,SAAS,UAAU;AACjB,kBAAe;AACb,OAAG,OAAO,cAAc,SAAS,EAAE,MAAM,EAAE,eAAe,MAAM,CAAA;AAChE,wBAAoB,GAAG,MAAM,CAAC,YAAY,OAAO;KAClD;;;EAMH,MAAM,eAAe,UAAsB;AAEzC,QAAK,SAAS,MAAK;AACnB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;EAKjB,MAAM,cAAc,UAAsB;AAExC,QAAK,QAAQ,MAAK;AAClB,OAAI,CAAC,QAAA,WAEH,MAAK,QAAQ;;;uBAKf,mBA2DK,MAAA;aA1DC;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,0CAAwC,EAAA,2BACT,KAAA,OAAI,CAAA,CAAA;IACxC,OAAK,eAAA,EAAA,yBAAA,GAAgC,OAAA,MAAM,KAAA,CAAA;OAC5C,WAsBO,KAAA,QAAA,UAAA,EAAA,QAAA,CArBL,YAoBsB,6BApBtB,WAoBsB;IAnBpB,IAAG;IACF,iBAAe,KAAA;IACf,UAAA,QAAA;IACA,MAAA,QAAA;IACA,QAAQ,MAAA,MAAK;IACb,UAAA,QAAA;MACOA,KAAAA,QAAM,EACb,SAAO,aAAW,CAAA,EAAA,YAAA;IAOR,OAAK,cAGP,CAFP,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CADL,YAAwD,MAAA,qBAAA,EAAA,EAAlC,OAAM,2BAAyB,CAAA,CAAA,CAAA,CAAA,CAAA;2BAHjD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;OAJAC,KAAAA,OAAO,OAAA;UACZ;sBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;;SAW1B,YA6Ba,YAAA;IA5BV,UAAU;IACX,kBAAiB;IACjB,kBAAiB;IAChB,cAAY;IACZ,SAAO;IACP,SAAO;;2BAsBF,CApBE,KAAA,SAAA,WAAA,EADR,mBAqBM,OArBN,YAqBM,CAlBJ,YAiBqB,4BAAA,eAAA,mBAjBOD,KAAAA,OAAM,CAAA,EAAA;4BAe1B,CAdN,mBAcM,OAdN,YAcM,CAZJ,WAUO,KAAA,QAAA,QAAA,EAAA,QAAA,CATL,YAQsB,6BAAA;MAPpB,IAAG;MACH,OAAM;MACL,SAAO;;MACG,MAAI,cACgD,CAA7D,YAA6D,MAAA,oBAAA,EAAA,EAAxC,OAAM,iCAA+B,CAAA,CAAA,CAAA;6BAEzB,CAAnC,WAAmC,KAAA,QAAA,cAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAX,QAAI,GAAA,EAAA,CAAA,CAAA,CAAA;;WAGhC,YAAmC,6BAAA,EAAd,OAAM,OAAK,CAAA,CAAA,CAAA,EAElC,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarPlayground.vue.d.ts

@@ -12,6 +12,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @default 20 (px)
      */
     indent?: number;
+    /**
+     * Overrides --scalar-sidebar-padding
+     * @default 12 (px)
+     */
+    padding?: number;
+    /**
+     * Overrides --scalar-sidebar-width
+     * @default 288 (px)
+     */
+    width?: number;
     /**
      * Sets --scalar-sidebar-background-1
      * @default var(--scalar-background-1)
@@ -92,6 +102,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @default 20 (px)
      */
     indent?: number;
+    /**
+     * Overrides --scalar-sidebar-padding
+     * @default 12 (px)
+     */
+    padding?: number;
+    /**
+     * Overrides --scalar-sidebar-width
+     * @default 288 (px)
+     */
+    width?: number;
     /**
      * Sets --scalar-sidebar-background-1
      * @default var(--scalar-background-1)

package/dist/components/ScalarSidebar/ScalarSidebarPlayground.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"AAiJA;;;;;GAKG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;aACM,MAAM;IACf;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;IAlFjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;aA0IN,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUxC,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":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"AAgKA;;;;;GAKG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;IA5FjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;aAmJN,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUxC,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/ScalarWrappingText/ScalarWrappingText.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,0TAyDd,CAAC"}
+{"version":3,"file":"ScalarWrappingText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,0TA2Dd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr />{{ word }}\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarWrappingText.vue.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,7 @@
 import { PRESETS } from "./constants.js";
-import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/ScalarWrappingText/ScalarWrappingText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
 var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarWrappingText",
@@ -21,7 +23,7 @@ var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		});
 		return (_ctx, _cache) => {
 			return openBlock(true), createElementBlock(Fragment, null, renderList(words.value, (word, i) => {
-				return openBlock(), createElementBlock(Fragment, { key: i }, [_cache[0] || (_cache[0] = createElementVNode("wbr", null, null, -1)), createTextVNode(toDisplayString(word), 1)], 64);
+				return openBlock(), createElementBlock(Fragment, { key: i }, [i !== 0 ? (openBlock(), createElementBlock("wbr", _hoisted_1)) : createCommentVNode("", true), createTextVNode(toDisplayString(word), 1)], 64);
 			}), 128);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.script.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr />{{ word }}\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,IAAG;AAI1D,UAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAG,CAEpC,MAAM,KAAK,CAAC,OAAO,QAAO;IACzC;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,GAAC,EAAA,CAAA,OAAA,OAAA,OAAA,KACP,mBAAO,OAAA,MAAA,MAAA,GAAA,GAAA,gBAAA,gBAAG,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarWrappingText.vue.script.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,IAAG;AAI1D,UAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAG,CAEpC,MAAM,KAAK,CAAC,OAAO,QAAO;IACzC;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,GAAC,EAAA,CACI,MAAC,KAAA,WAAA,EAAZ,mBAAsB,OAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAAA,gBAAA,gBAAG,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/style.css

@@ -1098,6 +1098,20 @@ img,
   display: flex;
 }
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+.animate-sidebar-border-bottom {
+  animation: forwards border-bottom;
+  animation-timeline: scroll();
+  animation-range-end: 1px;
+}
+@keyframes border-bottom {
+from {
+    border-bottom-width: 0;
+}
+to {
+    border-bottom-width: var(--scalar-border-width);
+}
+}
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 .group\/sidebar-section:first-of-type > .group\/spacer-before, .group\/sidebar-section:last-of-type > .group\/spacer-after {
   height: 0;
 }
@@ -1405,6 +1419,7 @@ img,
     --scalar-text-decoration-hover: underline;
     --scalar-link-font-weight: inherit;
     --scalar-sidebar-indent: 20px;
+    --scalar-sidebar-padding: 12px;
   }
 
   .dark-mode {
@@ -1837,6 +1852,10 @@ img,
   }
 }
 
+:where(.scalar-app) [class*="rotate-"], :where(.scalar-app) [class*="translate-"], :where(.scalar-app) [class*="scale-"] {
+  transform: none;
+}
+
 .scalar-app .pointer-events-none {
   pointer-events: none;
 }
@@ -1930,6 +1949,10 @@ img,
   top: var(--nested-items-offset) !important;
 }
 
+.scalar-app .top-\(--scalar-sidebar-sticky-offset\,0\) {
+  top: var(--scalar-sidebar-sticky-offset, 0);
+}
+
 .scalar-app .top-0 {
   top: 0;
 }
@@ -2115,6 +2138,10 @@ img,
   margin: 0 !important;
 }
 
+.scalar-app .-m-\(--scalar-sidebar-padding\) {
+  margin: calc(var(--scalar-sidebar-padding) * -1);
+}
+
 .scalar-app .-m-0\.5 {
   margin: -2px;
 }
@@ -2478,6 +2505,10 @@ img,
   min-height: 48px;
 }
 
+.scalar-app .w-\(--scalar-sidebar-width\) {
+  width: var(--scalar-sidebar-width);
+}
+
 .scalar-app .w-3 {
   width: 12px;
 }
@@ -3022,6 +3053,10 @@ img,
   border-color: var(--scalar-sidebar-search-border-color, var(--scalar-border-color));
 }
 
+.scalar-app .border-b-sidebar-border {
+  border-bottom-color: var(--scalar-sidebar-border-color, var(--scalar-border-color));
+}
+
 .scalar-app .bg-\(--bg-light\) {
   background-color: var(--bg-light);
 }
@@ -3179,6 +3214,10 @@ img,
   mask-repeat: repeat;
 }
 
+.scalar-app .p-\(--scalar-sidebar-padding\) {
+  padding: var(--scalar-sidebar-padding);
+}
+
 .scalar-app .p-0 {
   padding: 0;
 }
@@ -3842,12 +3881,12 @@ img,
   font-family: inherit;
 }
 
-.scalar-app .first\:rounded-t-\[inherit\]:first-child, :is(.scalar-app .\*\:first\:rounded-t-\[inherit\] > *):first-child {
+.scalar-app .first\:rounded-t-\[inherit\]:first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
 
-.scalar-app .last\:rounded-b-\[inherit\]:last-child, :is(.scalar-app .\*\:last\:rounded-b-\[inherit\] > *):last-child {
+.scalar-app .last\:rounded-b-\[inherit\]:last-child {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.21.3",
+  "version": "0.21.4",
   "engines": {
     "node": ">=22"
   },
@@ -39,11 +39,11 @@
     "radix-vue": "^1.9.17",
     "vue": "^3.5.30",
     "vue-component-type-helpers": "^3.2.2",
-    "@scalar/code-highlight": "0.3.2",
+    "@scalar/helpers": "0.4.3",
     "@scalar/icons": "0.7.2",
-    "@scalar/themes": "0.15.2",
+    "@scalar/code-highlight": "0.3.2",
     "@scalar/use-hooks": "0.4.2",
-    "@scalar/helpers": "0.4.3"
+    "@scalar/themes": "0.15.3"
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.2",