@astryx-vue/core 0.3.0 → 0.4.1

package/dist/Text/index.d.ts

@@ -1,3 +1,3 @@
 import { a as TextProps, c as TextType, d as TextWrap, i as TextJustify, l as TextWeight, n as TextColor, o as TextSize, r as TextDisplay, s as TextTruncateTooltip, t as TextAs, u as TextWordBreak } from "../types-Ckih2YJi.js";
-import { t as _default } from "../index-CICeEoZV.js";
+import { t as _default } from "../index-pNtfr-RW.js";
 export { _default as Text, type TextAs, type TextColor, type TextDisplay, type TextJustify, type TextProps, type TextSize, type TextTruncateTooltip, type TextType, type TextWeight, type TextWordBreak, type TextWrap };

package/dist/Text/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Text-CV3LmscH.js";
+import { t as _sfc_main } from "../Text-CmTOgYXf.js";
 export { _sfc_main as Text };

package/dist/{Text-CV3LmscH.js → Text-CmTOgYXf.js}

@@ -1,5 +1,5 @@
 import { n as useTruncation, t as truncatePlacement } from "./useTruncation-B5qXQzAP.js";
-import { t as _sfc_main$1 } from "./Tooltip-C4Vaqd3G.js";
+import { t as _sfc_main$1 } from "./Tooltip-sAM8i1eO.js";
 import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx } from "vue";
 import "../styles/text.css";
 //#region src/Text/Text.vue

package/dist/TextArea/index.d.ts

@@ -1,2 +1,2 @@
-import { Ct as TextAreaSlots, Et as TextAreaWrap, St as TextAreaSize, Tt as TextAreaStatusType, _t as TextAreaChangeAction, bt as TextAreaProps, gt as _default, vt as TextAreaChangeEvent, wt as TextAreaStatus, xt as TextAreaResize, yt as TextAreaEmits } from "../index-DUaLJO7l.js";
+import { Ct as TextAreaSlots, Et as TextAreaWrap, St as TextAreaSize, Tt as TextAreaStatusType, _t as TextAreaChangeAction, bt as TextAreaProps, gt as _default, vt as TextAreaChangeEvent, wt as TextAreaStatus, xt as TextAreaResize, yt as TextAreaEmits } from "../index-UA93Im7H.js";
 export { _default as TextArea, type TextAreaChangeAction, type TextAreaChangeEvent, type TextAreaEmits, type TextAreaProps, type TextAreaResize, type TextAreaSize, type TextAreaSlots, type TextAreaStatus, type TextAreaStatusType, type TextAreaWrap };

package/dist/TextArea/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TextArea-Ab5Sw60T.js";
+import { t as _sfc_main } from "../TextArea-CwSfEjT1.js";
 export { _sfc_main as TextArea };

package/dist/{TextArea-Ab5Sw60T.js → TextArea-CwSfEjT1.js}

@@ -1,12 +1,16 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip, r as _sfc_main$2 } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as useInputContainer } from "./useInputContainer-CpgDe2-4.js";
-import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$5 } from "./IconButton-DDNgNl7B.js";
-import { t as _sfc_main$6 } from "./FieldInfoTip-Ds-sW_jY.js";
-import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$7 } from "./Field-D5gUEGw4.js";
+import { n as useButtonTooltip, r as _sfc_main$2 } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as characterCount } from "./characters-wTnzjkkR.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
+import { t as useInputContainer } from "./useInputContainer-CLcYrby4.js";
+import { t as _sfc_main$4 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$5 } from "./FieldInfoTip-BbgLt4ug.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$6 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$7 } from "./InputClearButton-CfSIqc-V.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/text-area.css";
 //#region src/TextArea/useTextAreaAction.ts
