@scalar/components 0.32.1 → 0.33.1

package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue.js

@@ -1,8 +1,8 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarSidebarIndent_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarIndent.vue.script.js";
-/* empty css                                  */
+import ScalarSidebarIndent_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarIndent.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                        */
 //#region src/components/ScalarSidebar/ScalarSidebarIndent.vue
-var ScalarSidebarIndent_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarSidebarIndent_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3e080c68"]]);
+var ScalarSidebarIndent_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarSidebarIndent_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b2388a0c"]]);
 //#endregion
 export { ScalarSidebarIndent_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarIndent.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarIndent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Indent component\n *\n * @example\n *   <ScalarSidebarIndent :indent=\"1\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0, selected = false } = defineProps<{\n  /** The number of indents to render @default 0 */\n  indent?: SidebarGroupLevel\n  /** Whether the indent is selected @default false */\n  selected?: boolean\n  /** Whether the indent hover is disabled @default false */\n  disabled?: boolean\n}>()\n\nconst indents = computed<number[]>(() => {\n  return Array.from({ length: indent }, (_, i) => i)\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx('scalar-sidebar-indent flex justify-center', {\n        'mr-[calc(20px-var(--scalar-sidebar-indent))]': indent > 0,\n        'scalar-sidebar-indent-selected': selected,\n      })\n    \">\n    <div\n      v-for=\"(block, index) in indents\"\n      :key=\"block\"\n      class=\"relative w-[var(--scalar-sidebar-indent)]\">\n      <!-- Indent Border -->\n      <div\n        class=\"scalar-sidebar-indent-border absolute left-2 inset-y-0 w-border bg-sidebar-indent-border\" />\n      <!-- Indent Border Active or Hover -->\n      <div\n        v-if=\"index === indents.length - 1\"\n        class=\"absolute left-2 inset-y-0 w-border\"\n        :class=\"\n          disabled\n            ? ''\n            : selected\n              ? 'bg-sidebar-indent-border-active'\n              : 'group-hover/button:bg-sidebar-indent-border-hover'\n        \" />\n    </div>\n  </div>\n</template>\n<style scoped>\n@reference \"../../style.css\";\n\n/* Add extra height to the indent border to account for the px spacing between the items */\n.group\\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border {\n  @apply -inset-y-px;\n}\n\n/* Push the border down for the first item in a group */\n.group\\/item:first-child\n  > *\n  > .scalar-sidebar-indent\n  .scalar-sidebar-indent-border {\n  @apply top-0;\n}\n\n/* Push the border up for the last item in a group */\n.group\\/item:last-child\n  > *\n  > .scalar-sidebar-indent\n  .scalar-sidebar-indent-border {\n  @apply bottom-0;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarIndent.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarIndent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Indent component\n *\n * @example\n *   <ScalarSidebarIndent :indent=\"1\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0, selected = false } = defineProps<{\n  /** The number of indents to render @default 0 */\n  indent?: SidebarGroupLevel\n  /** Whether the indent is selected @default false */\n  selected?: boolean\n  /** Whether the indent hover is disabled @default false */\n  disabled?: boolean\n}>()\n\nconst indents = computed<number[]>(() => {\n  return Array.from({ length: indent }, (_, i) => i)\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx('scalar-sidebar-indent flex justify-center', {\n        'mr-[calc(20px-var(--scalar-sidebar-indent))]': indent > 0,\n        'scalar-sidebar-indent-selected': selected,\n      })\n    \">\n    <div\n      v-for=\"(block, index) in indents\"\n      :key=\"block\"\n      class=\"relative w-[var(--scalar-sidebar-indent)]\">\n      <!-- Indent Border -->\n      <div\n        class=\"scalar-sidebar-indent-border w-border bg-sidebar-indent-border absolute inset-y-0 left-2\" />\n      <!-- Indent Border Active or Hover -->\n      <div\n        v-if=\"index === indents.length - 1\"\n        class=\"w-border absolute inset-y-0 left-2\"\n        :class=\"\n          disabled\n            ? ''\n            : selected\n              ? 'bg-sidebar-indent-border-active'\n              : 'group-hover/button:bg-sidebar-indent-border-hover'\n        \" />\n    </div>\n  </div>\n</template>\n<style scoped>\n@reference \"../../style.css\";\n\n/* Add extra height to the indent border to account for the px spacing between the items */\n.group\\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border {\n  @apply -inset-y-px;\n}\n\n/* Push the border down for the first item in a group */\n.group\\/item:first-child\n  > *\n  > .scalar-sidebar-indent\n  .scalar-sidebar-indent-border {\n  @apply top-0;\n}\n\n/* Push the border up for the last item in a group */\n.group\\/item:last-child\n  > *\n  > .scalar-sidebar-indent\n  .scalar-sidebar-indent-border {\n  @apply bottom-0;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderList, unref } from "vue";
+var ScalarSidebarIndent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarIndent",
+	props: {
+		indent: { default: 0 },
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		disabled: { type: Boolean }
+	},
+	setup(__props) {
+		const indents = computed(() => {
+			return Array.from({ length: __props.indent }, (_, i) => i);
+		});
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-sidebar-indent flex justify-center", {
+				"mr-[calc(20px-var(--scalar-sidebar-indent))]": __props.indent > 0,
+				"scalar-sidebar-indent-selected": __props.selected
+			}))), [(openBlock(true), createElementBlock(Fragment, null, renderList(indents.value, (block, index) => {
+				return openBlock(), createElementBlock("div", {
+					key: block,
+					class: "relative w-[var(--scalar-sidebar-indent)]"
+				}, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "scalar-sidebar-indent-border w-border bg-sidebar-indent-border absolute inset-y-0 left-2" }, null, -1)), index === indents.value.length - 1 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["w-border absolute inset-y-0 left-2", __props.disabled ? "" : __props.selected ? "bg-sidebar-indent-border-active" : "group-hover/button:bg-sidebar-indent-border-hover"])
+				}, null, 2)) : createCommentVNode("", true)]);
+			}), 128))], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarIndent_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarIndent.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarIndent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_Fragment","_renderList","_createElementVNode","_normalizeClass","_createCommentVNode"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarIndent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Indent component\n *\n * @example\n *   <ScalarSidebarIndent :indent=\"1\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport type { SidebarGroupLevel } from './useSidebarGroups'\n\nconst { indent = 0, selected = false } = defineProps<{\n  /** The number of indents to render @default 0 */\n  indent?: SidebarGroupLevel\n  /** Whether the indent is selected @default false */\n  selected?: boolean\n  /** Whether the indent hover is disabled @default false */\n  disabled?: boolean\n}>()\n\nconst indents = computed<number[]>(() => {\n  return Array.from({ length: indent }, (_, i) => i)\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx('scalar-sidebar-indent flex justify-center', {\n        'mr-[calc(20px-var(--scalar-sidebar-indent))]': indent > 0,\n        'scalar-sidebar-indent-selected': selected,\n      })\n    \">\n    <div\n      v-for=\"(block, index) in indents\"\n      :key=\"block\"\n      class=\"relative w-[var(--scalar-sidebar-indent)]\">\n      <!-- Indent Border -->\n      <div\n        class=\"scalar-sidebar-indent-border w-border bg-sidebar-indent-border absolute inset-y-0 left-2\" />\n      <!-- Indent Border Active or Hover -->\n      <div\n        v-if=\"index === indents.length - 1\"\n        class=\"w-border absolute inset-y-0 left-2\"\n        :class=\"\n          disabled\n            ? ''\n            : selected\n              ? 'bg-sidebar-indent-border-active'\n              : 'group-hover/button:bg-sidebar-indent-border-hover'\n        \" />\n    </div>\n  </div>\n</template>\n<style scoped>\n@reference \"../../style.css\";\n\n/* Add extra height to the indent border to account for the px spacing between the items */\n.group\\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border {\n  @apply -inset-y-px;\n}\n\n/* Push the border down for the first item in a group */\n.group\\/item:first-child\n  > *\n  > .scalar-sidebar-indent\n  .scalar-sidebar-indent-border {\n  @apply top-0;\n}\n\n/* Push the border up for the last item in a group */\n.group\\/item:last-child\n  > *\n  > .scalar-sidebar-indent\n  .scalar-sidebar-indent-border {\n  @apply bottom-0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAwBA,MAAM,UAAU,eAAyB;GACvC,OAAO,MAAM,KAAK,EAAE,QAAQ,QAAA,OAAO,IAAI,GAAG,MAAM,CAAC;EACnD,CAAC;EAGD,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBA0BM,OAAAC,eAAAC,mBAzBWC,MAAA,EAAA,CAAE,CAAA,6CAAA;IAAwG,gDAAA,QAAA,SAAM;IAAgD,kCAAA,QAAA;G,QAM/KJ,UAAA,IAAA,GAAAC,mBAkBMI,UAAA,MAAAC,WAjBqB,QAAA,QAAjB,OAAO,UAAK;IADtB,OAAAN,UAAA,GAAAC,mBAkBM,OAAA;KAhBH,KAAK;KACN,OAAM;I,IAEN,OAAA,OAAA,OAAA,KAAAM,mBACqG,OAAA,EAAnG,OAAM,2FAA0F,GAAA,MAAA,EAAA,IAG1F,UAAU,QAAA,MAAQ,SAAM,KADhCP,UAAA,GAAAC,mBASM,OAAA;;KAPJ,OAAKO,eAAA,CAAC,sCACa,QAAA,W,KAAwC,QAAA,W"}

