@vuecs/elements 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1080 @@
+import { installDefaultsManager, installThemeManager, themableProps, useComponentDefaults, useComponentTheme, useThemeProps } from "@vuecs/core";
+import { computed, defineComponent, h, inject, mergeProps, provide, resolveComponent } from "vue";
+import { AspectRatio, AvatarFallback, AvatarImage, AvatarRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, Primitive, Separator, VisuallyHidden } from "reka-ui";
+//#region src/components/alert/theme.ts
+const alertThemeDefaults = { classes: {
+	root: "vc-alert",
+	icon: "vc-alert-icon",
+	content: "vc-alert-content",
+	closeIcon: "vc-alert-close-icon",
+	close: "vc-alert-close"
+} };
+const alertTitleThemeDefaults = { classes: { root: "vc-alert-title" } };
+const alertDescriptionThemeDefaults = { classes: { root: "vc-alert-description" } };
+//#endregion
+//#region src/components/alert/Alert.vue?vue&type=script&lang.ts
+const alertProps = {
+	/** Semantic color. Drives the `color` theme variant + auto-resolves the default icon + ARIA role. */
+	color: {
+		type: String,
+		default: void 0
+	},
+	/** Visual treatment — solid / soft / outline. */
+	variant: {
+		type: String,
+		default: void 0
+	},
+	/** Padding / font-size tier. */
+	size: {
+		type: String,
+		default: void 0
+	},
+	/**
+	* Iconify name for the leading icon (e.g. `'lucide:triangle-alert'`).
+	* When omitted, resolves from the active icon preset based on `color`
+	* (`errorIcon` / `warningIcon` / `successIcon` / `infoIcon`). Pass an
+	* empty string to suppress the icon entirely.
+	*/
+	icon: {
+		type: String,
+		default: void 0
+	},
+	/**
+	* ARIA role. Defaults to `'alert'` for `error` / `warning` (assertive)
+	* and `'status'` for `info` / `success` / `neutral` (polite) — matches
+	* WAI-ARIA's intended semantics. Override for custom interaction
+	* patterns (e.g. `role="log"` for chat-style toasts).
+	*/
+	role: {
+		type: String,
+		default: void 0
+	},
+	/** HTML tag to render. */
+	as: {
+		type: String,
+		default: "div"
+	},
+	...themableProps()
+};
+const alertBehavioralDefaults = {
+	primaryIcon: "",
+	neutralIcon: "",
+	infoIcon: "",
+	successIcon: "",
+	warningIcon: "",
+	errorIcon: ""
+};
+//#endregion
+//#region src/components/alert/Alert.vue
+var Alert_default = defineComponent({
+	name: "VCAlert",
+	inheritAttrs: false,
+	props: alertProps,
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("alert", useThemeProps(props, "color", "variant", "size"), alertThemeDefaults);
+		const defaults = useComponentDefaults("alert", {}, alertBehavioralDefaults);
+		const iconName = computed(() => {
+			if (props.icon !== void 0) return props.icon;
+			switch (props.color) {
+				case "error": return defaults.value.errorIcon;
+				case "warning": return defaults.value.warningIcon;
+				case "success": return defaults.value.successIcon;
+				case "info": return defaults.value.infoIcon;
+				case "primary": return defaults.value.primaryIcon;
+				case "neutral": return defaults.value.neutralIcon;
+				default: return "";
+			}
+		});
+		const resolvedRole = computed(() => {
+			if (props.role) return props.role;
+			return props.color === "error" || props.color === "warning" ? "alert" : "status";
+		});
+		const VCIcon = resolveComponent("VCIcon");
+		const hasIconComponent = typeof VCIcon !== "string";
+		return () => {
+			const iconValue = iconName.value;
+			const showIcon = !!iconValue && hasIconComponent;
+			return h(props.as, mergeProps(attrs, {
+				role: resolvedRole.value,
+				class: theme.value.root || void 0
+			}), [showIcon ? h("span", {
+				class: theme.value.icon || void 0,
+				"aria-hidden": "true"
+			}, [h(VCIcon, { name: iconValue })]) : null, h("div", { class: theme.value.content || void 0 }, slots.default?.())]);
+		};
+	}
+});
+//#endregion
+//#region src/components/alert/AlertTitle.vue
+var AlertTitle_default = defineComponent({
+	name: "VCAlertTitle",
+	inheritAttrs: false,
+	props: {
+		/**
+		* HTML tag to render.
+		*
+		* Vuecs convention: defaults to `'h4'` (semantically-correct alert
+		* heading). Override via `:as` for nested-heading hierarchies.
+		*/
+		as: {
+			type: String,
+			default: "h4"
+		},
+		...themableProps()
+	},
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("alertTitle", useThemeProps(props), alertTitleThemeDefaults);
+		return () => h(props.as, mergeProps(attrs, { class: theme.value.root || void 0 }), slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/alert/AlertDescription.vue
+var AlertDescription_default = defineComponent({
+	name: "VCAlertDescription",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. */
+		as: {
+			type: String,
+			default: "div"
+		},
+		...themableProps()
+	},
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("alertDescription", useThemeProps(props), alertDescriptionThemeDefaults);
+		return () => h(props.as, mergeProps(attrs, { class: theme.value.root || void 0 }), slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/alert/AlertClose.vue
+var AlertClose_default = defineComponent({
+	name: "VCAlertClose",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. */
+		as: {
+			type: String,
+			default: "button"
+		},
+		/**
+		* Force the corner-X presentation (reads the theme's `closeIcon` slot).
+		* When false (default), the slot-presence heuristic decides:
+		* - slotless → corner-X (`closeIcon`)
+		* - slotted → labeled-button (`close`)
+		*
+		* Same convention as `<VCModalClose>` / `<VCPopoverClose>` / `<VCToastClose>`.
+		*/
+		icon: {
+			type: Boolean,
+			default: false
+		},
+		/** Per-instance theme override — flat slot key map. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Per-instance variant values. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots, attrs }) {
+		const theme = useComponentTheme("alert", props, alertThemeDefaults);
+		return () => {
+			const hasSlot = !!slots.default;
+			const slotKey = props.icon || !hasSlot ? "closeIcon" : "close";
+			const ariaLabel = attrs["aria-label"] ?? (slotKey === "closeIcon" ? "Close" : void 0);
+			return h(props.as, mergeProps(attrs, {
+				type: props.as === "button" ? "button" : void 0,
+				class: theme.value[slotKey] || void 0,
+				"aria-label": ariaLabel
+			}), { default: () => slots.default?.() ?? "×" });
+		};
+	}
+});
+//#endregion
+//#region src/components/aspect-ratio/theme.ts
+const aspectRatioThemeDefaults = { classes: { root: "vc-aspect-ratio" } };
+//#endregion
+//#region src/components/aspect-ratio/AspectRatio.vue
+var AspectRatio_default = defineComponent({
+	name: "VCAspectRatio",
+	inheritAttrs: false,
+	props: {
+		/** Desired ratio — width / height (e.g. `16/9`, `4/3`, `1`). */
+		ratio: {
+			type: Number,
+			default: 1
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("aspectRatio", props, aspectRatioThemeDefaults);
+		return () => h(AspectRatio, mergeProps(attrs, {
+			ratio: props.ratio,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/avatar/theme.ts
+const avatarThemeDefaults = { classes: {
+	root: "vc-avatar",
+	image: "vc-avatar-image",
+	fallback: "vc-avatar-fallback"
+} };
+//#endregion
+//#region src/components/avatar/Avatar.vue
+var Avatar_default = defineComponent({
+	name: "VCAvatar",
+	inheritAttrs: false,
+	props: {
+		/** Image source. When omitted, the fallback renders immediately. */
+		src: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Image alt text. Defaults to `''` so the rendered `<img>` always
+		* carries the attribute (decorative-image semantics) — pass a
+		* meaningful string when the avatar conveys identity.
+		*/
+		alt: {
+			type: String,
+			default: ""
+		},
+		/**
+		* Delay (ms) before the fallback appears. Useful to avoid a flicker
+		* on fast connections — gives the image a brief window to load before
+		* the placeholder shows. Forwarded to Reka's `AvatarFallback`.
+		*
+		* Vuecs convention: keep this at `undefined` rather than mirroring a
+		* concrete Reka default. Reka's `AvatarFallback` treats `delayMs: 0`
+		* as "wait forever" instead of "render immediately"; the spread-guard
+		* in `setup()` works around that quirk so omitting the prop renders
+		* the fallback right away. This is the ONE place where the
+		* Reka-wrapping convention's natural-forwarding rule is bent.
+		*/
+		delayMs: {
+			type: Number,
+			default: void 0
+		},
+		/**
+		* Size variant — resolved by the active theme. `sm` ≈ 32px, `md` ≈
+		* 40px (default), `lg` ≈ 56px. For arbitrary pixel sizes, use
+		* `themeClass={ root: extend('h-12 w-12') }` instead.
+		*/
+		size: {
+			type: String,
+			default: void 0
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("avatar", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...props.themeVariant ?? {},
+					...props.size !== void 0 ? { size: props.size } : {}
+				};
+			}
+		}, avatarThemeDefaults);
+		return () => {
+			const resolved = theme.value;
+			const children = [];
+			if (props.src) children.push(h(AvatarImage, {
+				src: props.src,
+				alt: props.alt,
+				class: resolved.image || void 0
+			}));
+			children.push(h(AvatarFallback, {
+				...typeof props.delayMs === "number" && props.delayMs > 0 ? { delayMs: props.delayMs } : {},
+				class: resolved.fallback || void 0
+			}, { default: () => slots.fallback?.({ class: resolved.fallback }) ?? "" }));
+			return h(AvatarRoot, mergeProps(attrs, { class: resolved.root || void 0 }), { default: () => children });
+		};
+	}
+});
+//#endregion
+//#region src/components/badge/theme.ts
+const badgeThemeDefaults = { classes: { root: "vc-badge" } };
+//#endregion
+//#region src/components/badge/Badge.vue
+var Badge_default = defineComponent({
+	name: "VCBadge",
+	inheritAttrs: false,
+	props: {
+		/** Color variant key — resolved by the active theme. */
+		color: {
+			type: String,
+			default: void 0
+		},
+		/** Style variant key — resolved by the active theme (e.g. `solid`, `soft`, `outline`). */
+		variant: {
+			type: String,
+			default: void 0
+		},
+		/** Size variant key — resolved by the active theme. */
+		size: {
+			type: String,
+			default: void 0
+		},
+		/** HTML tag to render. */
+		tag: {
+			type: String,
+			default: "span"
+		},
+		...themableProps()
+	},
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("badge", useThemeProps(props, "color", "variant", "size"), badgeThemeDefaults);
+		return () => h(props.tag, mergeProps(attrs, { class: theme.value.root || void 0 }), slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/card/context.ts
+const CARD_CONTEXT_KEY = Symbol("vcCardContext");
+function provideCardContext(ctx) {
+	provide(CARD_CONTEXT_KEY, ctx);
+}
+function useCardContext() {
+	return inject(CARD_CONTEXT_KEY, null);
+}
+//#endregion
+//#region src/components/card/theme.ts
+const cardThemeDefaults = { classes: { root: "vc-card" } };
+const cardHeaderThemeDefaults = { classes: { root: "vc-card-header" } };
+const cardTitleThemeDefaults = { classes: { root: "vc-card-title" } };
+const cardDescriptionThemeDefaults = { classes: { root: "vc-card-description" } };
+const cardBodyThemeDefaults = { classes: { root: "vc-card-body" } };
+const cardFooterThemeDefaults = { classes: { root: "vc-card-footer" } };
+//#endregion
+//#region src/components/card/Card.vue
+var Card_default = defineComponent({
+	name: "VCCard",
+	inheritAttrs: false,
+	props: {
+		/** Visual style variant — resolved by the active theme. */
+		variant: {
+			type: String,
+			default: void 0
+		},
+		/** Inner padding scale; propagates to child parts via card context. */
+		padding: {
+			type: String,
+			default: void 0
+		},
+		/** Adds hover / focus styling — useful for link-cards. */
+		interactive: {
+			type: Boolean,
+			default: void 0
+		},
+		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
+		as: {
+			type: String,
+			default: "div"
+		},
+		/** Render the consumer's slot child as the card root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		...themableProps()
+	},
+	setup(props, { attrs, slots }) {
+		const themeProps = useThemeProps(props, "variant", "padding", "interactive");
+		const theme = useComponentTheme("card", themeProps, cardThemeDefaults);
+		provideCardContext({ themeVariant: () => themeProps.themeVariant });
+		return () => h(Primitive, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/card/CardHeader.vue
+var CardHeader_default = defineComponent({
+	name: "VCCardHeader",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
+		as: {
+			type: String,
+			default: "header"
+		},
+		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useCardContext();
+		const theme = useComponentTheme("cardHeader", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, cardHeaderThemeDefaults);
+		return () => h(Primitive, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/card/CardTitle.vue
+var CardTitle_default = defineComponent({
+	name: "VCCardTitle",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
+		as: {
+			type: String,
+			default: "h3"
+		},
+		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useCardContext();
+		const theme = useComponentTheme("cardTitle", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, cardTitleThemeDefaults);
+		return () => h(Primitive, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/card/CardDescription.vue
+var CardDescription_default = defineComponent({
+	name: "VCCardDescription",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
+		as: {
+			type: String,
+			default: "p"
+		},
+		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useCardContext();
+		const theme = useComponentTheme("cardDescription", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, cardDescriptionThemeDefaults);
+		return () => h(Primitive, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/card/CardBody.vue
+var CardBody_default = defineComponent({
+	name: "VCCardBody",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
+		as: {
+			type: String,
+			default: "div"
+		},
+		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useCardContext();
+		const theme = useComponentTheme("cardBody", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, cardBodyThemeDefaults);
+		return () => h(Primitive, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/card/CardFooter.vue
+var CardFooter_default = defineComponent({
+	name: "VCCardFooter",
+	inheritAttrs: false,
+	props: {
+		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
+		as: {
+			type: String,
+			default: "footer"
+		},
+		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useCardContext();
+		const theme = useComponentTheme("cardFooter", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, cardFooterThemeDefaults);
+		return () => h(Primitive, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/collapse/theme.ts
+const collapseThemeDefaults = { classes: { root: "vc-collapse" } };
+const collapseTriggerThemeDefaults = { classes: {
+	root: "vc-collapse-trigger",
+	chevron: "vc-collapse-chevron"
+} };
+const collapseContentThemeDefaults = { classes: { root: "vc-collapse-content" } };
+//#endregion
+//#region src/components/collapse/Collapse.vue
+var Collapse_default = defineComponent({
+	name: "VCCollapse",
+	inheritAttrs: false,
+	props: {
+		/** Controlled open state. Leave undefined for uncontrolled (driven by `defaultOpen`). */
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		/** Initial open state when `open` is undefined. Reka default: `false`. */
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		/** Disable interaction (trigger ignores clicks; pane stays in its current state). */
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* Unmount the content element when closed. When `false`, the element is
+		* kept in the DOM with `hidden` set — useful for preserving state inside
+		* the pane (form inputs, animations) across collapse/expand cycles.
+		* Reka default: `true`.
+		*/
+		unmountOnHide: {
+			type: Boolean,
+			default: true
+		},
+		/** HTML tag to render. */
+		as: {
+			type: String,
+			default: "div"
+		},
+		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		...themableProps()
+	},
+	emits: ["update:open"],
+	setup(props, { attrs, slots, emit }) {
+		const theme = useComponentTheme("collapse", useThemeProps(props), collapseThemeDefaults);
+		return () => h(CollapsibleRoot, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			open: props.open,
+			defaultOpen: props.defaultOpen,
+			disabled: props.disabled,
+			unmountOnHide: props.unmountOnHide,
+			class: theme.value.root || void 0,
+			"onUpdate:open": (open) => emit("update:open", open)
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/collapse/CollapseTrigger.vue?vue&type=script&lang.ts
+const collapseTriggerProps = {
+	/**
+	* Auto-render a rotating chevron next to the consumer's trigger content
+	* (`'auto'`, default) or render plain trigger content only (`'none'`).
+	* The chevron icon name comes from `ComponentDefaults['collapseTrigger'].chevronIcon`
+	* — usually wired by an icon preset (`@vuecs/icons-lucide` ships
+	* `'lucide:chevron-down'`).
+	*/
+	chevron: {
+		type: String,
+		default: void 0
+	},
+	/** HTML tag (or component) to render as. Reka default: `'button'`. */
+	as: {
+		type: String,
+		default: "button"
+	},
+	/** Render the consumer's slot child as the trigger (Reka `asChild` pattern). */
+	asChild: {
+		type: Boolean,
+		default: false
+	},
+	...themableProps()
+};
+const collapseTriggerBehavioralDefaults = { chevronIcon: "" };
+//#endregion
+//#region src/components/collapse/CollapseTrigger.vue
+var CollapseTrigger_default = defineComponent({
+	name: "VCCollapseTrigger",
+	inheritAttrs: false,
+	props: collapseTriggerProps,
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("collapseTrigger", useThemeProps(props, "chevron"), collapseTriggerThemeDefaults);
+		const defaults = useComponentDefaults("collapseTrigger", {}, collapseTriggerBehavioralDefaults);
+		const VCIcon = resolveComponent("VCIcon");
+		const hasIconComponent = typeof VCIcon !== "string";
+		return () => {
+			const chevron = props.chevron ?? "auto";
+			const { chevronIcon } = defaults.value;
+			const showChevron = !props.asChild && chevron === "auto" && !!chevronIcon && hasIconComponent;
+			return h(CollapsibleTrigger, mergeProps(attrs, {
+				as: props.as,
+				asChild: props.asChild,
+				class: theme.value.root || void 0
+			}), { default: () => [slots.default?.(), showChevron ? h(VCIcon, {
+				name: chevronIcon,
+				class: theme.value.chevron || void 0,
+				"aria-hidden": "true"
+			}) : null] });
+		};
+	}
+});
+//#endregion
+//#region src/components/collapse/CollapseContent.vue
+var CollapseContent_default = defineComponent({
+	name: "VCCollapseContent",
+	inheritAttrs: false,
+	props: {
+		/**
+		* Force the content to stay mounted while closed. Use when you need
+		* Vue/transition-group control of the unmount cascade. Reka default: `false`.
+		*/
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		/** HTML tag to render. */
+		as: {
+			type: String,
+			default: "div"
+		},
+		/** Render the consumer's slot child as the pane root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		...themableProps()
+	},
+	setup(props, { attrs, slots }) {
+		const theme = useComponentTheme("collapseContent", useThemeProps(props), collapseContentThemeDefaults);
+		return () => h(CollapsibleContent, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			forceMount: props.forceMount || void 0,
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/separator/theme.ts
+const separatorThemeDefaults = { classes: { root: "vc-separator" } };
+//#endregion
+//#region src/components/separator/Separator.vue
+var Separator_default = defineComponent({
+	name: "VCSeparator",
+	inheritAttrs: false,
+	props: {
+		/** Layout direction. */
+		orientation: {
+			type: String,
+			default: "horizontal"
+		},
+		/**
+		* When `true`, removes the separator from the a11y tree (`role="none"`).
+		* Pass `:decorative="false"` to expose it with `role="separator"` +
+		* `aria-orientation`.
+		*
+		* Vuecs convention: defaults to `true` (Reka has no explicit default
+		* — undefined falls through to `role="separator"`). Most consumer
+		* usages of `<VCSeparator>` are visual dividers, so the safer
+		* a11y default is "decorative".
+		*/
+		decorative: {
+			type: Boolean,
+			default: true
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs }) {
+		const theme = useComponentTheme("separator", props, separatorThemeDefaults);
+		return () => h(Separator, mergeProps(attrs, {
+			orientation: props.orientation,
+			decorative: props.decorative,
+			class: theme.value.root || void 0
+		}));
+	}
+});
+//#endregion
+//#region src/components/tag/theme.ts
+const tagThemeDefaults = { classes: {
+	root: "vc-tag",
+	icon: "vc-tag-icon",
+	remove: "vc-tag-remove"
+} };
+const tagsThemeDefaults = { classes: {
+	root: "vc-tags",
+	item: "vc-tags-item"
+} };
+//#endregion
+//#region src/components/tag/Tag.vue
+var Tag_default = defineComponent({
+	name: "VCTag",
+	inheritAttrs: false,
+	props: {
+		/** Bound value — emitted on remove, also used by `<VCTags>` as the chip key. */
+		value: {
+			type: [String, Number],
+			default: void 0
+		},
+		/** Display label. Default slot wins if both are passed. */
+		label: {
+			type: String,
+			default: void 0
+		},
+		/** Iconify-style icon name forwarded to the leading `icon` slot. */
+		icon: {
+			type: String,
+			default: void 0
+		},
+		/** When `true`, renders the trailing remove button. */
+		removable: {
+			type: Boolean,
+			default: false
+		},
+		/** Size variant key — resolved by the active theme. */
+		size: {
+			type: String,
+			default: void 0
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: ["remove"],
+	slots: Object,
+	setup(props, { attrs, slots, emit }) {
+		const VCIcon = resolveComponent("VCIcon");
+		const hasIconComponent = typeof VCIcon !== "string";
+		const theme = useComponentTheme("tag", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...props.themeVariant ?? {},
+					...props.size !== void 0 ? { size: props.size } : {}
+				};
+			}
+		}, tagThemeDefaults);
+		return () => {
+			const resolved = theme.value;
+			const label = props.label ?? (props.value !== void 0 ? String(props.value) : "");
+			const children = [];
+			if (props.icon || slots.icon) {
+				const iconSlot = slots.icon;
+				let iconNode;
+				if (iconSlot) iconNode = iconSlot({ class: resolved.icon });
+				else if (hasIconComponent) iconNode = [h(VCIcon, { name: props.icon })];
+				else iconNode = [props.icon];
+				children.push(h("span", { class: resolved.icon || void 0 }, iconNode));
+			}
+			children.push(slots.default ? slots.default({ label }) : [label]);
+			if (props.removable) {
+				const remove = () => emit("remove", props.value);
+				children.push(slots.remove ? slots.remove({
+					class: resolved.remove,
+					remove
+				}) : h("button", {
+					type: "button",
+					"aria-label": label ? `Remove ${label}` : "Remove",
+					class: resolved.remove || void 0,
+					onClick: (event) => {
+						event.stopPropagation();
+						remove();
+					}
+				}, "×"));
+			}
+			return h("span", mergeProps(attrs, { class: resolved.root || void 0 }), children);
+		};
+	}
+});
+//#endregion
+//#region src/components/tag/Tags.vue?vue&type=script&lang.ts
+const tagsProps = {
+	/**
+	* Items to render. Strings/numbers are coerced to `{ value, label: String(value) }`.
+	* Objects follow the `TagItem` shape (structurally compatible with `FormOption`).
+	*/
+	items: {
+		type: Array,
+		default: () => []
+	},
+	/** When `true`, every chip renders its remove button (per-item `disabled` opts out). */
+	removable: {
+		type: Boolean,
+		default: false
+	},
+	/** Default size forwarded to every chip; per-item `size` overrides. */
+	size: {
+		type: String,
+		default: void 0
+	},
+	/** Theme-class overrides for this component instance. */
+	themeClass: {
+		type: Object,
+		default: void 0
+	},
+	/** Theme-variant values for this component instance. */
+	themeVariant: {
+		type: Object,
+		default: void 0
+	}
+};
+function normalize(item) {
+	if (typeof item === "string" || typeof item === "number") return {
+		value: item,
+		label: String(item)
+	};
+	return item;
+}
+//#endregion
+//#region src/components/tag/Tags.vue
+var Tags_default = defineComponent({
+	name: "VCTags",
+	inheritAttrs: false,
+	props: tagsProps,
+	emits: ["remove"],
+	slots: Object,
+	setup(props, { attrs, slots, emit }) {
+		const theme = useComponentTheme("tags", props, tagsThemeDefaults);
+		return () => {
+			const resolved = theme.value;
+			const children = props.items.map((raw, index) => {
+				const item = normalize(raw);
+				if (slots.item) return slots.item({
+					item,
+					index,
+					class: resolved.item
+				});
+				return h(Tag_default, {
+					key: item.value,
+					value: item.value,
+					label: item.label,
+					icon: item.icon,
+					size: item.size ?? props.size,
+					removable: props.removable && !item.disabled,
+					class: resolved.item || void 0,
+					onRemove: (value) => emit("remove", value, item)
+				});
+			});
+			return h("div", mergeProps(attrs, { class: resolved.root || void 0 }), children);
+		};
+	}
+});
+//#endregion
+//#region src/components/visually-hidden/VisuallyHidden.vue
+var VisuallyHidden_default = defineComponent({
+	name: "VCVisuallyHidden",
+	inheritAttrs: false,
+	props: { 
+	/** HTML tag to render. */
+as: {
+		type: String,
+		default: "span"
+	} },
+	setup(props, { attrs, slots }) {
+		return () => h(VisuallyHidden, mergeProps(attrs, { as: props.as }), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/index.ts
+function install(app, options = {}) {
+	installThemeManager(app, options);
+	installDefaultsManager(app, options);
+	Object.entries({
+		VCSeparator: Separator_default,
+		VCTag: Tag_default,
+		VCTags: Tags_default,
+		VCAvatar: Avatar_default,
+		VCAspectRatio: AspectRatio_default,
+		VCVisuallyHidden: VisuallyHidden_default,
+		VCBadge: Badge_default,
+		VCCard: Card_default,
+		VCCardHeader: CardHeader_default,
+		VCCardTitle: CardTitle_default,
+		VCCardDescription: CardDescription_default,
+		VCCardBody: CardBody_default,
+		VCCardFooter: CardFooter_default,
+		VCCollapse: Collapse_default,
+		VCCollapseTrigger: CollapseTrigger_default,
+		VCCollapseContent: CollapseContent_default,
+		VCAlert: Alert_default,
+		VCAlertTitle: AlertTitle_default,
+		VCAlertDescription: AlertDescription_default,
+		VCAlertClose: AlertClose_default
+	}).forEach(([name, component]) => {
+		app.component(name, component);
+	});
+}
+var src_default = { install };
+//#endregion
+export { Alert_default as VCAlert, AlertClose_default as VCAlertClose, AlertDescription_default as VCAlertDescription, AlertTitle_default as VCAlertTitle, AspectRatio_default as VCAspectRatio, Avatar_default as VCAvatar, Badge_default as VCBadge, Card_default as VCCard, CardBody_default as VCCardBody, CardDescription_default as VCCardDescription, CardFooter_default as VCCardFooter, CardHeader_default as VCCardHeader, CardTitle_default as VCCardTitle, Collapse_default as VCCollapse, CollapseContent_default as VCCollapseContent, CollapseTrigger_default as VCCollapseTrigger, Separator_default as VCSeparator, Tag_default as VCTag, Tags_default as VCTags, VisuallyHidden_default as VCVisuallyHidden, alertDescriptionThemeDefaults, alertThemeDefaults, alertTitleThemeDefaults, aspectRatioThemeDefaults, avatarThemeDefaults, badgeThemeDefaults, cardBodyThemeDefaults, cardDescriptionThemeDefaults, cardFooterThemeDefaults, cardHeaderThemeDefaults, cardThemeDefaults, cardTitleThemeDefaults, collapseContentThemeDefaults, collapseThemeDefaults, collapseTriggerThemeDefaults, src_default as default, install, provideCardContext, separatorThemeDefaults, tagThemeDefaults, tagsThemeDefaults, useCardContext };
+
+//# sourceMappingURL=index.mjs.map