@@ -82,7 +86,6 @@ const _hoisted_3 = [
 	"rows",
 	"cols",
 	"minlength",
-	"maxlength",
 	"wrap",
 	"autocomplete",
 	"spellcheck",
@@ -101,6 +104,7 @@ const _hoisted_5 = {
 	key: 2,
 	class: "astryx-text-area-end"
 };
+const COUNTER_WARNING_THRESHOLD = .8;
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxTextArea",
 	inheritAttrs: false,
@@ -143,7 +147,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
@@ -159,6 +192,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const ariaRequired = useAriaRequired(props);
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const counterZone = shallowRef(null);
+		const limit = computed(() => {
+			if (props.maxlength == null || props.maxlength === "") return null;
+			const parsed = Number(props.maxlength);
+			return Number.isFinite(parsed) ? parsed : null;
+		});
 		const model = useModel(__props, "modelValue");
 		const attrs = useAttrs();
 		const input = useTemplateRef("input");
@@ -178,6 +219,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emitError: (error, value, event) => emit("actionError", error, value, event)
 		});
 		const busy = computed(() => props.isLoading || action.isPending.value);
+		const valueLength = computed(() => limit.value == null ? 0 : characterCount(action.value.value));
+		const isOverLimit = computed(() => limit.value != null && valueLength.value > limit.value);
+		function announceCounter(length) {
+			const max = limit.value;
+			if (max == null) return;
+			const zone = length > max ? "over" : length >= max * COUNTER_WARNING_THRESHOLD ? "near" : "under";
+			if (zone === counterZone.value) return;
+			counterZone.value = zone;
+			if (zone === "over") announce(messages.value.textArea.charactersOverLimit(length - max), "assertive");
+			else if (zone === "near") announce(messages.value.textArea.charactersRemaining(max - length));
+		}
 		const element = computed(() => input.value ?? null);
 		function focus(options) {
 			input.value?.focus(options);
@@ -194,28 +246,31 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			blur,
 			select
 		});
