niuma-ui 2.0.3 → 2.0.4

package/dist/components/avatar/src/RsAvatar.css

@@ -1,35 +1,46 @@
 
-.rs-avatar {
+.rs-avatar[data-v-5eb19cf0] {
+  --rs-avatar-size-sm: 1.75rem;
+  --rs-avatar-size-md: 2.25rem;
+  --rs-avatar-size-lg: 3rem;
+  --rs-avatar-size: var(--rs-avatar-size-md);
+  position: relative;
   display: inline-flex;
   overflow: hidden;
   flex-shrink: 0;
+  width: var(--rs-avatar-size);
+  height: var(--rs-avatar-size);
   border: 1px solid var(--rs-border);
   background: var(--rs-surface);
+  vertical-align: middle;
 }
-.rs-avatar--circle {
+.rs-avatar--circle[data-v-5eb19cf0] {
   border-radius: var(--rs-radius-full);
 }
-.rs-avatar--square {
+.rs-avatar--square[data-v-5eb19cf0] {
   border-radius: var(--rs-radius-sm);
 }
-.rs-avatar--sm {
-  width: 1.75rem;
-  height: 1.75rem;
+.rs-avatar--sm[data-v-5eb19cf0] {
+  --rs-avatar-size: var(--rs-avatar-size-sm);
 }
-.rs-avatar--md {
-  width: 2.25rem;
-  height: 2.25rem;
+.rs-avatar--md[data-v-5eb19cf0] {
+  --rs-avatar-size: var(--rs-avatar-size-md);
 }
-.rs-avatar--lg {
-  width: 3rem;
-  height: 3rem;
+.rs-avatar--lg[data-v-5eb19cf0] {
+  --rs-avatar-size: var(--rs-avatar-size-lg);
 }
-.rs-avatar__image {
+.rs-avatar__image[data-v-5eb19cf0] {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  opacity: 0;
 }
-.rs-avatar__fallback {
+.rs-avatar__image--ready[data-v-5eb19cf0] {
+  opacity: 1;
+}
+.rs-avatar__fallback[data-v-5eb19cf0] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38,23 +49,29 @@
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-semibold);
 }
-.rs-avatar__fallback--default {
+.rs-avatar__fallback--default[data-v-5eb19cf0] {
   background: var(--rs-surface-hover);
   color: var(--rs-muted);
 }
-.rs-avatar__fallback--primary {
+.rs-avatar__fallback--primary[data-v-5eb19cf0] {
   background: var(--rs-primary-container);
   color: var(--rs-on-primary-container);
 }
-.rs-avatar__fallback--success {
+.rs-avatar__fallback--success[data-v-5eb19cf0] {
   background: var(--rs-success-container);
   color: var(--rs-on-success-container);
 }
-.rs-avatar__fallback--warning {
+.rs-avatar__fallback--warning[data-v-5eb19cf0] {
   background: var(--rs-warning-container);
   color: var(--rs-on-warning-container);
 }
-.rs-avatar__fallback--danger {
+.rs-avatar__fallback--danger[data-v-5eb19cf0] {
   background: var(--rs-danger-container);
   color: var(--rs-on-danger-container);
 }
+@media (forced-colors: active) {
+.rs-avatar[data-v-5eb19cf0] {
+    border: 1px solid CanvasText;
+    forced-color-adjust: none;
+}
+}

package/dist/components/avatar/src/RsAvatar.d.ts

@@ -1,4 +1,5 @@
 import { type RsAvatarShape, type RsAvatarSize, type RsAvatarTone } from './avatar-utils';
+export type { RsAvatarShape, RsAvatarSize, RsAvatarTone };
 type __VLS_Props = {
     src?: string;
     alt?: string;
@@ -10,14 +11,19 @@ type __VLS_Props = {
     tone?: RsAvatarTone;
     label?: string;
 };
-declare var __VLS_19: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    fallback?: (props: typeof __VLS_19) => any;
+    fallback?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string;
+    label: string;
     size: RsAvatarSize;
-    tone: RsAvatarTone;
     icon: string;
+    tone: RsAvatarTone;
+    src: string;
+    alt: string;
+    fallback: string;
     shape: RsAvatarShape;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/avatar/src/RsAvatar.impl.js

@@ -1,57 +1,81 @@
-import { AvatarFallback, AvatarImage, AvatarRoot } from "../../_shared/src/reka.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { getAvatarInitials } from "./avatar-utils.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { RS_AVATAR_ICON_PX, getAvatarInitials, resolveRsAvatarShape, resolveRsAvatarSize, resolveRsAvatarTone } from "./avatar-utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, watch } from "vue";
 //#region src/components/avatar/src/RsAvatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { key: 1 };
+var _hoisted_1 = ["role", "aria-label"];
+var _hoisted_2 = ["src", "alt"];
+var _hoisted_3 = { key: 1 };
 var RsAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsAvatar",
 	__name: "RsAvatar",
 	props: {
-		src: {},
-		alt: {},
-		name: {},
-		fallback: {},
+		src: { default: void 0 },
+		alt: { default: void 0 },
+		name: { default: void 0 },
+		fallback: { default: void 0 },
 		icon: { default: "user" },
 		size: { default: "md" },
 		shape: { default: "circle" },
 		tone: { default: "primary" },
-		label: {}
+		label: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
+		const imageLoaded = ref(false);
+		const imageFailed = ref(false);
+		watch(() => props.src, () => {
+			imageLoaded.value = false;
+			imageFailed.value = false;
+		});
+		const resolvedSize = computed(() => resolveRsAvatarSize(props.size));
+		const resolvedShape = computed(() => resolveRsAvatarShape(props.shape));
+		const resolvedTone = computed(() => resolveRsAvatarTone(props.tone));
+		const iconPx = computed(() => RS_AVATAR_ICON_PX[resolvedSize.value]);
 		const fallbackText = computed(() => {
 			if (props.fallback?.trim()) return props.fallback.trim();
 			if (props.name?.trim()) return getAvatarInitials(props.name);
 			return "";
 		});
 		const showIconFallback = computed(() => !fallbackText.value);
+		const showImage = computed(() => Boolean(props.src) && !imageFailed.value);
+		const showFallback = computed(() => !showImage.value || !imageLoaded.value);
+		const pictureReady = computed(() => showImage.value && imageLoaded.value);
 		const imageAlt = computed(() => props.alt ?? props.name ?? "");
 		const ariaLabel = computed(() => props.label ?? props.alt ?? props.name ?? void 0);
+		const rootRole = computed(() => {
+			if (pictureReady.value || !ariaLabel.value) return void 0;
+			return "img";
+		});
+		const rootLabel = computed(() => pictureReady.value ? void 0 : ariaLabel.value);
+		function onLoad() {
+			imageLoaded.value = true;
+			imageFailed.value = false;
+		}
+		function onError() {
+			imageLoaded.value = false;
+			imageFailed.value = true;
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(AvatarRoot), {
-				class: normalizeClass(["rs-avatar", [`rs-avatar--${__props.size}`, `rs-avatar--${__props.shape}`]]),
-				"aria-label": ariaLabel.value,
-				role: ariaLabel.value ? "img" : void 0
-			}, {
-				default: withCtx(() => [__props.src ? (openBlock(), createBlock(unref(AvatarImage), {
-					key: 0,
-					src: __props.src,
-					alt: imageAlt.value,
-					class: "rs-avatar__image"
-				}, null, 8, ["src", "alt"])) : createCommentVNode("", true), createVNode(unref(AvatarFallback), { class: normalizeClass(["rs-avatar__fallback", `rs-avatar__fallback--${__props.tone}`]) }, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "fallback", {}, () => [showIconFallback.value ? (openBlock(), createBlock(RsIcon_default, {
-						key: 0,
-						name: __props.icon,
-						size: __props.size === "sm" ? 14 : __props.size === "lg" ? 20 : 16
-					}, null, 8, ["name", "size"])) : (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(fallbackText.value), 1))])]),
-					_: 3
-				}, 8, ["class"])]),
-				_: 3
-			}, 8, [
-				"class",
-				"aria-label",
-				"role"
-			]);
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["rs-avatar", [`rs-avatar--${resolvedSize.value}`, `rs-avatar--${resolvedShape.value}`]]),
+				role: rootRole.value,
+				"aria-label": rootLabel.value
+			}, [showImage.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				class: normalizeClass(["rs-avatar__image", { "rs-avatar__image--ready": imageLoaded.value }]),
+				src: __props.src,
+				alt: imageAlt.value,
+				onLoad,
+				onError
+			}, null, 42, _hoisted_2)) : createCommentVNode("", true), showFallback.value ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(["rs-avatar__fallback", `rs-avatar__fallback--${resolvedTone.value}`]),
+				"aria-hidden": "true"
+			}, [renderSlot(_ctx.$slots, "fallback", {}, () => [showIconFallback.value ? (openBlock(), createBlock(RsIcon_default, {
+				key: 0,
+				name: __props.icon,
+				size: iconPx.value
+			}, null, 8, ["name", "size"])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(fallbackText.value), 1))], true)], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/avatar/src/RsAvatar.js

@@ -1,7 +1,8 @@
 import './RsAvatar.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsAvatar_vue_vue_type_script_setup_true_lang_default from "./RsAvatar.impl.js";
 
 //#region src/components/avatar/src/RsAvatar.vue
-var RsAvatar_default = RsAvatar_vue_vue_type_script_setup_true_lang_default;
+var RsAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsAvatar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5eb19cf0"]]);
 //#endregion
 export { RsAvatar_default as default };

package/dist/components/avatar/src/avatar-utils.d.ts

@@ -1,11 +1,20 @@
-/** 头像尺寸 */
-export type RsAvatarSize = 'sm' | 'md' | 'lg';
-/** 头像形状 */
-export type RsAvatarShape = 'circle' | 'square';
-/** 头像占位色调 */
-export type RsAvatarTone = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+/** 头像边长。不是控件四档，没有 ssm。 */
+export declare const RS_AVATAR_SIZES: readonly ["sm", "md", "lg"];
+export type RsAvatarSize = (typeof RS_AVATAR_SIZES)[number];
+export declare const RS_AVATAR_SHAPES: readonly ["circle", "square"];
+export type RsAvatarShape = (typeof RS_AVATAR_SHAPES)[number];
+export declare const RS_AVATAR_TONES: readonly ["default", "primary", "success", "warning", "danger"];
+export type RsAvatarTone = (typeof RS_AVATAR_TONES)[number];
+/** 回退图标边长，跟原来 sm 14 / md 16 / lg 20 一致。 */
+export declare const RS_AVATAR_ICON_PX: Record<RsAvatarSize, number>;
+export declare function isRsAvatarSize(value: unknown): value is RsAvatarSize;
+export declare function isRsAvatarShape(value: unknown): value is RsAvatarShape;
+export declare function isRsAvatarTone(value: unknown): value is RsAvatarTone;
+export declare function resolveRsAvatarSize(size?: RsAvatarSize | null): RsAvatarSize;
+export declare function resolveRsAvatarShape(shape?: RsAvatarShape | null): RsAvatarShape;
+export declare function resolveRsAvatarTone(tone?: RsAvatarTone | null): RsAvatarTone;
 /**
  * 从姓名提取缩写（最多 2 个字符）。
- * @param name 显示名称
+ * 单段取前两字；多段取前两段首字。空串返回空，由组件改走图标。
  */
 export declare function getAvatarInitials(name: string): string;

package/dist/components/avatar/src/avatar-utils.js

@@ -1,13 +1,51 @@
 //#region src/components/avatar/src/avatar-utils.ts
+/** 头像边长。不是控件四档，没有 ssm。 */
+var RS_AVATAR_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+var RS_AVATAR_SHAPES = ["circle", "square"];
+var RS_AVATAR_TONES = [
+	"default",
+	"primary",
+	"success",
+	"warning",
+	"danger"
+];
+/** 回退图标边长，跟原来 sm 14 / md 16 / lg 20 一致。 */
+var RS_AVATAR_ICON_PX = {
+	sm: 14,
+	md: 16,
+	lg: 20
+};
+function isRsAvatarSize(value) {
+	return typeof value === "string" && RS_AVATAR_SIZES.includes(value);
+}
+function isRsAvatarShape(value) {
+	return typeof value === "string" && RS_AVATAR_SHAPES.includes(value);
+}
+function isRsAvatarTone(value) {
+	return typeof value === "string" && RS_AVATAR_TONES.includes(value);
+}
+function resolveRsAvatarSize(size) {
+	return isRsAvatarSize(size) ? size : "md";
+}
+function resolveRsAvatarShape(shape) {
+	return isRsAvatarShape(shape) ? shape : "circle";
+}
+function resolveRsAvatarTone(tone) {
+	return isRsAvatarTone(tone) ? tone : "primary";
+}
 /**
 * 从姓名提取缩写（最多 2 个字符）。
-* @param name 显示名称
+* 单段取前两字；多段取前两段首字。空串返回空，由组件改走图标。
 */
 function getAvatarInitials(name) {
 	const parts = name.trim().split(/\s+/).filter(Boolean);
-	if (!parts.length) return "?";
+	if (!parts.length) return "";
 	if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
 	return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
 }
 //#endregion
-export { getAvatarInitials };
+export { RS_AVATAR_ICON_PX, RS_AVATAR_SHAPES, RS_AVATAR_SIZES, RS_AVATAR_TONES, getAvatarInitials, isRsAvatarShape, isRsAvatarSize, isRsAvatarTone, resolveRsAvatarShape, resolveRsAvatarSize, resolveRsAvatarTone };

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

@@ -1,2 +1,2 @@
 export { default as RsBreadcrumb } from './src/RsBreadcrumb.js';
-export type { RsBreadcrumbItem } from './src/RsBreadcrumb.js';
+export type { RsBreadcrumbItem } from './src/breadcrumb-utils';

package/dist/components/breadcrumb/src/RsBreadcrumb.css

@@ -1,37 +1,70 @@
 
-.rs-breadcrumb__list {
+.rs-breadcrumb__list[data-v-8913d929] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--rs-breadcrumb-gap);
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.rs-breadcrumb__item {
+.rs-breadcrumb__item[data-v-8913d929] {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--rs-breadcrumb-item-gap);
 }
-.rs-breadcrumb__link {
-  font-size: var(--rs-font-size-sm);
-  color: var(--rs-muted);
+.rs-breadcrumb__link[data-v-8913d929],
+.rs-breadcrumb__more[data-v-8913d929] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-breadcrumb-item-gap);
+  font-size: var(--rs-breadcrumb-font-size);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-breadcrumb-link);
   text-decoration: none;
-  padding: 0.125rem 0.25rem;
+  padding-block: var(--rs-breadcrumb-link-pad-block);
+  padding-inline: var(--rs-breadcrumb-link-pad-inline);
+  border: 0;
   border-radius: var(--rs-radius-xs);
+  background: transparent;
+  cursor: pointer;
   transition:
     color var(--rs-transition-fast),
-    background var(--rs-transition-fast);
+    background-color var(--rs-transition-fast);
 }
