niuma-ui 2.0.2 → 2.0.4

package/dist/components/cascader/src/RsCascader.css

@@ -1,81 +1,226 @@
 
-.rs-cascader[data-v-4b45dd5a] {
+.rs-cascader-wrap[data-v-8c1435b6] {
+  --rs-cascader-min-width: 12rem;
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: var(--rs-cascader-min-width);
+  color: var(--rs-text);
+  color-scheme: inherit;
+  vertical-align: middle;
+}
+.rs-cascader-wrap--clearable .rs-cascader[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-md) + 2.25rem);
+}
+.rs-cascader-wrap--clearable .rs-cascader--ssm[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-xs) + 2rem);
+}
+.rs-cascader-wrap--clearable .rs-cascader--sm[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-sm) + 2rem);
+}
+.rs-cascader-wrap--clearable .rs-cascader--lg[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-lg) + 2.25rem);
+}
+.rs-cascader[data-v-8c1435b6] {
+  appearance: none;
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-sm);
   box-sizing: border-box;
   width: 100%;
-  min-width: 12rem;
+  min-width: var(--rs-cascader-min-width);
   height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
   padding: 0 var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
   border-radius: var(--rs-radius-sm);
   background: var(--rs-input-bg);
   color: var(--rs-text);
+  font-family: inherit;
   font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  text-align: start;
   cursor: pointer;
+  outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
 }