package/dist/components/ScalarSidebar/ScalarSidebarItem.vue.js

@@ -1,4 +1,4 @@
-import ScalarSidebarItem_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarItem.vue.script.js";
+import ScalarSidebarItem_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarItem.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSidebar/ScalarSidebarItem.vue
 var ScalarSidebarItem_default = ScalarSidebarItem_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarItem.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Item component\n *\n * Provides a ScalarSidebarButton wrapped in an `<li>` to\n * meet accessibility requirements and automatically indents\n * the button based on the level of the sidebar group\n *\n * @example\n * <ScalarSidebarItem>\n *   <template #icon>\n *     <!-- Overrides the icon slot -->\n *   </template>\n *   <!-- Button text -->\n *   <template #aside>\n *     <!-- After the button text -->\n *   </template>\n *   <!-- Content to display before the button but inside the list item -->\n *   <template #before>\n *     <!-- Before the button -->\n *   </template>\n *   <!-- Content to display after the button but inside the list item -->\n *   <template #after>\n *     <!-- After the button -->\n *   </template>\n * </ScalarSidebarItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport type { ScalarSidebarItemProps, ScalarSidebarItemSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst props = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarItemSlots>()\n\nconst { level } = useSidebarGroups()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <li v-bind=\"cx('group/item flex flex-col text-base')\">\n    <slot name=\"before\" />\n    <slot\n      :level=\"level\"\n      name=\"button\">\n      <ScalarSidebarButton\n        v-bind=\"props\"\n        :indent=\"indent ?? level\">\n        <!-- Pass through all the slots -->\n        <template\n          v-if=\"$slots.default\"\n          #default>\n          <slot />\n        </template>\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <template\n          v-if=\"$slots.aside\"\n          #aside>\n          <slot name=\"aside\" />\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <slot name=\"after\" />\n  </li>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarItem.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Item component\n *\n * Provides a ScalarSidebarButton wrapped in an `<li>` to\n * meet accessibility requirements and automatically indents\n * the button based on the level of the sidebar group\n *\n * @example\n * <ScalarSidebarItem>\n *   <template #icon>\n *     <!-- Overrides the icon slot -->\n *   </template>\n *   <!-- Button text -->\n *   <template #aside>\n *     <!-- After the button text -->\n *   </template>\n *   <!-- Content to display before the button but inside the list item -->\n *   <template #before>\n *     <!-- Before the button -->\n *   </template>\n *   <!-- Content to display after the button but inside the list item -->\n *   <template #after>\n *     <!-- After the button -->\n *   </template>\n * </ScalarSidebarItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport type { ScalarSidebarItemProps, ScalarSidebarItemSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst props = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarItemSlots>()\n\nconst { level } = useSidebarGroups()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <li v-bind=\"cx('group/item flex flex-col text-base')\">\n    <slot name=\"before\" />\n    <slot\n      :level=\"level\"\n      name=\"button\">\n      <ScalarSidebarButton\n        v-bind=\"props\"\n        :indent=\"indent ?? level\">\n        <!-- Pass through all the slots -->\n        <template\n          v-if=\"$slots.default\"\n          #default>\n          <slot />\n        </template>\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <template\n          v-if=\"$slots.aside\"\n          #aside>\n          <slot name=\"aside\" />\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <slot name=\"after\" />\n  </li>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