-.rs-breadcrumb__link:hover:not(.rs-breadcrumb__link--current) {
-  color: var(--rs-primary);
-  background: var(--rs-surface-hover);
+.rs-breadcrumb__link[data-v-8913d929]:hover:not(.rs-breadcrumb__link--current):not(.rs-breadcrumb__link--disabled),
+.rs-breadcrumb__more[data-v-8913d929]:hover {
+  color: var(--rs-breadcrumb-link-hover);
+  background: var(--rs-breadcrumb-link-hover-bg);
 }
-.rs-breadcrumb__link--current {
-  color: var(--rs-text);
-  font-weight: var(--rs-font-weight-medium);
+.rs-breadcrumb__link[data-v-8913d929]:focus-visible,
+.rs-breadcrumb__more[data-v-8913d929]:focus-visible {
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
+  outline-offset: 2px;
+}
+.rs-breadcrumb__link--current[data-v-8913d929] {
+  color: var(--rs-breadcrumb-current);
+  font-weight: var(--rs-breadcrumb-current-weight);
   pointer-events: none;
+  cursor: default;
+}
+.rs-breadcrumb__link--disabled[data-v-8913d929] {
+  opacity: var(--rs-breadcrumb-disabled-opacity);
+  cursor: not-allowed;
+}
+.rs-breadcrumb__sep[data-v-8913d929] {
+  color: var(--rs-breadcrumb-sep);
+  flex-shrink: 0;
+}
+.rs-breadcrumb__icon[data-v-8913d929] {
+  color: inherit;
+}
+.rs-breadcrumb__sep[data-v-8913d929]:dir(rtl) {
+  transform: scaleX(-1);
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-breadcrumb__link[data-v-8913d929],
+  .rs-breadcrumb__more[data-v-8913d929] {
+    transition: none;
 }
-.rs-breadcrumb__sep {
-  color: var(--rs-muted);
 }

package/dist/components/breadcrumb/src/RsBreadcrumb.d.ts

@@ -1,11 +1,50 @@
-export interface RsBreadcrumbItem {
-    label: string;
-    to?: string;
-    href?: string;
-}
+import { type RsBreadcrumbItem } from './breadcrumb-utils';
 type __VLS_Props = {
     items: RsBreadcrumbItem[];
+    /** 文字分隔符。未传时用 separatorIcon。 */
+    separator?: string;
+    /** Lucide kebab-case。有 separator 文字时不渲染图标。 */
+    separatorIcon?: string;
+    /** 超过该数量时中间收成省略号。省略号算一项。 */
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+    ariaLabel?: string;
+    id?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare function expand(): void;
+declare var __VLS_1: {
+    hiddenItems: RsBreadcrumbItem[];
+    expand: typeof expand;
+}, __VLS_16: {
+    item: RsBreadcrumbItem;
+    index: number;
+    isCurrent: boolean;
+    href: string | undefined;
+}, __VLS_23: {
+    index: number;
+};
+type __VLS_Slots = {} & {
+    more?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_16) => any;
+} & {
+    separator?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (item: RsBreadcrumbItem, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((item: RsBreadcrumbItem, event: MouseEvent) => any) | undefined;
+}>, {
+    separatorIcon: string;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/breadcrumb/src/RsBreadcrumb.impl.js

@@ -1,24 +1,123 @@
 import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
 import { buildBreadcrumbRenderItems } from "./breadcrumb-utils.js";
-import RsBreadcrumbItems_default from "./RsBreadcrumbItems.js";
-import { computed, createElementBlock, createVNode, defineComponent, openBlock, unref } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, watch, withCtx } from "vue";
 //#region src/components/breadcrumb/src/RsBreadcrumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["id", "aria-label"];
+var _hoisted_2 = { class: "rs-breadcrumb__list" };
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = { class: "rs-breadcrumb__label" };
+var _hoisted_5 = {
+	key: 0,
+	class: "rs-breadcrumb__sep",
+	"aria-hidden": "true"
+};
 var RsBreadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsBreadcrumb",
 	__name: "RsBreadcrumb",
-	props: { items: {} },
-	setup(__props) {
-		const { t } = useRsI18n();
+	props: {
+		items: {},
+		separator: {},
+		separatorIcon: { default: "chevron-right" },
+		maxItems: {},
+		itemsBeforeCollapse: { default: 1 },
+		itemsAfterCollapse: { default: 1 },
+		ariaLabel: {},
+		id: {}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const renderItems = computed(() => buildBreadcrumbRenderItems(props.items));
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const expanded = ref(false);
+		watch(() => [
+			props.maxItems ?? "",
+			props.itemsBeforeCollapse,
+			props.itemsAfterCollapse,
+			props.items.length,
+			props.items.map((item, index) => item.key ?? item.label ?? index).join("\0")
+		].join("\n"), () => {
+			expanded.value = false;
+		});
+		const renderItems = computed(() => buildBreadcrumbRenderItems(props.items, {
+			maxItems: props.maxItems,
+			itemsBeforeCollapse: props.itemsBeforeCollapse,
+			itemsAfterCollapse: props.itemsAfterCollapse,
+			expanded: expanded.value
+		}));
+		const navLabel = computed(() => props.ariaLabel || t("breadcrumb.label"));
+		const separatorLabel = computed(() => t("breadcrumb.separator"));
+		const moreLabel = computed(() => t("breadcrumb.more"));
+		function expand() {
+			expanded.value = true;
+		}
+		function onItemClick(item, event, disabled) {
+			emit("click", item, event);
+			if (disabled) event.preventDefault();
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
+				id: __props.id,
 				class: "rs-breadcrumb",
-				"aria-label": unref(t)("breadcrumb.label")
-			}, [createVNode(RsBreadcrumbItems_default, {
-				items: renderItems.value,
-				"separator-label": unref(t)("breadcrumb.separator")
-			}, null, 8, ["items", "separator-label"])], 8, _hoisted_1);
+				"aria-label": navLabel.value
+			}, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderItems.value, (item, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: item.key,
+					class: normalizeClass(["rs-breadcrumb__item", { "rs-breadcrumb__item--ellipsis": item.isEllipsis }])
+				}, [item.isEllipsis ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "rs-breadcrumb__more",
+					"aria-label": moreLabel.value,
+					onClick: expand
+				}, [renderSlot(_ctx.$slots, "more", {
+					hiddenItems: item.hiddenItems ?? [],
+					expand
+				}, () => [createVNode(RsIcon_default, {
+					name: "ellipsis",
+					size: "sm"
+				})], true)], 8, _hoisted_3)) : (openBlock(), createBlock(resolveDynamicComponent(item.isLink ? "a" : "span"), {
+					key: 1,
+					href: item.isLink ? item.href : void 0,
+					target: item.isLink ? item.target : void 0,
+					rel: item.isLink ? item.rel : void 0,
+					class: normalizeClass(["rs-breadcrumb__link", {
+						"rs-breadcrumb__link--current": item.isCurrent,
+						"rs-breadcrumb__link--disabled": item.isDisabled
+					}]),
+					"aria-current": item.isCurrent ? "page" : void 0,
+					"aria-disabled": item.isDisabled ? "true" : void 0,
+					onClick: ($event) => item.source ? onItemClick(item.source, $event, item.isDisabled) : void 0
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+						item: item.source,
+						index: item.sourceIndex,
+						isCurrent: item.isCurrent,
+						href: item.href
+					}, () => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: item.icon,
+						size: "sm",
+						class: "rs-breadcrumb__icon"
+					}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1)], true)]),
+					_: 2
+				}, 1032, [
+					"href",
+					"target",
+					"rel",
+					"class",
+					"aria-current",
+					"aria-disabled",
+					"onClick"
+				])), index < renderItems.value.length - 1 ? renderSlot(_ctx.$slots, "separator", { index }, () => [__props.separator ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.separator), 1)) : (openBlock(), createBlock(RsIcon_default, {
+					key: 1,
+					name: __props.separatorIcon,
+					size: "sm",
+					class: "rs-breadcrumb__sep",
+					label: separatorLabel.value
+				}, null, 8, ["name", "label"]))], true, 2) : createCommentVNode("", true)], 2);
+			}), 128))])], 8, _hoisted_1);
 		};
 	}
 });

package/dist/components/breadcrumb/src/RsBreadcrumb.js

@@ -1,7 +1,8 @@
 import './RsBreadcrumb.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsBreadcrumb_vue_vue_type_script_setup_true_lang_default from "./RsBreadcrumb.impl.js";
 
 //#region src/components/breadcrumb/src/RsBreadcrumb.vue
-var RsBreadcrumb_default = RsBreadcrumb_vue_vue_type_script_setup_true_lang_default;
+var RsBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsBreadcrumb_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8913d929"]]);
 //#endregion
 export { RsBreadcrumb_default as default };