-.rs-cascader--sm[data-v-4b45dd5a] {
+.rs-cascader--ssm[data-v-8c1435b6] {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-cascader--sm[data-v-8c1435b6] {
   height: var(--rs-control-height-sm);
+  min-height: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-cascader--md[data-v-8c1435b6] {
+  height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
 }
-.rs-cascader--lg[data-v-4b45dd5a] {
+.rs-cascader--lg[data-v-8c1435b6] {
   height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
 }
-.rs-cascader--disabled[data-v-4b45dd5a] {
-  opacity: 0.38;
+.rs-cascader[data-v-8c1435b6]:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-cascader--open[data-v-8c1435b6]:not(:disabled),
+.rs-cascader[data-v-8c1435b6]:focus-visible {
+  outline: none;
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-cascader--disabled[data-v-8c1435b6],
+.rs-cascader[data-v-8c1435b6]:disabled {
+  color: var(--rs-text-disabled);
   cursor: not-allowed;
+  background: var(--rs-surface-hover);
+  opacity: 0.38;
 }
-.rs-cascader__placeholder[data-v-4b45dd5a] {
+.rs-cascader__placeholder[data-v-8c1435b6] {
   flex: 1;
-  color: var(--rs-muted);
+  min-width: 0;
+  overflow: hidden;
+  color: var(--rs-placeholder);
   text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.rs-cascader__value[data-v-4b45dd5a] {
+.rs-cascader__value[data-v-8c1435b6] {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-cascader__clear[data-v-4b45dd5a],
-.rs-cascader__icon[data-v-4b45dd5a] {
+.rs-cascader__icon[data-v-8c1435b6] {
+  flex-shrink: 0;
   color: var(--rs-muted);
+  transition: transform var(--rs-transition-fast);
 }
-.rs-cascader__clear[data-v-4b45dd5a] {
-  border: 0;
-  background: transparent;
-  cursor: pointer;
+.rs-cascader--open .rs-cascader__icon[data-v-8c1435b6] {
+  transform: rotate(180deg);
+}
+.rs-cascader__clear[data-v-8c1435b6] {
+  position: absolute;
+  inset-inline-end: calc(var(--rs-space-sm) + 1.125rem);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  color: var(--rs-muted);
 }
-.rs-cascader__panel[data-v-4b45dd5a] {
+.rs-cascader__panel[data-v-8c1435b6] {
+  --rs-cascader-panel-min-h: 8rem;
+  --rs-cascader-panel-max-h: 16rem;
+  --rs-cascader-col-min-w: 8rem;
+  z-index: calc(var(--rs-z-modal) + 2);
   display: flex;
-  min-height: 8rem;
-  max-height: 16rem;
+  box-sizing: border-box;
+  min-height: var(--rs-cascader-panel-min-h);
+  max-height: var(--rs-cascader-panel-max-h);
+  overflow: hidden;
+  border: 1px solid var(--rs-dialog-border, var(--rs-border));
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow-lg);
+  color: var(--rs-text);
+  color-scheme: inherit;
 }
-.rs-cascader__col[data-v-4b45dd5a] {
-  min-width: 8rem;
+.rs-cascader__col[data-v-8c1435b6] {
+  min-width: var(--rs-cascader-col-min-w);
   margin: 0;
   padding: var(--rs-space-xs);
   overflow: auto;
-  border-inline-end: 1px solid var(--rs-border);
+  border-inline-end: 1px solid var(--rs-border-subtle, var(--rs-border));
   list-style: none;
 }
-.rs-cascader__col[data-v-4b45dd5a]:last-child {
+.rs-cascader__col[data-v-8c1435b6]:last-child {
   border-inline-end: 0;
 }
-.rs-cascader__item[data-v-4b45dd5a] {
+.rs-cascader__item[data-v-8c1435b6] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--rs-space-sm);
-  padding: var(--rs-space-xs) var(--rs-space-sm);
-  border-radius: var(--rs-radius-xs);
+  box-sizing: border-box;
+  min-height: var(--rs-control-height-md);
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
   cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
 }
-.rs-cascader__item--active[data-v-4b45dd5a],
-.rs-cascader__item[data-v-4b45dd5a]:hover:not(.rs-cascader__item--disabled) {
-  background: var(--rs-surface-hover);
+.rs-cascader__item > span[data-v-8c1435b6] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-cascader__item--highlight[data-v-8c1435b6]:not(.rs-cascader__item--active) {
+  background: var(--rs-item-hover);
 }
-.rs-cascader__item--disabled[data-v-4b45dd5a] {
-  opacity: 0.4;
+.rs-cascader__item--active[data-v-8c1435b6] {
+  color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
+}
+.rs-cascader__item--disabled[data-v-8c1435b6] {
+  opacity: 0.38;
   cursor: not-allowed;
 }
+.rs-cascader__panel--ssm .rs-cascader__item[data-v-8c1435b6],
+.rs-cascader__panel--sm .rs-cascader__item[data-v-8c1435b6] {
+  gap: var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+}
+.rs-cascader__panel--sm .rs-cascader__item[data-v-8c1435b6] {
+  min-height: var(--rs-control-height-sm);
+  padding: 0.25rem 0.5rem;
+}
+.rs-cascader__panel--ssm .rs-cascader__item[data-v-8c1435b6] {
+  min-height: var(--rs-control-height-ssm);
+  padding: 0.125rem 0.375rem;
+}
+.rs-cascader__panel--lg .rs-cascader__item[data-v-8c1435b6] {
+  min-height: var(--rs-control-height-lg);
+  padding: var(--rs-space-sm) var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+@media (hover: hover) {
+.rs-cascader__item[data-v-8c1435b6]:hover:not(.rs-cascader__item--disabled) {
+    background: var(--rs-item-hover);
+}
+.rs-cascader__item--active[data-v-8c1435b6]:hover:not(.rs-cascader__item--disabled) {
+    background: color-mix(in srgb, var(--rs-primary) 18%, transparent);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-cascader[data-v-8c1435b6],
+  .rs-cascader__icon[data-v-8c1435b6],
+  .rs-cascader__item[data-v-8c1435b6] {
+    transition: none;
+}
+.rs-cascader--open .rs-cascader__icon[data-v-8c1435b6] {
+    transform: none;
+}
+}

package/dist/components/cascader/src/RsCascader.d.ts

@@ -1,5 +1,15 @@
-import type { RsComponentSize } from '../../../theme/types';
+import { type RsComponentSize } from '../../../theme/types';
 import { type RsCascaderExpandTrigger, type RsCascaderOption, type RsCascaderPath } from './cascader-utils';
+/**
+ * RsCascader 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsCascader>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsCascaderExpose {
+    focus: () => void;
+}
+export type RsCascaderInstance = RsCascaderExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
     options: readonly RsCascaderOption[];
     placeholder?: string;
@@ -9,13 +19,15 @@ type __VLS_Props = {
     expandTrigger?: RsCascaderExpandTrigger;
     separator?: string;
     size?: RsComponentSize;
+    ariaLabel?: string;
+    id?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: RsCascaderPath;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, RsCascaderExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (path: RsCascaderPath) => any;
     "update:modelValue": (value: RsCascaderPath) => any;
     "update:open": (value: boolean) => any;

package/dist/components/cascader/src/RsCascader.impl.js

@@ -1,11 +1,20 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useRsFormContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import RsPopover_default from "../../popover/src/RsPopover.js";
-import { cascaderColumns, cascaderDisplay, isCascaderLeaf } from "./cascader-utils.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+import RsButton_default from "../../button/src/RsButton.js";
+import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
+import { cascaderColumns, cascaderDisplay, isCascaderLeaf, nextCascaderPath, popCascaderPath } from "./cascader-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, useTemplateRef, watch, withModifiers } from "vue";
 //#region src/components/cascader/src/RsCascader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled"];
+var _hoisted_1 = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+];
 var _hoisted_2 = {
 	key: 0,
 	class: "rs-cascader__value"
@@ -14,7 +23,11 @@ var _hoisted_3 = {
 	key: 1,
 	class: "rs-cascader__placeholder"
 };
-var _hoisted_4 = ["aria-label"];
+var _hoisted_4 = [
+	"id",
+	"data-placement",
+	"data-rs-theme"
+];
 var _hoisted_5 = ["onClick", "onMouseenter"];
 var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RsCascader",
@@ -36,7 +49,9 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		},
 		expandTrigger: { default: "click" },
 		separator: { default: " / " },
-		size: {}
+		size: {},
+		ariaLabel: {},
+		id: {}
 	}, {
 		"modelValue": { default: () => [] },
 		"modelModifiers": {},
@@ -47,21 +62,60 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		"openModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue", "update:open"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
+		const formContext = useRsFormContext();
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const panelId = useId();
+		const triggerId = computed(() => props.id || panelId);
+		const triggerRef = useTemplateRef("triggerRef");
+		const panelRef = useTemplateRef("panelRef");
+		const rootRef = useTemplateRef("rootRef");
+		const highlight = ref(0);
+		const panelTheme = ref();
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "bottom"
+		});
+		const chevronSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const clearIconSize = RS_COMPONENT_SIZE_ICON_PX.ssm;
 		const columns = computed(() => cascaderColumns(props.options, model.value));
 		const display = computed(() => cascaderDisplay(props.options, model.value, props.separator));
+		const activeCol = computed(() => Math.max(0, columns.value.length - 1));
+		const activeOptions = computed(() => columns.value[activeCol.value] ?? []);
+		const highlighted = computed(() => activeOptions.value[highlight.value]);
+		const itemIconSize = computed(() => {
+			if (resolvedSize.value === "lg") return 16;
+			if (resolvedSize.value === "md") return 14;
+			return 12;
+		});
+		const triggerClass = computed(() => [
+			"rs-cascader",
+			`rs-cascader--${resolvedSize.value}`,
+			{
+				"rs-cascader--disabled": resolvedDisabled.value,
+				"rs-cascader--open": open.value
+			}
+		]);
+		const panelClass = computed(() => ["rs-cascader__panel", `rs-cascader__panel--${resolvedSize.value}`]);
+		const panelStyle = computed(() => ({
+			position: "fixed",
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`
+		}));
 		function isActive(depth, value) {
 			return String(model.value[depth] ?? "") === String(value);
 		}
 		function pick(depth, option) {
-			if (option.disabled) return;
-			const next = [...model.value.slice(0, depth), option.value];
+			if (option.disabled || resolvedDisabled.value) return;
+			const next = nextCascaderPath(model.value, depth, option.value);
 			model.value = next;
 			emit("change", next);
 			if (isCascaderLeaf(option) || props.changeOnSelect && props.expandTrigger === "click") {
@@ -70,32 +124,229 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		}
 		function onHover(depth, option) {
 			if (props.expandTrigger !== "hover" || option.disabled) return;
-			if (!isCascaderLeaf(option)) model.value = [...model.value.slice(0, depth), option.value];
+			if (!isCascaderLeaf(option)) model.value = nextCascaderPath(model.value, depth, option.value);
 		}
 		function onClear() {
+			if (resolvedDisabled.value) return;
 			model.value = [];
 			emit("change", []);
 		}
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(RsPopover_default, {
-				open: open.value,
-				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
-				side: "bottom",
-				align: "start",
-				width: "auto"
+		function focus() {
+			triggerRef.value?.focus();
+		}
+		function toggleOpen() {
+			if (resolvedDisabled.value) return;
+			open.value = !open.value;
+		}
+		function syncHighlight() {
+			const col = activeOptions.value;
+			const selected = model.value[activeCol.value];
+			const idx = col.findIndex((item) => String(item.value) === String(selected ?? ""));
+			highlight.value = idx >= 0 ? idx : stepEnabledIndex(col, -1, 1);
+		}
+		function syncPanelTheme() {
+			const el = triggerRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const panel = panelRef.value;
+			if (!trigger || !open.value || typeof window === "undefined") return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = panel?.getBoundingClientRect();
+			const prefWidth = Math.max(anchor.width, measured?.width || anchor.width);
+			popup.value = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height: measured?.height || 256
 			}, {
-				content: withCtx(() => [createElementVNode("div", {
-					class: "rs-cascader__panel",
-					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		}
+		let frame = 0;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!target) return;
+			if (rootRef.value?.contains(target)) return;
+			if (panelRef.value?.contains(target)) return;
+			open.value = false;
+		}
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		function moveHighlight(delta) {
+			highlight.value = stepEnabledIndex(activeOptions.value, highlight.value, delta);
+		}
+		function handleClosedKeys(event) {
+			if (event.key !== "ArrowDown" && event.key !== "Enter" && event.key !== " ") return false;
+			event.preventDefault();
+			open.value = true;
+			return true;
+		}
+		function handleOpenKeys(event) {
+			const col = activeOptions.value;
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				moveHighlight(1);
+				return true;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				moveHighlight(-1);
+				return true;
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(col, -1, 1);
+				return true;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(col, col.length, -1);
+				return true;
+			}
+			if (event.key === "ArrowRight" && highlighted.value && !isCascaderLeaf(highlighted.value)) {
+				event.preventDefault();
+				pick(activeCol.value, highlighted.value);
+				return true;
+			}
+			if (event.key === "ArrowLeft" && model.value.length) {
+				event.preventDefault();
+				model.value = popCascaderPath(model.value);
+				return true;
+			}
+			if (event.key === "Enter" && highlighted.value) {
+				event.preventDefault();
+				pick(activeCol.value, highlighted.value);
+				return true;
+			}
+			return false;
+		}
+		function onTriggerKeydown(event) {
+			if (resolvedDisabled.value || event.isComposing) return;
+			if (event.key === "Escape" && open.value) {
+				event.preventDefault();
+				open.value = false;
+				return;
+			}
+			if (!open.value) {
+				handleClosedKeys(event);
+				return;
+			}
+			handleOpenKeys(event);
+		}
+		watch(open, (isOpen) => {
+			if (typeof document === "undefined" || typeof window === "undefined") return;
+			if (isOpen) {
+				if (resolvedDisabled.value) {
+					open.value = false;
+					return;
+				}
+				syncPanelTheme();
+				syncHighlight();
+				document.addEventListener("pointerdown", onDocPointerDown);
+				window.addEventListener("resize", onWindowChange);
+				window.addEventListener("scroll", onWindowChange, true);
+				nextTick(() => requestPlace());
+				return;
+			}
+			detachOverlay();
+		});
+		watch(columns, () => {
+			if (!open.value) return;
+			syncHighlight();
+			requestPlace();
+		});
+		onBeforeUnmount(detachOverlay);
+		__expose({ focus });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-cascader-wrap", { "rs-cascader-wrap--clearable": __props.allowClear && display.value && !resolvedDisabled.value }])
+			}, [
+				createElementVNode("button", {
+					id: triggerId.value,
+					ref_key: "triggerRef",
+					ref: triggerRef,
+					type: "button",
+					class: normalizeClass(triggerClass.value),
+					disabled: resolvedDisabled.value,
+					"aria-label": __props.ariaLabel,
+					"aria-haspopup": "listbox",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(panelId) : void 0,
+					onClick: toggleOpen,
+					onKeydown: onTriggerKeydown
+				}, [display.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(display.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.placeholder ?? unref(t)("select.placeholder")), 1)), createVNode(RsIcon_default, {
+					name: "chevron-down",
+					size: chevronSize.value,
+					class: "rs-cascader__icon",
+					"aria-hidden": "true"
+				}, null, 8, ["size"])], 42, _hoisted_1),
+				__props.allowClear && display.value && !resolvedDisabled.value ? (openBlock(), createBlock(RsButton_default, {
+					key: 0,
+					class: "rs-cascader__clear",
+					variant: "text",
+					bordered: false,
+					size: "ssm",
+					radius: "full",
+					icon: "x",
+					"icon-size": unref(clearIconSize),
+					"icon-only": "",
+					"aria-label": unref(t)("select.clear"),
+					onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+					onClick: withModifiers(onClear, ["stop"])
+				}, null, 8, ["icon-size", "aria-label"])) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [open.value && !resolvedDisabled.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(panelId),
+					ref_key: "panelRef",
+					ref: panelRef,
+					class: normalizeClass(panelClass.value),
+					"data-placement": popup.value.placement,
+					"data-rs-theme": panelTheme.value,
+					style: normalizeStyle(panelStyle.value),
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col, depth) => {
 					return openBlock(), createElementBlock("ul", {
 						key: depth,
 						class: "rs-cascader__col"
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col, (opt) => {
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col, (opt, index) => {
 						return openBlock(), createElementBlock("li", {
 							key: String(opt.value),
 							class: normalizeClass(["rs-cascader__item", {
 								"rs-cascader__item--active": isActive(depth, opt.value),
+								"rs-cascader__item--highlight": depth === activeCol.value && index === highlight.value,
 								"rs-cascader__item--disabled": opt.disabled
 							}]),
 							onClick: ($event) => pick(depth, opt),
@@ -103,34 +354,12 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						}, [createElementVNode("span", null, toDisplayString(opt.label), 1), !unref(isCascaderLeaf)(opt) ? (openBlock(), createBlock(RsIcon_default, {
 							key: 0,
 							name: "chevron-right",
-							size: 12
-						})) : createCommentVNode("", true)], 42, _hoisted_5);
+							size: itemIconSize.value,
+							"aria-hidden": "true"
+						}, null, 8, ["size"])) : createCommentVNode("", true)], 42, _hoisted_5);
 					}), 128))]);
-				}), 128))], 32)]),
-				default: withCtx(() => [createElementVNode("button", {
-					type: "button",
-					class: normalizeClass(["rs-cascader", [`rs-cascader--${unref(resolvedSize)}`, { "rs-cascader--disabled": __props.disabled }]]),
-					disabled: __props.disabled
-				}, [
-					display.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(display.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.placeholder ?? unref(t)("select.placeholder")), 1)),
-					__props.allowClear && display.value && !__props.disabled ? (openBlock(), createElementBlock("button", {
-						key: 2,
-						type: "button",
-						class: "rs-cascader__clear",
-						"aria-label": unref(t)("select.clear"),
-						onClick: withModifiers(onClear, ["stop"])
-					}, [createVNode(RsIcon_default, {
-						name: "x",
-						size: 12
-					})], 8, _hoisted_4)) : createCommentVNode("", true),
-					createVNode(RsIcon_default, {
-						name: "chevron-down",
-						size: 14,
-						class: "rs-cascader__icon"
-					})
-				], 10, _hoisted_1)]),
-				_: 1
-			}, 8, ["open"]);
+				}), 128))], 46, _hoisted_4)) : createCommentVNode("", true)]))
+			], 2);
 		};
 	}
 });