+import { useSidebarGroups } from "./useSidebarGroups.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+var ScalarSidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarItem",
+	props: {
+		is: {},
+		icon: { type: [Object, Function] },
+		active: { type: Boolean },
+		selected: { type: Boolean },
+		disabled: { type: Boolean },
+		indent: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { level } = useSidebarGroups();
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", normalizeProps(guardReactiveProps(unref(cx)("group/item flex flex-col text-base"))), [
+				renderSlot(_ctx.$slots, "before"),
+				renderSlot(_ctx.$slots, "button", { level: unref(level) }, () => [createVNode(ScalarSidebarButton_default, mergeProps(props, { indent: __props.indent ?? unref(level) }), createSlots({ _: 2 }, [
+					_ctx.$slots.default ? {
+						name: "default",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						key: "0"
+					} : void 0,
+					_ctx.$slots.icon ? {
+						name: "icon",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+						key: "1"
+					} : void 0,
+					_ctx.$slots.aside ? {
+						name: "aside",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "aside")]),
+						key: "2"
+					} : void 0
+				]), 1040, ["indent"])]),
+				renderSlot(_ctx.$slots, "after")
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarItem_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarItem.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_renderSlot","_createVNode","ScalarSidebarButton","_mergeProps","_createSlots","_withCtx"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarItem.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Item component\n *\n * Provides a ScalarSidebarButton wrapped in an `<li>` to\n * meet accessibility requirements and automatically indents\n * the button based on the level of the sidebar group\n *\n * @example\n * <ScalarSidebarItem>\n *   <template #icon>\n *     <!-- Overrides the icon slot -->\n *   </template>\n *   <!-- Button text -->\n *   <template #aside>\n *     <!-- After the button text -->\n *   </template>\n *   <!-- Content to display before the button but inside the list item -->\n *   <template #before>\n *     <!-- Before the button -->\n *   </template>\n *   <!-- Content to display after the button but inside the list item -->\n *   <template #after>\n *     <!-- After the button -->\n *   </template>\n * </ScalarSidebarItem>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport type { ScalarSidebarItemProps, ScalarSidebarItemSlots } from './types'\nimport { useSidebarGroups } from './useSidebarGroups'\n\nconst props = defineProps<ScalarSidebarItemProps>()\n\ndefineSlots<ScalarSidebarItemSlots>()\n\nconst { level } = useSidebarGroups()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n  <li v-bind=\"cx('group/item flex flex-col text-base')\">\n    <slot name=\"before\" />\n    <slot\n      :level=\"level\"\n      name=\"button\">\n      <ScalarSidebarButton\n        v-bind=\"props\"\n        :indent=\"indent ?? level\">\n        <!-- Pass through all the slots -->\n        <template\n          v-if=\"$slots.default\"\n          #default>\n          <slot />\n        </template>\n        <template\n          v-if=\"$slots.icon\"\n          #icon>\n          <slot name=\"icon\" />\n        </template>\n        <template\n          v-if=\"$slots.aside\"\n          #aside>\n          <slot name=\"aside\" />\n        </template>\n      </ScalarSidebarButton>\n    </slot>\n    <slot name=\"after\" />\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAId,MAAM,EAAE,UAAU,iBAAiB;EAEnC,MAAM,EAAE,OAAO,UAAU;;GAIvB,OAAAC,UAAA,GAAAC,mBA2BK,MAAAC,eAAAC,mBA3BOC,MAAA,EAAA,CAAE,CAAA,oCAAA,CAAA,CAAA,GAAA;IACZC,WAAsB,KAAA,QAAA,QAAA;IACtBA,WAuBO,KAAA,QAAA,UAAA,EAtBJ,OAAOD,MAAA,KAAA,EAAK,SAsBR,CApBLE,YAmBsBC,6BAnBtBC,WACU,OAAK,EACZ,QAAQ,QAAA,UAAUJ,MAAA,KAAA,E;KAGXL,KAAAA,OAAO,U;MACZ,MAAA;MACD,IAAAW,cAAQ,CAARL,WAAQ,KAAA,QAAA,SAAA,C;;;KAGFN,KAAAA,OAAO,O;MACZ,MAAA;MACD,IAAAW,cAAoB,CAApBL,WAAoB,KAAA,QAAA,MAAA,C;;;KAGdN,KAAAA,OAAO,Q;MACZ,MAAA;MACD,IAAAW,cAAqB,CAArBL,WAAqB,KAAA,QAAA,OAAA,C;;;;IAI3BA,WAAqB,KAAA,QAAA,OAAA"}

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

