@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SDropdown/SDropdown.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,307 @@
+const require_types = require("../../composables/connectedPosition/types.cjs");
+const require_resolveElement = require("../../composables/connectedPosition/resolveElement.cjs");
+const require_useFloatingOverlay = require("../../composables/useFloatingOverlay.cjs");
+require("./SDropdown.types.cjs");
+const require_dropdownFocusables = require("./utils/dropdownFocusables.cjs");
+const require_useDropdownFocus = require("./utils/useDropdownFocus.cjs");
+const require_useDropdownPanelTransition = require("./utils/useDropdownPanelTransition.cjs");
+const require_useDropdownSheetMode = require("./utils/useDropdownSheetMode.cjs");
+const require_useDropdownTree = require("./utils/useDropdownTree.cjs");
+const require_resolveTriggerReference = require("./utils/resolveTriggerReference.cjs");
+const require_SDropdownSheet = require("./parts/SDropdownSheet.vue.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SDropdown/SDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id", "role"];
+var _hoisted_2 = ["data-placement"];
+var _hoisted_3 = { class: "s-ui-dropdown__content" };
+var SDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SDropdown",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		placement: { default: () => require_types.ESDropdownPlacement.BOTTOM_START },
+		offset: { default: 8 },
+		flip: {
+			type: Boolean,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		matchReferenceWidth: {
+			type: Boolean,
+			default: false
+		},
+		fitViewport: {
+			type: Boolean,
+			default: false
+		},
+		surfaceClass: {},
+		teleportTo: {
+			type: [String, Boolean],
+			default: "body"
+		},
+		dismissOnClickOutside: {
+			type: Boolean,
+			default: true
+		},
+		dismissOnEscape: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		reference: { default: null },
+		contentId: {},
+		viewportPadding: { default: 8 },
+		boundary: { default: () => require_types.ESDropdownBoundary.CLIPPING_ANCESTORS },
+		block: {
+			type: Boolean,
+			default: false
+		},
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		showOnHover: {
+			type: Boolean,
+			default: false
+		},
+		hoverLeaveDelay: { default: 100 },
+		sheet: {
+			type: Boolean,
+			default: true
+		},
+		sheetBreakpoint: { default: () => 768 },
+		sheetTitle: { default: "" },
+		menu: {
+			type: Boolean,
+			default: false
+		},
+		focusOnOpen: {
+			type: Boolean,
+			default: true
+		},
+		panelLabel: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const isSheetMode = require_useDropdownSheetMode.useDropdownSheetMode(() => __props.sheet, () => __props.sheetBreakpoint);
+		const { isPanelShown, isPanelActive, handlePanelAfterLeave } = require_useDropdownPanelTransition.useDropdownPanelTransition(modelValue);
+		const setOpen = (nextOpen) => {
+			modelValue.value = nextOpen;
+		};
+		const close = () => setOpen(false);
+		const handlePanelBeforeLeave = (element) => {
+			element.toggleAttribute("inert", true);
+		};
+		const slots = (0, vue.useSlots)();
+		const triggerWrapperRef = (0, vue.useTemplateRef)("triggerWrapperRef");
+		const panelRef = (0, vue.useTemplateRef)("panelRef");
+		const sheetRef = (0, vue.useTemplateRef)("sheetRef");
+		const { hasOpenChild, descendantElements } = require_useDropdownTree.useDropdownTree({
+			open: modelValue,
+			element: (0, vue.computed)(() => {
+				if (isSheetMode.value) return sheetRef.value?.overlayElement ?? null;
+				return panelRef.value;
+			})
+		});
+		const generatedContentId = (0, vue.useId)();
+		const generatedTriggerId = (0, vue.useId)();
+		const resolvedContentId = (0, vue.computed)(() => __props.contentId ?? generatedContentId);
+		const referenceElement = (0, vue.computed)(() => {
+			if (slots.trigger) return require_resolveTriggerReference.resolveTriggerReference(triggerWrapperRef.value);
+			return __props.reference;
+		});
+		const teleportEnabled = (0, vue.computed)(() => __props.teleportTo !== false);
+		const teleportTarget = (0, vue.computed)(() => {
+			if (__props.teleportTo === false) return "body";
+			return __props.teleportTo;
+		});
+		const sheetPlacement = require_types.ESDropdownPlacement.BOTTOM_START;
+		const show = () => {
+			if (__props.disabled) return;
+			setOpen(true);
+		};
+		const toggle = () => {
+			if (__props.disabled) return;
+			modelValue.value = !modelValue.value;
+		};
+		const triggerSlotProps = (0, vue.computed)(() => ({
+			id: generatedTriggerId,
+			"aria-expanded": modelValue.value,
+			"aria-haspopup": __props.menu ? "menu" : "dialog",
+			"aria-controls": resolvedContentId.value
+		}));
+		const { panelStyles, panelMaxHeight, resolvedPlacement, arrowStyles, isArrowOverflow, isPositionReady, updatePosition } = require_useFloatingOverlay.useFloatingOverlay({
+			open: () => isPanelActive.value && !isSheetMode.value,
+			onOpenChange: setOpen,
+			reference: () => referenceElement.value,
+			panel: () => panelRef.value,
+			placement: () => __props.placement,
+			offset: () => __props.offset,
+			flip: () => __props.flip,
+			shift: () => __props.shift,
+			matchReferenceWidth: () => __props.matchReferenceWidth,
+			fitViewport: () => __props.fitViewport,
+			dismissOnClickOutside: () => __props.dismissOnClickOutside,
+			dismissOnEscape: () => __props.dismissOnEscape,
+			viewportPadding: () => __props.viewportPadding,
+			arrow: () => __props.arrow,
+			boundary: () => __props.boundary,
+			clickOutsideIgnore: descendantElements,
+			hasOpenDescendant: hasOpenChild
+		});
+		const isHoverEnabled = (0, vue.computed)(() => __props.showOnHover && !isSheetMode.value);
+		const hoverReferenceTarget = (0, vue.computed)(() => isHoverEnabled.value ? require_resolveElement.resolveElement(referenceElement.value) : null);
+		const hoverPanelTarget = (0, vue.computed)(() => isHoverEnabled.value ? panelRef.value : null);
+		const isReferenceHovered = (0, _vueuse_core.useElementHover)(hoverReferenceTarget, { delayLeave: __props.hoverLeaveDelay });
+		const isPanelHovered = (0, _vueuse_core.useElementHover)(hoverPanelTarget, { delayLeave: __props.hoverLeaveDelay });
+		(0, vue.watch)([
+			isReferenceHovered,
+			isPanelHovered,
+			hasOpenChild,
+			isHoverEnabled,
+			() => __props.disabled
+		], () => {
+			if (!isHoverEnabled.value) return;
+			if (__props.disabled) {
+				setOpen(false);
+				return;
+			}
+			setOpen(isReferenceHovered.value || isPanelHovered.value || hasOpenChild.value);
+		});
+		const { handlePanelFocusIn, handlePanelKeydown, handleTriggerKeydown } = require_useDropdownFocus.useDropdownFocus({
+			open: modelValue,
+			enabled: () => !isSheetMode.value,
+			panel: panelRef,
+			panelReady: isPositionReady,
+			descendantElements,
+			trigger: () => slots.trigger ? triggerWrapperRef.value : require_resolveElement.resolveElement(__props.reference),
+			focusOnOpen: () => __props.focusOnOpen,
+			menu: () => __props.menu,
+			isOpenedByHover: () => isHoverEnabled.value && (isReferenceHovered.value || isPanelHovered.value),
+			show,
+			close
+		});
+		/**
+		* Имя панели (axe `aria-dialog-name`): явный `panelLabel`, иначе якорь — по его `id`
+		* (`triggerProps.id`), а без `id` — его `aria-label`.
+		*/
+		const panelNameAttrs = (0, vue.computed)(() => {
+			if (__props.panelLabel) return { "aria-label": __props.panelLabel };
+			const triggerElement = require_dropdownFocusables.findFocusTarget(slots.trigger ? triggerWrapperRef.value : require_resolveElement.resolveElement(referenceElement.value));
+			if (triggerElement?.id) return { "aria-labelledby": triggerElement.id };
+			return { "aria-label": triggerElement?.getAttribute("aria-label") ?? void 0 };
+		});
+		const isSurfaceViewportFit = (0, vue.computed)(() => Boolean(panelMaxHeight.value));
+		const surfaceStyles = (0, vue.computed)(() => {
+			if (!panelMaxHeight.value) return;
+			return { maxHeight: `${panelMaxHeight.value}px` };
+		});
+		(0, vue.watch)(() => __props.disabled, (isDisabled) => {
+			if (isDisabled && modelValue.value) modelValue.value = false;
+		});
+		__expose({
+			updatePosition,
+			show,
+			close,
+			toggle
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.unref)(slots).trigger ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({
+				key: 0,
+				ref_key: "triggerWrapperRef",
+				ref: triggerWrapperRef,
+				class: ["s-ui-dropdown", { "s-ui-dropdown--block": __props.block }]
+			}, _ctx.$attrs, { onKeydown: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(handleTriggerKeydown) && (0, vue.unref)(handleTriggerKeydown)(...args)) }), [(0, vue.renderSlot)(_ctx.$slots, "trigger", {
+				open: modelValue.value,
+				toggle,
+				close,
+				isSheet: (0, vue.unref)(isSheetMode),
+				triggerProps: triggerSlotProps.value
+			})], 16)) : (0, vue.createCommentVNode)("", true), ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+				to: teleportTarget.value,
+				disabled: !teleportEnabled.value
+			}, [(0, vue.unref)(isSheetMode) ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_SDropdownSheet.default, {
+				key: 0,
+				ref_key: "sheetRef",
+				ref: sheetRef,
+				open: modelValue.value,
+				title: __props.sheetTitle,
+				"dismiss-on-overlay-click": __props.dismissOnClickOutside,
+				"dismiss-on-escape": __props.dismissOnEscape,
+				"has-open-descendant": (0, vue.unref)(hasOpenChild),
+				"content-id": resolvedContentId.value,
+				onClose: close
+			}, {
+				"header-left": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "sheet-header-left", { close })]),
+				"header-right": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "sheet-header-right", { close })]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "content", {
+					resolvedPlacement: (0, vue.unref)(sheetPlacement),
+					isSheet: true,
+					close
+				})]),
+				_: 3
+			}, 8, [
+				"open",
+				"title",
+				"dismiss-on-overlay-click",
+				"dismiss-on-escape",
+				"has-open-descendant",
+				"content-id"
+			])) : ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
+				key: 1,
+				name: "s-ui-dropdown",
+				onBeforeLeave: handlePanelBeforeLeave,
+				onAfterLeave: (0, vue.unref)(handlePanelAfterLeave)
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.unref)(isPanelShown) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+					key: 0,
+					id: resolvedContentId.value,
+					ref_key: "panelRef",
+					ref: panelRef,
+					class: ["s-ui-dropdown__panel", {
+						"s-ui-dropdown__panel--match-reference-width": __props.matchReferenceWidth,
+						"s-ui-dropdown__panel--ready": (0, vue.unref)(isPositionReady)
+					}],
+					style: (0, vue.unref)(panelStyles),
+					role: __props.menu ? "menu" : "dialog"
+				}, panelNameAttrs.value, {
+					tabindex: "-1",
+					onKeydown: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handlePanelKeydown) && (0, vue.unref)(handlePanelKeydown)(...args)),
+					onFocusin: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(handlePanelFocusIn) && (0, vue.unref)(handlePanelFocusIn)(...args))
+				}), [(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)(["s-ui-dropdown__surface", [__props.surfaceClass, {
+						"s-ui-dropdown__surface--fit-viewport": isSurfaceViewportFit.value,
+						"s-ui-dropdown__surface--with-arrow": __props.arrow
+					}]]),
+					style: (0, vue.normalizeStyle)(surfaceStyles.value),
+					"data-placement": (0, vue.unref)(resolvedPlacement)
+				}, [__props.arrow ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					class: (0, vue.normalizeClass)(["s-ui-dropdown__arrow", { "s-ui-dropdown__arrow--overflow": (0, vue.unref)(isArrowOverflow) }]),
+					style: (0, vue.normalizeStyle)((0, vue.unref)(arrowStyles)),
+					"aria-hidden": "true"
+				}, [..._cache[3] || (_cache[3] = [(0, vue.createElementVNode)("span", { class: "s-ui-dropdown__arrow-shape" }, null, -1)])], 6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.renderSlot)(_ctx.$slots, "content", {
+					resolvedPlacement: (0, vue.unref)(resolvedPlacement),
+					isSheet: false,
+					close
+				})])], 14, _hoisted_2)], 16, _hoisted_1)) : (0, vue.createCommentVNode)("", true)]),
+				_: 3
+			}, 8, ["onAfterLeave"]))], 8, ["to", "disabled"]))], 64);
+		};
+	}
+});
+//#endregion
+exports.default = SDropdown_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SDropdown/SDropdown.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,307 @@
+import { ESDropdownBoundary, ESDropdownPlacement } from "../../composables/connectedPosition/types.js";
+import { resolveElement } from "../../composables/connectedPosition/resolveElement.js";
+import { useFloatingOverlay } from "../../composables/useFloatingOverlay.js";
+import "./SDropdown.types.js";
+import { findFocusTarget } from "./utils/dropdownFocusables.js";
+import { useDropdownFocus } from "./utils/useDropdownFocus.js";
+import { useDropdownPanelTransition } from "./utils/useDropdownPanelTransition.js";
+import { useDropdownSheetMode } from "./utils/useDropdownSheetMode.js";
+import { useDropdownTree } from "./utils/useDropdownTree.js";
+import { resolveTriggerReference } from "./utils/resolveTriggerReference.js";
+import SDropdownSheet_default from "./parts/SDropdownSheet.vue.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { useElementHover } from "@vueuse/core";
+//#region src/components/SDropdown/SDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id", "role"];
+var _hoisted_2 = ["data-placement"];
+var _hoisted_3 = { class: "s-ui-dropdown__content" };
+var SDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SDropdown",
+	props: /*@__PURE__*/ mergeModels({
+		placement: { default: () => ESDropdownPlacement.BOTTOM_START },
+		offset: { default: 8 },
+		flip: {
+			type: Boolean,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		matchReferenceWidth: {
+			type: Boolean,
+			default: false
+		},
+		fitViewport: {
+			type: Boolean,
+			default: false
+		},
+		surfaceClass: {},
+		teleportTo: {
+			type: [String, Boolean],
+			default: "body"
+		},
+		dismissOnClickOutside: {
+			type: Boolean,
+			default: true
+		},
+		dismissOnEscape: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		reference: { default: null },
+		contentId: {},
+		viewportPadding: { default: 8 },
+		boundary: { default: () => ESDropdownBoundary.CLIPPING_ANCESTORS },
+		block: {
+			type: Boolean,
+			default: false
+		},
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		showOnHover: {
+			type: Boolean,
+			default: false
+		},
+		hoverLeaveDelay: { default: 100 },
+		sheet: {
+			type: Boolean,
+			default: true
+		},
+		sheetBreakpoint: { default: () => 768 },
+		sheetTitle: { default: "" },
+		menu: {
+			type: Boolean,
+			default: false
+		},
+		focusOnOpen: {
+			type: Boolean,
+			default: true
+		},
+		panelLabel: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose }) {
+		const modelValue = useModel(__props, "modelValue");
+		const isSheetMode = useDropdownSheetMode(() => __props.sheet, () => __props.sheetBreakpoint);
+		const { isPanelShown, isPanelActive, handlePanelAfterLeave } = useDropdownPanelTransition(modelValue);
+		const setOpen = (nextOpen) => {
+			modelValue.value = nextOpen;
+		};
+		const close = () => setOpen(false);
+		const handlePanelBeforeLeave = (element) => {
+			element.toggleAttribute("inert", true);
+		};
+		const slots = useSlots();
+		const triggerWrapperRef = useTemplateRef("triggerWrapperRef");
+		const panelRef = useTemplateRef("panelRef");
+		const sheetRef = useTemplateRef("sheetRef");
+		const { hasOpenChild, descendantElements } = useDropdownTree({
+			open: modelValue,
+			element: computed(() => {
+				if (isSheetMode.value) return sheetRef.value?.overlayElement ?? null;
+				return panelRef.value;
+			})
+		});
+		const generatedContentId = useId();
+		const generatedTriggerId = useId();
+		const resolvedContentId = computed(() => __props.contentId ?? generatedContentId);
+		const referenceElement = computed(() => {
+			if (slots.trigger) return resolveTriggerReference(triggerWrapperRef.value);
+			return __props.reference;
+		});
+		const teleportEnabled = computed(() => __props.teleportTo !== false);
+		const teleportTarget = computed(() => {
+			if (__props.teleportTo === false) return "body";
+			return __props.teleportTo;
+		});
+		const sheetPlacement = ESDropdownPlacement.BOTTOM_START;
+		const show = () => {
+			if (__props.disabled) return;
+			setOpen(true);
+		};
+		const toggle = () => {
+			if (__props.disabled) return;
+			modelValue.value = !modelValue.value;
+		};
+		const triggerSlotProps = computed(() => ({
+			id: generatedTriggerId,
+			"aria-expanded": modelValue.value,
+			"aria-haspopup": __props.menu ? "menu" : "dialog",
+			"aria-controls": resolvedContentId.value
+		}));
+		const { panelStyles, panelMaxHeight, resolvedPlacement, arrowStyles, isArrowOverflow, isPositionReady, updatePosition } = useFloatingOverlay({
+			open: () => isPanelActive.value && !isSheetMode.value,
+			onOpenChange: setOpen,
+			reference: () => referenceElement.value,
+			panel: () => panelRef.value,
+			placement: () => __props.placement,
+			offset: () => __props.offset,
+			flip: () => __props.flip,
+			shift: () => __props.shift,
+			matchReferenceWidth: () => __props.matchReferenceWidth,
+			fitViewport: () => __props.fitViewport,
+			dismissOnClickOutside: () => __props.dismissOnClickOutside,
+			dismissOnEscape: () => __props.dismissOnEscape,
+			viewportPadding: () => __props.viewportPadding,
+			arrow: () => __props.arrow,
+			boundary: () => __props.boundary,
+			clickOutsideIgnore: descendantElements,
+			hasOpenDescendant: hasOpenChild
+		});
+		const isHoverEnabled = computed(() => __props.showOnHover && !isSheetMode.value);
+		const hoverReferenceTarget = computed(() => isHoverEnabled.value ? resolveElement(referenceElement.value) : null);
+		const hoverPanelTarget = computed(() => isHoverEnabled.value ? panelRef.value : null);
+		const isReferenceHovered = useElementHover(hoverReferenceTarget, { delayLeave: __props.hoverLeaveDelay });
+		const isPanelHovered = useElementHover(hoverPanelTarget, { delayLeave: __props.hoverLeaveDelay });
+		watch([
+			isReferenceHovered,
+			isPanelHovered,
+			hasOpenChild,
+			isHoverEnabled,
+			() => __props.disabled
+		], () => {
+			if (!isHoverEnabled.value) return;
+			if (__props.disabled) {
+				setOpen(false);
+				return;
+			}
+			setOpen(isReferenceHovered.value || isPanelHovered.value || hasOpenChild.value);
+		});
+		const { handlePanelFocusIn, handlePanelKeydown, handleTriggerKeydown } = useDropdownFocus({
+			open: modelValue,
+			enabled: () => !isSheetMode.value,
+			panel: panelRef,
+			panelReady: isPositionReady,
+			descendantElements,
+			trigger: () => slots.trigger ? triggerWrapperRef.value : resolveElement(__props.reference),
+			focusOnOpen: () => __props.focusOnOpen,
+			menu: () => __props.menu,
+			isOpenedByHover: () => isHoverEnabled.value && (isReferenceHovered.value || isPanelHovered.value),
+			show,
+			close
+		});
+		/**
+		* Имя панели (axe `aria-dialog-name`): явный `panelLabel`, иначе якорь — по его `id`
+		* (`triggerProps.id`), а без `id` — его `aria-label`.
+		*/
+		const panelNameAttrs = computed(() => {
+			if (__props.panelLabel) return { "aria-label": __props.panelLabel };
+			const triggerElement = findFocusTarget(slots.trigger ? triggerWrapperRef.value : resolveElement(referenceElement.value));
+			if (triggerElement?.id) return { "aria-labelledby": triggerElement.id };
+			return { "aria-label": triggerElement?.getAttribute("aria-label") ?? void 0 };
+		});
+		const isSurfaceViewportFit = computed(() => Boolean(panelMaxHeight.value));
+		const surfaceStyles = computed(() => {
+			if (!panelMaxHeight.value) return;
+			return { maxHeight: `${panelMaxHeight.value}px` };
+		});
+		watch(() => __props.disabled, (isDisabled) => {
+			if (isDisabled && modelValue.value) modelValue.value = false;
+		});
+		__expose({
+			updatePosition,
+			show,
+			close,
+			toggle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [unref(slots).trigger ? (openBlock(), createElementBlock("span", mergeProps({
+				key: 0,
+				ref_key: "triggerWrapperRef",
+				ref: triggerWrapperRef,
+				class: ["s-ui-dropdown", { "s-ui-dropdown--block": __props.block }]
+			}, _ctx.$attrs, { onKeydown: _cache[0] || (_cache[0] = (...args) => unref(handleTriggerKeydown) && unref(handleTriggerKeydown)(...args)) }), [renderSlot(_ctx.$slots, "trigger", {
+				open: modelValue.value,
+				toggle,
+				close,
+				isSheet: unref(isSheetMode),
+				triggerProps: triggerSlotProps.value
+			})], 16)) : createCommentVNode("", true), (openBlock(), createBlock(Teleport, {
+				to: teleportTarget.value,
+				disabled: !teleportEnabled.value
+			}, [unref(isSheetMode) ? (openBlock(), createBlock(SDropdownSheet_default, {
+				key: 0,
+				ref_key: "sheetRef",
+				ref: sheetRef,
+				open: modelValue.value,
+				title: __props.sheetTitle,
+				"dismiss-on-overlay-click": __props.dismissOnClickOutside,
+				"dismiss-on-escape": __props.dismissOnEscape,
+				"has-open-descendant": unref(hasOpenChild),
+				"content-id": resolvedContentId.value,
+				onClose: close
+			}, {
+				"header-left": withCtx(() => [renderSlot(_ctx.$slots, "sheet-header-left", { close })]),
+				"header-right": withCtx(() => [renderSlot(_ctx.$slots, "sheet-header-right", { close })]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "content", {
+					resolvedPlacement: unref(sheetPlacement),
+					isSheet: true,
+					close
+				})]),
+				_: 3
+			}, 8, [
+				"open",
+				"title",
+				"dismiss-on-overlay-click",
+				"dismiss-on-escape",
+				"has-open-descendant",
+				"content-id"
+			])) : (openBlock(), createBlock(Transition, {
+				key: 1,
+				name: "s-ui-dropdown",
+				onBeforeLeave: handlePanelBeforeLeave,
+				onAfterLeave: unref(handlePanelAfterLeave)
+			}, {
+				default: withCtx(() => [unref(isPanelShown) ? (openBlock(), createElementBlock("div", mergeProps({
+					key: 0,
+					id: resolvedContentId.value,
+					ref_key: "panelRef",
+					ref: panelRef,
+					class: ["s-ui-dropdown__panel", {
+						"s-ui-dropdown__panel--match-reference-width": __props.matchReferenceWidth,
+						"s-ui-dropdown__panel--ready": unref(isPositionReady)
+					}],
+					style: unref(panelStyles),
+					role: __props.menu ? "menu" : "dialog"
+				}, panelNameAttrs.value, {
+					tabindex: "-1",
+					onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handlePanelKeydown) && unref(handlePanelKeydown)(...args)),
+					onFocusin: _cache[2] || (_cache[2] = (...args) => unref(handlePanelFocusIn) && unref(handlePanelFocusIn)(...args))
+				}), [createElementVNode("div", {
+					class: normalizeClass(["s-ui-dropdown__surface", [__props.surfaceClass, {
+						"s-ui-dropdown__surface--fit-viewport": isSurfaceViewportFit.value,
+						"s-ui-dropdown__surface--with-arrow": __props.arrow
+					}]]),
+					style: normalizeStyle(surfaceStyles.value),
+					"data-placement": unref(resolvedPlacement)
+				}, [__props.arrow ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["s-ui-dropdown__arrow", { "s-ui-dropdown__arrow--overflow": unref(isArrowOverflow) }]),
+					style: normalizeStyle(unref(arrowStyles)),
+					"aria-hidden": "true"
+				}, [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "s-ui-dropdown__arrow-shape" }, null, -1)])], 6)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "content", {
+					resolvedPlacement: unref(resolvedPlacement),
+					isSheet: false,
+					close
+				})])], 14, _hoisted_2)], 16, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, ["onAfterLeave"]))], 8, ["to", "disabled"]))], 64);
+		};
+	}
+});
+//#endregion
+export { SDropdown_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SDropdown/parts/SDropdownSheet.vue.cjs

@@ -0,0 +1,6 @@
+const require_SDropdownSheet_vue_vue_type_script_setup_true_lang = require("./SDropdownSheet.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                                    */
+//#region src/components/SDropdown/parts/SDropdownSheet.vue
+var SDropdownSheet_default = require_SDropdownSheet_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SDropdownSheet_default;

package/dist/components/SDropdown/parts/SDropdownSheet.vue.js

@@ -0,0 +1,6 @@
+import SDropdownSheet_vue_vue_type_script_setup_true_lang_default from "./SDropdownSheet.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                  */
+//#region src/components/SDropdown/parts/SDropdownSheet.vue
+var SDropdownSheet_default = SDropdownSheet_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SDropdownSheet_default as default };