-		const controlledAttrs = /* @__PURE__ */ new Set([
-			"class",
-			"style",
-			"id",
-			"value",
-			"rows",
-			"cols",
-			"disabled",
-			"readonly",
-			"autofocus",
-			"minlength",
-			"maxlength",
-			"wrap",
-			"spellcheck",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-required",
-			"aria-busy",
-			"aria-disabled"
-		]);
+		const parts = useFieldPartStyling({
+			component: "TextArea",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"value",
+				"rows",
+				"cols",
+				"disabled",
+				"readonly",
+				"autofocus",
+				"minlength",
+				"maxlength",
+				"wrap",
+				"spellcheck",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-busy",
+				"aria-disabled"
+			]
+		});
 		function inputAttrs() {
-			return Object.fromEntries(Object.entries(attrs).filter(([key]) => !controlledAttrs.has(key)));
+			return parts.forwardedAttrs();
 		}
 		function describedBy(fieldIds) {
 			return [
@@ -234,6 +289,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 			if (isComposing.value || event instanceof InputEvent && event.isComposing) return;
 			const value = input.value?.value ?? "";
+			if (limit.value != null) announceCounter(characterCount(value));
 			if (value !== action.value.value) action.commit(value, event);
 		}
 		function compositionEnd(event) {
@@ -252,6 +308,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			await nextTick();
 			focus({ preventScroll: true });
 		}
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.textInput.clear(props.label));
 		const inputContainer = useInputContainer({
 			containerRef: container,
 			inputRef: input,
@@ -262,7 +319,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				createVNode(_sfc_main$7, {
+				createVNode(_sfc_main$6, {
 					label: __props.label,
 					"input-id": inputId.value,
 					description: __props.description,
@@ -276,13 +333,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"optional-label": __props.optionalLabel,
 					"required-label": __props.requiredLabel,
 					status: __props.status,
-					"status-variant": __props.statusVariant
+					"status-variant": __props.statusVariant,
+					class: normalizeClass(unref(parts).containerClass.value),
+					style: normalizeStyle(unref(parts).containerStyle.value)
 				}, createSlots({
 					default: withCtx((field) => [createElementVNode("div", {
 						ref_key: "container",
 						ref: container,
-						class: normalizeClass(["astryx-text-area", unref(attrs).class]),
-						style: normalizeStyle(unref(attrs).style),
+						class: normalizeClass(["astryx-text-area", unref(parts).controlClass()]),
+						style: normalizeStyle(unref(parts).controlStyle()),
 						"data-size": __props.size,
 						"data-status": __props.status?.type,
 						"data-disabled": __props.isDisabled || void 0,
@@ -305,7 +364,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							rows: __props.rows,
 							cols: __props.cols,
 							minlength: __props.minlength,
-							maxlength: __props.maxlength,
 							wrap: __props.wrap,
 							autocomplete: __props.autoComplete ?? inputAttrs().autocomplete,
 							spellcheck: __props.hasSpellCheck,
@@ -314,7 +372,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"aria-disabled": showsDisabledMessage.value || void 0,
 							"aria-busy": busy.value || void 0,
 							"aria-required": unref(ariaRequired),
-							"aria-invalid": __props.status?.type === "error" ? true : inputAttrs()["aria-invalid"],
+							"aria-invalid": __props.status?.type === "error" || isOverLimit.value ? true : inputAttrs()["aria-invalid"],
 							"aria-labelledby": labelledBy(field.labelId),
 							"aria-describedby": describedBy(field.describedBy),
 							"data-autofocus": __props.hasAutoFocus || void 0,
@@ -325,29 +383,29 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							onFocus: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onTooltipPointerEnter && unref(disabledTooltip).onTooltipPointerEnter(...args)),
 							onBlur: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args))
 						}), null, 16, _hoisted_3),
-						__props.maxlength != null ? (openBlock(), createElementBlock("span", {
+						limit.value != null ? (openBlock(), createElementBlock("span", {
 							key: 1,
 							class: "astryx-text-area-count",
-							"data-over": unref(action).value.value.length > Number(__props.maxlength) || void 0
-						}, toDisplayString(unref(action).value.value.length) + " / " + toDisplayString(__props.maxlength), 9, _hoisted_4)) : createCommentVNode("v-if", true),
+							"data-over": isOverLimit.value || void 0
+						}, [isOverLimit.value ? (openBlock(), createBlock(_sfc_main$4, {
+							key: 0,
+							icon: "warning",
+							size: "sm",
+							"aria-hidden": "true"
+						})) : createCommentVNode("v-if", true), createTextVNode(toDisplayString(valueLength.value) + " / " + toDisplayString(limit.value), 1)], 8, _hoisted_4)) : createCommentVNode("v-if", true),
 						_ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true),
-						__props.hasClear && unref(action).value.value && !__props.isDisabled && !__props.isReadOnly ? (openBlock(), createBlock(_sfc_main$5, {
+						__props.hasClear && unref(action).value.value && !__props.isDisabled && !__props.isReadOnly ? (openBlock(), createBlock(_sfc_main$7, {
 							key: 3,
 							class: "astryx-text-area-clear-button",
-							variant: "ghost",
-							size: "sm",
-							label: __props.clearLabel ?? `Clear ${__props.label}`,
+							label: resolvedClearLabel.value,
 							onClick: clear
-						}, {
-							default: withCtx(() => [createVNode(_sfc_main$4, { type: "clear" })]),
-							_: 1
-						}, 8, ["label"])) : createCommentVNode("v-if", true),
+						}, null, 8, ["label"])) : createCommentVNode("v-if", true),
 						busy.value ? (openBlock(), createBlock(_sfc_main$2, {
 							key: 4,
 							class: "astryx-text-area-spinner",
 							label: __props.loadingLabel
 						}, null, 8, ["label"])) : createCommentVNode("v-if", true),
-						__props.status?.message && __props.statusVariant === "tooltip" ? (openBlock(), createBlock(_sfc_main$6, {
+						__props.status?.message && __props.statusVariant === "tooltip" ? (openBlock(), createBlock(_sfc_main$5, {
 							key: 5,
 							text: __props.status.message,
 							type: __props.status.type
@@ -372,7 +430,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"optional-label",
 					"required-label",
 					"status",
-					"status-variant"
+					"status-variant",
+					"class",
+					"style"
 				]),
 				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
 					key: 0,

package/dist/TextInput/index.d.ts

@@ -1,2 +1,2 @@
-import { ct as TextInputChangeEvent, dt as TextInputSize, ft as TextInputSlots, ht as TextInputType, lt as TextInputEmits, mt as TextInputStatusType, ot as _default, pt as TextInputStatus, st as TextInputChangeAction, ut as TextInputProps } from "../index-DUaLJO7l.js";
+import { ct as TextInputChangeEvent, dt as TextInputSize, ft as TextInputSlots, ht as TextInputType, lt as TextInputEmits, mt as TextInputStatusType, ot as _default, pt as TextInputStatus, st as TextInputChangeAction, ut as TextInputProps } from "../index-UA93Im7H.js";
 export { _default as TextInput, type TextInputChangeAction, type TextInputChangeEvent, type TextInputEmits, type TextInputProps, type TextInputSize, type TextInputSlots, type TextInputStatus, type TextInputStatusType, type TextInputType };

package/dist/TextInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TextInput-zFT1_qgI.js";
+import { t as _sfc_main } from "../TextInput-CavITage.js";
 export { _sfc_main as TextInput };

package/dist/{TextInput-zFT1_qgI.js → TextInput-CavITage.js}

@@ -1,12 +1,13 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip, r as _sfc_main$2 } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as useInputContainer } from "./useInputContainer-CpgDe2-4.js";
-import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$5 } from "./IconButton-DDNgNl7B.js";
-import { t as useInputStatusIcon } from "./useInputStatusIcon-DBOwxV4x.js";
-import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$6 } from "./Field-D5gUEGw4.js";
+import { n as useButtonTooltip, r as _sfc_main$2 } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as useInputContainer } from "./useInputContainer-CLcYrby4.js";
+import { t as useInputStatusIcon } from "./useInputStatusIcon-CWkCeMyX.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$4 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$5 } from "./InputClearButton-CfSIqc-V.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/text-input.css";
 //#region src/TextInput/useTextInputAction.ts
@@ -127,7 +128,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
@@ -143,6 +173,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const ariaRequired = useAriaRequired(props);
+		const messages = useAstryxMessages();
 		const model = useModel(__props, "modelValue");
 		const attrs = useAttrs();
 		const input = useTemplateRef("input");
@@ -178,23 +209,26 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			blur,
 			select
 		});
-		const controlledAttrs = /* @__PURE__ */ new Set([
-			"class",
-			"style",
-			"id",
-			"value",
-			"type",
-			"disabled",
-			"readonly",
-			"autofocus",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-required",
-			"aria-busy",
-			"aria-disabled"
-		]);
+		const parts = useFieldPartStyling({
+			component: "TextInput",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"value",
+				"type",
+				"disabled",
+				"readonly",
+				"autofocus",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-busy",
+				"aria-disabled"
+			]
+		});
 		function inputAttrs() {
-			return Object.fromEntries(Object.entries(attrs).filter(([key]) => !controlledAttrs.has(key)));
+			return parts.forwardedAttrs();
 		}
 		function describedBy(fieldIds) {
 			return [
@@ -231,6 +265,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			await nextTick();
 			focus({ preventScroll: true });
 		}
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.textInput.clear(props.label));
 		const { statusIcon, statusIconProps } = useInputStatusIcon({
 			status: () => props.status,
 			statusVariant: () => props.statusVariant
@@ -245,7 +280,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				createVNode(_sfc_main$6, {
+				createVNode(_sfc_main$4, {
 					label: __props.label,
 					"input-id": inputId.value,
 					description: __props.description,
@@ -259,13 +294,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"optional-label": __props.optionalLabel,
 					"required-label": __props.requiredLabel,
 					status: __props.status,
-					"status-variant": __props.statusVariant
+					"status-variant": __props.statusVariant,
+					class: normalizeClass(unref(parts).containerClass.value),
+					style: normalizeStyle(unref(parts).containerStyle.value)
 				}, createSlots({
 					default: withCtx((field) => [createElementVNode("div", {
 						ref_key: "container",
 						ref: container,
-						class: normalizeClass(["astryx-text-input", unref(attrs).class]),
-						style: normalizeStyle(unref(attrs).style),
+						class: normalizeClass(["astryx-text-input", unref(parts).controlClass()]),
+						style: normalizeStyle(unref(parts).controlStyle()),
 						"data-size": __props.size,
 						"data-status": __props.status?.type,
 						"data-disabled": __props.isDisabled || void 0,
@@ -305,15 +342,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						_ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true),
 						__props.hasClear && unref(action).value.value && !__props.isDisabled && !__props.isReadOnly ? (openBlock(), createBlock(_sfc_main$5, {
 							key: 2,
-							class: "astryx-input-clear-button",
-							variant: "ghost",
-							size: "sm",
-							label: __props.clearLabel ?? `Clear ${__props.label}`,
+							label: resolvedClearLabel.value,
 							onClick: clear
-						}, {
-							default: withCtx(() => [createVNode(_sfc_main$4, { type: "clear" })]),
-							_: 1
-						}, 8, ["label"])) : createCommentVNode("v-if", true),
+						}, null, 8, ["label"])) : createCommentVNode("v-if", true),
 						busy.value ? (openBlock(), createBlock(_sfc_main$2, {
 							key: 3,
 							class: "astryx-text-input-spinner",
@@ -340,7 +371,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"optional-label",
 					"required-label",
 					"status",
-					"status-variant"
+					"status-variant",
+					"class",
+					"style"
 				]),
 				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
 					key: 0,

package/dist/Theme/index.d.ts

@@ -1,3 +1,3 @@
-import { _ as expandRadiusScale, a as StyleOverrides, b as ColorScaleConfig, c as ThemeProps, d as ThemeTokens, f as TypographyConfig, g as RadiusScaleConfig, h as expandTypeScale, i as MediaThemeProps, l as ThemeSurfaceInput, m as TypeScaleConfig, n as DefineThemeInput, o as ThemeDefinition, p as TypographyRole, r as MediaThemeMode, s as ThemeMode, t as ComponentStyleMap, u as ThemeTokenValue, v as MotionScaleConfig, x as expandColorScale, y as expandMotionScale } from "../types-gKsEkk2g.js";
-import { a as _default$1, c as isDefinedTheme, i as useMediaTheme, l as neutralTheme, n as useTheme, o as _default, r as UseMediaThemeReturn, s as defineTheme, t as UseThemeReturn, u as normalizeTokenName } from "../index-BH9PzQ1F.js";
-export { type ColorScaleConfig, type ComponentStyleMap, type DefineThemeInput, _default as MediaTheme, type MediaThemeMode, type MediaThemeProps, type MotionScaleConfig, type RadiusScaleConfig, type StyleOverrides, _default$1 as Theme, type ThemeDefinition, type ThemeMode, type ThemeProps, type ThemeSurfaceInput, type ThemeTokenValue, type ThemeTokens, type TypeScaleConfig, type TypographyConfig, type TypographyRole, type UseMediaThemeReturn, type UseThemeReturn, defineTheme, expandColorScale, expandMotionScale, expandRadiusScale, expandTypeScale, isDefinedTheme, neutralTheme, normalizeTokenName, useMediaTheme, useTheme };
+import { A as ColorScaleConfig, C as WidthBreakpoints, D as expandRadiusScale, E as RadiusScaleConfig, O as MotionScaleConfig, S as WidthBreakpointName, T as expandTypeScale, _ as ThemeAdaptationTypographyConfig, a as StyleOverrides, b as ThemeAdaptations, c as ThemeProps, d as ThemeTokens, f as TypographyConfig, g as ThemeAdaptationRule, h as ThemeAdaptationCondition, i as MediaThemeProps, j as expandColorScale, k as expandMotionScale, l as ThemeSurfaceInput, m as DEFAULT_WIDTH_BREAKPOINTS, n as DefineThemeInput, o as ThemeDefinition, p as TypographyRole, r as MediaThemeMode, s as ThemeMode, t as ComponentStyleMap, u as ThemeTokenValue, v as ThemeAdaptationValue, w as TypeScaleConfig, x as WIDTH_BREAKPOINT_NAMES, y as ThemeAdaptationWidthCondition } from "../types-CsqwQkf1.js";
+import { a as _default$1, c as isDefinedTheme, d as DATA_TOKEN_DEFAULTS, f as DataTokenName, i as useMediaTheme, l as neutralTheme, n as useTheme, o as _default, r as UseMediaThemeReturn, s as defineTheme, t as UseThemeReturn, u as normalizeTokenName } from "../index-Bo-ofFyg.js";
+export { type ColorScaleConfig, type ComponentStyleMap, DATA_TOKEN_DEFAULTS, DEFAULT_WIDTH_BREAKPOINTS, type DataTokenName, type DefineThemeInput, _default as MediaTheme, type MediaThemeMode, type MediaThemeProps, type MotionScaleConfig, type RadiusScaleConfig, type StyleOverrides, _default$1 as Theme, type ThemeAdaptationCondition, type ThemeAdaptationRule, type ThemeAdaptationTypographyConfig, type ThemeAdaptationValue, type ThemeAdaptationWidthCondition, type ThemeAdaptations, type ThemeDefinition, type ThemeMode, type ThemeProps, type ThemeSurfaceInput, type ThemeTokenValue, type ThemeTokens, type TypeScaleConfig, type TypographyConfig, type TypographyRole, type UseMediaThemeReturn, type UseThemeReturn, WIDTH_BREAKPOINT_NAMES, type WidthBreakpointName, type WidthBreakpoints, defineTheme, expandColorScale, expandMotionScale, expandRadiusScale, expandTypeScale, isDefinedTheme, neutralTheme, normalizeTokenName, useMediaTheme, useTheme };

package/dist/Theme/index.js

@@ -1,2 +1,3 @@
-import { a as defineTheme, c as expandTypeScale, d as expandColorScale, f as normalizeTokenName, i as _sfc_main, l as expandRadiusScale, n as useMediaTheme, o as isDefinedTheme, r as _sfc_main$1, s as neutralTheme, t as useTheme, u as expandMotionScale } from "../Theme-CtaUWo4g.js";
-export { _sfc_main as MediaTheme, _sfc_main$1 as Theme, defineTheme, expandColorScale, expandMotionScale, expandRadiusScale, expandTypeScale, isDefinedTheme, neutralTheme, normalizeTokenName, useMediaTheme, useTheme };
+import { a as neutralTheme, c as expandMotionScale, d as WIDTH_BREAKPOINT_NAMES, i as isDefinedTheme, l as expandColorScale, n as _sfc_main$1, o as expandTypeScale, r as defineTheme, s as expandRadiusScale, t as useMediaTheme, u as DEFAULT_WIDTH_BREAKPOINTS } from "../Theme-BbDT8B_C.js";
+import { a as normalizeTokenName, l as DATA_TOKEN_DEFAULTS, n as useTheme, t as _sfc_main } from "../MediaTheme-DlLqYhDy.js";
+export { DATA_TOKEN_DEFAULTS, DEFAULT_WIDTH_BREAKPOINTS, _sfc_main as MediaTheme, _sfc_main$1 as Theme, WIDTH_BREAKPOINT_NAMES, defineTheme, expandColorScale, expandMotionScale, expandRadiusScale, expandTypeScale, isDefinedTheme, neutralTheme, normalizeTokenName, useMediaTheme, useTheme };