@@ -1,5 +1,5 @@
-import ScalarSidebarItems_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarItems.vue.script.js";
-/* empty css                                 */
+import ScalarSidebarItems_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarItems.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                       */
 //#region src/components/ScalarSidebar/ScalarSidebarItems.vue
 var ScalarSidebarItems_default = ScalarSidebarItems_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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-(--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":""}
+{"version":3,"file":"ScalarSidebarItems.vue.js","names":["_sfc_main"],"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_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { useSidebarNestedItems } from "./useSidebarNestedItems.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+var ScalarSidebarItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarItems",
+	props: { is: { default: "ul" } },
+	setup(__props) {
+		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-(--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);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarItems_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarItems.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarItems.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_renderSlot"],"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,sBAAsB;EAGvC,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,YASYC,wBARL,QAAA,EAAE,GAAAC,eAAAC,mBACQC,MAAA,EAAA,CAAE,C,4GAA8HA,MAAA,IAAA,IAAI,sBAAA,e;IAMnJ,SAAAC,cAAQ,CAARC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarSidebar/ScalarSidebarLoading.vue.js

@@ -1,5 +1,5 @@
-import ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarLoading.vue.script.js";
-/* empty css                                   */
+import ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarLoading.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                         */
 //#region src/components/ScalarSidebar/ScalarSidebarLoading.vue
 var ScalarSidebarLoading_default = ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarLoading.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Skeleton loading UI for the sidebar. Renders animated pulse bars inside\n * `ScalarSidebarItem` rows so spacing and hierarchy match real navigation while content loads.\n *\n * @example\n * ```vue\n * <ScalarSidebarLoading :items=\"6\" />\n * ```\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarSidebarItem from '@/components/ScalarSidebar/ScalarSidebarItem.vue'\n\nconst { items = 4 } = defineProps<{\n  /** The number of items to display */\n  items?: number\n}>()\n</script>\n<template>\n  <ScalarSidebarItem\n    v-for=\"idx in items\"\n    :key=\"idx\"\n    class=\"pointer-events-none\">\n    <div\n      class=\"group/button-loading bg-sidebar-c-2/15 rounded-lg animate-pulse h-lh w-full box-content py-px -my-px\" />\n  </ScalarSidebarItem>\n</template>\n<style>\n@reference \"../../style.css\";\n\n.group\\/item:last-of-type\n  > .group\\/button\n  > .group\\/button-label\n  > .group\\/button-loading {\n  @apply w-2/3;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarLoading.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Skeleton loading UI for the sidebar. Renders animated pulse bars inside\n * `ScalarSidebarItem` rows so spacing and hierarchy match real navigation while content loads.\n *\n * @example\n * ```vue\n * <ScalarSidebarLoading :items=\"6\" />\n * ```\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarSidebarItem from '@/components/ScalarSidebar/ScalarSidebarItem.vue'\n\nconst { items = 4 } = defineProps<{\n  /** The number of items to display */\n  items?: number\n}>()\n</script>\n<template>\n  <ScalarSidebarItem\n    v-for=\"idx in items\"\n    :key=\"idx\"\n    class=\"pointer-events-none\">\n    <div\n      class=\"group/button-loading bg-sidebar-c-2/15 -my-px box-content h-lh w-full animate-pulse rounded-lg py-px\" />\n  </ScalarSidebarItem>\n</template>\n<style>\n@reference \"../../style.css\";\n\n.group\\/item:last-of-type\n  > .group\\/button\n  > .group\\/button-label\n  > .group\\/button-loading {\n  @apply w-2/3;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarLoading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,23 @@
+import ScalarSidebarItem_default from "./ScalarSidebarItem.vue.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, withCtx } from "vue";
+var ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarSidebarLoading",
+	props: { items: { default: 4 } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (idx) => {
+				return openBlock(), createBlock(ScalarSidebarItem_default, {
+					key: idx,
+					class: "pointer-events-none"
+				}, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "group/button-loading bg-sidebar-c-2/15 -my-px box-content h-lh w-full animate-pulse rounded-lg py-px" }, null, -1)])]),
+					_: 1
+				});
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarLoading_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarLoading.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarLoading.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarLoading.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","ScalarSidebarItem","_withCtx","_createElementVNode"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarLoading.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Skeleton loading UI for the sidebar. Renders animated pulse bars inside\n * `ScalarSidebarItem` rows so spacing and hierarchy match real navigation while content loads.\n *\n * @example\n * ```vue\n * <ScalarSidebarLoading :items=\"6\" />\n * ```\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport ScalarSidebarItem from '@/components/ScalarSidebar/ScalarSidebarItem.vue'\n\nconst { items = 4 } = defineProps<{\n  /** The number of items to display */\n  items?: number\n}>()\n</script>\n<template>\n  <ScalarSidebarItem\n    v-for=\"idx in items\"\n    :key=\"idx\"\n    class=\"pointer-events-none\">\n    <div\n      class=\"group/button-loading bg-sidebar-c-2/15 -my-px box-content h-lh w-full animate-pulse rounded-lg py-px\" />\n  </ScalarSidebarItem>\n</template>\n<style>\n@reference \"../../style.css\";\n\n.group\\/item:last-of-type\n  > .group\\/button\n  > .group\\/button-label\n  > .group\\/button-loading {\n  @apply w-2/3;\n}\n</style>\n"],"mappings":";;;;;;;GAqBE,OAAAA,UAAA,IAAA,GAAAC,mBAMoBC,UAAA,MAAAC,WALJ,QAAA,QAAP,QAAG;IADZ,OAAAH,UAAA,GAAAI,YAMoBC,2BAAA;KAJjB,KAAK;KACN,OAAM;;KACN,SAAAC,cACiH,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADjHC,mBACiH,OAAA,EAA/G,OAAM,uGAAsG,GAAA,MAAA,EAAA,C"}

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

@@ -1,5 +1,5 @@
-import ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarNestedItems.vue.script.js";
-/* empty css                                       */
+import ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarNestedItems.vue_vue_type_script_setup_true_lang.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 ScalarSidebarLoading from './ScalarSidebarLoading.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.value)\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) pt-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) px-(--scalar-sidebar-padding) -mx-(--scalar-sidebar-padding) 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          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            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":""}
+{"version":3,"file":"ScalarSidebarNestedItems.vue.js","names":["_sfc_main"],"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 { findScrollContainer } from './findScrollContainer'\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\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.value)\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=\"text-sidebar-c-2 size-4\" />\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=\"bg-sidebar-b-1 animate-sidebar-border-bottom border-b-sidebar-border sticky top-(--scalar-sidebar-sticky-offset,0) z-1 -mx-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) flex flex-col gap-px px-(--scalar-sidebar-padding) pt-(--scalar-sidebar-padding)\">\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=\"text-sidebar-c-2 -m-px size-4\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            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_vue_type_script_setup_true_lang.js

@@ -0,0 +1,125 @@
+import ScalarSidebarButton_default from "./ScalarSidebarButton.vue.js";
+import { useSidebarGroups } from "./useSidebarGroups.js";
+import ScalarSidebarLoading_default from "./ScalarSidebarLoading.vue.js";
+import { useSidebarNestedItem } from "./useSidebarNestedItems.js";
+import ScalarSidebarItems_default from "./ScalarSidebarItems.vue.js";
+import { findScrollContainer } from "./findScrollContainer.js";
+import ScalarSidebarSpacer_default from "./ScalarSidebarSpacer.vue.js";
+import { Transition, createBlock, 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: "bg-sidebar-b-1 animate-sidebar-border-bottom border-b-sidebar-border sticky top-(--scalar-sidebar-sticky-offset,0) z-1 -mx-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) flex flex-col gap-px px-(--scalar-sidebar-padding) pt-(--scalar-sidebar-padding)" };
+var ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarNestedItems",
+	props: /*@__PURE__*/ mergeModels({
+		is: {},
+		icon: { type: [Object, Function] },
+		active: { type: Boolean },
+		selected: { type: Boolean },
+		disabled: { type: Boolean },
+		indent: {},
+		controlled: { type: Boolean },
+		discrete: { type: Boolean },
+		loading: { type: Boolean }
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["click", "back"], ["update:open"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const open = useModel(__props, "open");
+		useSidebarNestedItem(() => open.value);
+		const { level } = useSidebarGroups({ reset: true });
+		/** The root element ref */
+		const el = useTemplateRef("el");
+		/** How far down to offset the nested items by when animating them in */
+		const offset = ref(0);
+		function onOpen() {
+			offset.value = findScrollContainer(el.value).scrollTop ?? 0;
+			nextTick(() => el.value?.querySelector("button:not([aria-expanded=\"true\"])")?.focus({ preventScroll: true }));
+		}
+		function onOpened() {
+			/** Reset the scroll position of the scroll container after opening */
+			findScrollContainer(el.value).scrollTop = 0;
+		}
+		function onClose() {
+			nextTick(() => {
+				el.value?.querySelector("button")?.focus({ preventScroll: true });
+				findScrollContainer(el.value).scrollTop = offset.value;
+			});
+		}
+		/** Handle the click event for the nested items button */
+		const handleClick = (event) => {
+			emit("click", event);
+			if (!__props.controlled) open.value = true;
+		};
+		/** Handle the back button click event */
+		const handleBack = (event) => {
+			emit("back", event);
+			if (!__props.controlled) open.value = false;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				ref_key: "el",
+				ref: el,
+				class: normalizeClass(["group/item group/nested-items contents", { "group/nested-items-open": open.value }]),
+				style: normalizeStyle({ "--nested-items-offset": `${offset.value}px` })
+			}, [renderSlot(_ctx.$slots, "button", {}, () => [createVNode(ScalarSidebarButton_default, mergeProps({
+				is: "button",
+				"aria-expanded": open.value,
+				disabled: __props.disabled,
+				icon: __props.icon,
+				indent: unref(level),
+				selected: __props.selected
+			}, _ctx.$attrs, { onClick: handleClick }), createSlots({
+				aside: withCtx(() => [renderSlot(_ctx.$slots, "aside", {}, () => [createVNode(unref(ScalarIconArrowRight), { class: "text-sidebar-c-2 size-4" })])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 2
+			}, [_ctx.$slots.icon ? {
+				name: "icon",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+				key: "0"
+			} : void 0]), 1040, [
+				"aria-expanded",
+				"disabled",
+				"icon",
+				"indent",
+				"selected"
+			])]), createVNode(Transition, {
+				duration: 300,
+				enterActiveClass: "top-(--nested-items-offset)!",
+				leaveActiveClass: "top-(--nested-items-offset)!",
+				onAfterEnter: onOpened,
+				onEnter: onOpen,
+				onLeave: onClose
+			}, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(ScalarSidebarItems_default, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+					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: "text-sidebar-c-2 -m-px size-4" })]),
+						default: withCtx(() => [renderSlot(_ctx.$slots, "back-label", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Back", -1))])]),
+						_: 3
+					})]), createVNode(ScalarSidebarSpacer_default, { class: "h-3" })]), __props.loading ? (openBlock(), createBlock(ScalarSidebarLoading_default, { key: 0 })) : renderSlot(_ctx.$slots, "items", {}, void 0, void 0, 1)]),
+					_: 3
+				}, 16)])) : createCommentVNode("", true)]),
+				_: 3
+			})], 6);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarNestedItems_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarNestedItems.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarNestedItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_createVNode","ScalarSidebarButton","_mergeProps","_unref","_createSlots","_withCtx","_Transition","ScalarSidebarItems","_normalizeProps","_guardReactiveProps","_createElementVNode","_createTextVNode","ScalarSidebarSpacer","_createBlock","ScalarSidebarLoading","_createCommentVNode"],"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 { findScrollContainer } from './findScrollContainer'\nimport ScalarSidebarButton from './ScalarSidebarButton.vue'\nimport ScalarSidebarItems from './ScalarSidebarItems.vue'\nimport ScalarSidebarLoading from './ScalarSidebarLoading.vue'\nimport ScalarSidebarSpacer from './ScalarSidebarSpacer.vue'\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.value)\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=\"text-sidebar-c-2 size-4\" />\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=\"bg-sidebar-b-1 animate-sidebar-border-bottom border-b-sidebar-border sticky top-(--scalar-sidebar-sticky-offset,0) z-1 -mx-(--scalar-sidebar-padding) -mt-(--scalar-sidebar-padding) flex flex-col gap-px px-(--scalar-sidebar-padding) pt-(--scalar-sidebar-padding)\">\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=\"text-sidebar-c-2 -m-px size-4\" />\n                </template>\n                <slot name=\"back-label\">Back</slot>\n              </ScalarSidebarButton>\n            </slot>\n            <ScalarSidebarSpacer class=\"h-3\" />\n          </div>\n          <ScalarSidebarLoading v-if=\"loading\" />\n          <slot\n            v-else\n            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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,OAAO;EAOb,MAAM,OAAOE,SAAoB,SAAC,MAA0B;EAC5D,2BAA2B,KAAK,KAAK;EAmBrC,MAAM,EAAE,UAAU,iBAAiB,EAAE,OAAO,KAAK,CAAC;;EAGlD,MAAM,KAAK,eAAe,IAAI;;EAG9B,MAAM,SAAS,IAAI,CAAC;EAIpB,SAAS,SAAS;GAIhB,OAAO,QAAQ,oBAAoB,GAAG,KAAK,CAAC,CAAC,aAAa;GAG1D,eACE,GAAG,OACC,cAAiC,sCAAoC,CAAA,EACrE,MAAM,EAAE,eAAe,KAAK,CAAC,CACnC;EACF;EACA,SAAS,WAAW;;GAElB,oBAAoB,GAAG,KAAK,CAAC,CAAC,YAAY;EAC5C;EACA,SAAS,UAAU;GACjB,eAAe;IACb,GAAG,OAAO,cAAc,QAAQ,CAAC,EAAE,MAAM,EAAE,eAAe,KAAK,CAAC;IAChE,oBAAoB,GAAG,KAAK,CAAC,CAAC,YAAY,OAAO;GACnD,CAAC;EACH;;EAKA,MAAM,eAAe,UAAsB;GAEzC,KAAK,SAAS,KAAK;GACnB,IAAI,CAAC,QAAA,YAEH,KAAK,QAAQ;EAEjB;;EAGA,MAAM,cAAc,UAAsB;GAExC,KAAK,QAAQ,KAAK;GAClB,IAAI,CAAC,QAAA,YAEH,KAAK,QAAQ;EAEjB;;GAGE,OAAAC,UAAA,GAAAC,mBA8DK,MAAA;IA7DC,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,0CAAwC,EAAA,2BACT,KAAA,MAAI,CAAA,CAAA;IACxC,OAAKC,eAAA,EAAA,yBAAA,GAAgC,OAAA,MAAM,IAAA,CAAA;G,IAC5CC,WAsBO,KAAA,QAAA,UAAA,CAAA,SAAA,CArBLC,YAoBsBC,6BApBtBC,WAoBsB;IAnBpB,IAAG;IACF,iBAAe,KAAA;IACf,UAAA,QAAA;IACA,MAAA,QAAA;IACA,QAAQC,MAAA,KAAA;IACR,UAAA,QAAA;GACOX,GAAAA,KAAAA,QAAM,EACb,SAAO,YAAW,CAAA,GAAAY,YAAA;IAOR,OAAKC,cAGP,CAFPN,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CADLC,YAAwDG,MAAA,oBAAA,GAAA,EAAlC,OAAM,0BAAyB,CAAA,C;IAHzD,SAAAE,cAAQ,CAARN,WAAQ,KAAA,QAAA,SAAA,C;;G,IAJAN,KAAAA,OAAO,O;IACZ,MAAA;IACD,IAAAY,cAAoB,CAApBN,WAAoB,KAAA,QAAA,MAAA,C;;;;;;;;G,MAW1BC,YAgCaM,YAAA;IA/BV,UAAU;IACX,kBAAiB;IACjB,kBAAiB;IAChB,cAAY;IACZ,SAAO;IACP,SAAO;;IACR,SAAAD,cAwBM,CAvBE,KAAA,SADRV,UAAA,GAAAC,mBAwBM,OAxBN,YAwBM,CArBJI,YAoBqBO,4BAAAC,eAAAC,mBApBOjB,KAAAA,MAAM,CAAA,GAAA;KAChC,SAAAa,cAcM,CAdNK,mBAcM,OAdN,YAcM,CAZJX,WAUO,KAAA,QAAA,QAAA,CAAA,SAAA,CATLC,YAQsBC,6BAAA;MAPpB,IAAG;MACH,OAAM;MACL,SAAO;;MACG,MAAII,cACgD,CAA7DL,YAA6DG,MAAA,mBAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,C;MAE5D,SAAAE,cAAmC,CAAnCN,WAAmC,KAAA,QAAA,cAAA,CAAA,SAAA,CAAX,OAAA,OAAA,OAAA,KAAAY,gBAAA,QAAI,EAAA,E;;K,MAGhCX,YAAmCY,6BAAA,EAAd,OAAM,MAAK,CAAA,C,IAEN,QAAA,WAA5BjB,UAAA,GAAAkB,YAAuCC,8BAAA,EAAA,KAAA,EAAA,CAAA,KACvCf,WAEiB,KAAA,QAAA,SAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.js

@@ -1,4 +1,4 @@
-import ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSearchButton.vue.script.js";
+import ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSearchButton.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSidebar/ScalarSidebarSearchButton.vue
 var ScalarSidebarSearchButton_default = ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n  shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- role=\"search\" is a landmark for a search region, not a button control -->\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass\n      aria-hidden=\"true\"\n      class=\"size-4\" />\n    <span class=\"flex-1 text-start leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n      <span class=\"sr-only\">{{ shortcutLabel }}</span>\n      <kbd dir=\"ltr\">\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n  shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- role=\"search\" is a landmark for a search region, not a button control -->\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass\n      aria-hidden=\"true\"\n      class=\"size-4\" />\n    <span class=\"flex-1 text-start leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase\">\n      <span class=\"sr-only\">{{ shortcutLabel }}</span>\n      <kbd dir=\"ltr\">\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { ScalarIconMagnifyingGlass } from "@scalar/icons";
+//#region src/components/ScalarSidebar/ScalarSidebarSearchButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex-1 text-start leading-none" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase"
+};
+var _hoisted_3 = { class: "sr-only" };
+var _hoisted_4 = { dir: "ltr" };
+var ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarSidebarSearchButton",
+	props: { shortcutLabel: { default: "Keyboard Shortcut:" } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({ type: "button" }, unref(cx)("flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1", "bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search")), [
+				createVNode(unref(ScalarIconMagnifyingGlass), {
+					"aria-hidden": "true",
+					class: "size-4"
+				}),
+				createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Search...", -1))])]),
+				_ctx.$slots.shortcut ? (openBlock(), createElementBlock("span", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(__props.shortcutLabel), 1), createElementVNode("kbd", _hoisted_4, [renderSlot(_ctx.$slots, "shortcut")])])) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarSidebarSearchButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarSidebarSearchButton.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n  shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <!-- role=\"search\" is a landmark for a search region, not a button control -->\n  <button\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass\n      aria-hidden=\"true\"\n      class=\"size-4\" />\n    <span class=\"flex-1 text-start leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase\">\n      <span class=\"sr-only\">{{ shortcutLabel }}</span>\n      <kbd dir=\"ltr\">\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,UAAU;;GAIvB,OAAAC,UAAA,GAAAC,mBAsBS,UAtBTC,WAsBS,EArBP,MAAK,SAAQ,GACEC,MAAA,EAAA,CAAE,C;IAMjBC,YAEmBD,MAAA,yBAAA,GAAA;KADjB,eAAY;KACZ,OAAM;;IACRE,mBAEO,QAFP,YAEO,CADLC,WAAsB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAhB,OAAA,OAAA,OAAA,KAAAC,gBAAA,aAAS,EAAA,E;IAGTR,KAAAA,OAAO,YADfC,UAAA,GAAAC,mBAOO,QAPP,YAOO,CAJLI,mBAAgD,QAAhD,YAAgDG,gBAAvB,QAAA,aAAa,GAAA,CAAA,GACtCH,mBAEM,OAFN,YAEM,CADJC,WAAwB,KAAA,QAAA,UAAA,C"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"names":[],"mappings":"AAuFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;gBAEJ,OAAO;aACV,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;;gBA1BL,OAAO;aACV,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;kFAgIf,CAAC"}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"names":[],"mappings":"AAuFA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;gBAEJ,OAAO;aACV,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;;gBA1BL,OAAO;aACV,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;kFAgIf,CAAC"}

package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.js

@@ -1,4 +1,4 @@
-import ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSearchInput.vue.script.js";
+import ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default from "./ScalarSidebarSearchInput.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarSidebar/ScalarSidebarSearchInput.vue
 var ScalarSidebarSearchInput_default = ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      v-bind=\"otherAttrs\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"p-px size-4\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { ScalarLoading, type LoadingState } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n  autofocus?: boolean\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n        'bg-sidebar-b-search border-sidebar-border-search',\n        model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      v-bind=\"otherAttrs\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-3 self-center\"\n      :loader\n      size=\"md\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"size-4 p-px\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}