xmlui 0.8.0 → 0.8.2

package/dist/scripts/src/components/Accordion/Accordion.js

@@ -63,7 +63,7 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`paddingHorizontal-header-${COMP}`]: "$space-3",
         [`paddingVertical-header-${COMP}`]: "$space-3",
-        [`align-vertical-header-${COMP}`]: "center",
+        [`verticalAlign-header-${COMP}`]: "center",
         [`fontSize-header-${COMP}`]: "$fontSize-normal",
         [`fontWeight-header-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-header-${COMP}`]: "$fontFamily",

package/dist/scripts/src/components/AutoComplete/AutoComplete.js

@@ -63,14 +63,14 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
         light: {
             [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
             [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-            [`color-item-${COMP}--disabled`]: "$color-surface-200",
-            [`color-${COMP}-badge`]: "$color-surface-50",
+            [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
+            [`textColor-${COMP}-badge`]: "$color-surface-50",
         },
         dark: {
             [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-600",
             [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-            [`color-${COMP}-badge`]: "$color-surface-50",
-            [`color-item-${COMP}--disabled`]: "$color-surface-800",
+            [`textColor-${COMP}-badge`]: "$color-surface-50",
+            [`textColor-item-${COMP}--disabled`]: "$color-surface-800",
         },
     },
 });

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoComplete = void 0;
-exports.useDebounce = useDebounce;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -13,38 +12,49 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const AutoComplete_module_scss_1 = __importDefault(require("../../components/AutoComplete/AutoComplete.module.scss"));
 const IconNative_1 = __importDefault(require("../../components/Icon/IconNative"));
-const SelectNative_1 = require("../../components/Select/SelectNative");
+const SelectNative_1 = require("../Select/SelectNative");
 const OptionTypeProvider_1 = __importDefault(require("../../components/Option/OptionTypeProvider"));
-const AutoCompleteContext_1 = require("../../components/AutoComplete/AutoCompleteContext");
-const OptionContext_1 = require("../../components/Select/OptionContext");
+const AutoCompleteContext_1 = require("./AutoCompleteContext");
+const OptionContext_1 = require("../Select/OptionContext");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const react_popover_1 = require("@radix-ui/react-popover");
+const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 function defaultRenderer(item) {
     return (0, jsx_runtime_1.jsx)("div", { children: item.label });
 }
 function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
-function useDebounce(value, delay) {
-    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
-    (0, react_1.useEffect)(() => {
-        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [value, delay]);
-    return debouncedValue;
-}
-exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, optionRenderer = defaultRenderer, emptyListTemplate, style, children, autoFocus = false, dropdownHeight, multi = false, }, forwardedRef) {
+exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, optionRenderer = defaultRenderer, emptyListTemplate, style, children, autoFocus = false, dropdownHeight, multi = false, label, labelPosition, labelWidth, labelBreak, required = false, }, forwardedRef) {
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
     const dropdownRef = (0, react_1.useRef)(null); // Added this
     const [options, setOptions] = (0, react_1.useState)(new Set());
     const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const observer = (0, react_1.useRef)();
     // Set initial state based on the initialValue prop
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
             updateState({ value: initialValue || [] }, { initial: true });
         }
     }, [initialValue, updateState]);
+    // Observe the size of the reference element
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const current = referenceElement;
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (current) {
+            observer.current = new ResizeObserver(() => setWidth(current.clientWidth));
+            observer.current.observe(current);
+        }
+        return () => {
+            var _a;
+            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, [referenceElement]);
     const toggleOption = (0, react_1.useCallback)((selectedValue) => {
         if (multi) {
             setInputValue("");
@@ -142,51 +152,51 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
             inputValue,
         };
     }, [inputValue, multi, optionRenderer, options, toggleOption, value]);
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectNative_1.HiddenOption, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [children, (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, filter: (value, search, keywords) => {
-                            const extendedValue = value + " " + keywords.join(" ");
-                            if (extendedValue.toLowerCase().includes(search.toLowerCase()))
-                                return 1;
-                            return 0;
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, onClick: () => {
-                                    var _a;
-                                    if (!enabled)
-                                        return;
-                                    (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                }, style: style, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
-                                    [AutoComplete_module_scss_1.default.disabled]: !enabled,
-                                    [AutoComplete_module_scss_1.default.focused]: document.activeElement === inputRef.current,
-                                }), children: [multi ? ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: [Array.isArray(value) &&
-                                                value.map((v) => {
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectNative_1.HiddenOption, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_popover_1.Popover, { open: open, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, filter: (value, search, keywords) => {
+                                    const extendedValue = value + " " + keywords.join(" ");
+                                    if (extendedValue.toLowerCase().includes(search.toLowerCase()))
+                                        return 1;
+                                    return 0;
+                                }, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { style: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setReferenceElement, onClick: () => {
+                                                var _a;
+                                                if (!enabled)
+                                                    return;
+                                                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                            }, style: style, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                                                [AutoComplete_module_scss_1.default.disabled]: !enabled,
+                                                [AutoComplete_module_scss_1.default.focused]: document.activeElement === inputRef.current,
+                                            }), children: [multi ? ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: [Array.isArray(value) &&
+                                                            value.map((v) => {
+                                                                var _a;
+                                                                return ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                                                                event.stopPropagation();
+                                                                                toggleOption(v);
+                                                                            } })] }, v));
+                                                            }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { id: id, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
+                                                                setOpen(true);
+                                                                setInputValue(value);
+                                                            }, onFocus: () => {
+                                                                setOpen(true);
+                                                                onFocus();
+                                                            }, onBlur: () => {
+                                                                setOpen(false);
+                                                                onBlur();
+                                                            }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })] })) : ((0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { id: id, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
+                                                        setOpen(true);
+                                                        setInputValue(value);
+                                                    }, onFocus: () => {
+                                                        setOpen(true);
+                                                        onFocus();
+                                                    }, onBlur: () => {
+                                                        setOpen(false);
+                                                        onBlur();
+                                                    }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && ((0, jsx_runtime_1.jsx)("button", { onClick: (event) => {
+                                                                event.stopPropagation();
+                                                                clearValue();
+                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: AutoComplete_module_scss_1.default.commandList, onMouseUp: () => {
                                                     var _a;
-                                                    return ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                                    event.stopPropagation();
-                                                                    toggleOption(v);
-                                                                } })] }, v));
-                                                }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { id: id, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
-                                                    setOpen(true);
-                                                    setInputValue(value);
-                                                }, onFocus: (event) => {
-                                                    setOpen(true);
-                                                    onFocus();
-                                                }, onBlur: (event) => {
-                                                    setOpen(false);
-                                                    onBlur();
-                                                }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })] })) : ((0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { id: id, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
-                                            setOpen(true);
-                                            setInputValue(value);
-                                        }, onFocus: (event) => {
-                                            setOpen(true);
-                                            onFocus();
-                                        }, onBlur: (event) => {
-                                            setOpen(false);
-                                            onBlur();
-                                        }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && ((0, jsx_runtime_1.jsx)("button", { onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    clearValue();
-                                                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: "relative" }, children: open && ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: AutoComplete_module_scss_1.default.commandList, onMouseUp: () => {
-                                        var _a;
-                                        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    }, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), (0, jsx_runtime_1.jsx)(CreatableItem, {}), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords, labelText }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, labelText: labelText }, value))) })] })) })] })] }) }) }));
+                                                    (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                                }, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), (0, jsx_runtime_1.jsx)(CreatableItem, {}), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords, labelText }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, labelText: labelText }, value))) })] }) }) }))] }) }) })] }) }) }));
 });
 function CreatableItem() {
     const { value, options, inputValue, onChange } = (0, AutoCompleteContext_1.useAutoComplete)();

package/dist/scripts/src/components/Avatar/Avatar.js

@@ -37,7 +37,7 @@ exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`borderRadius-${COMP}`]: "4px",
         [`boxShadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
-        [`color-${COMP}`]: "$textColor-secondary",
+        [`textColor-${COMP}`]: "$textColor-secondary",
         [`fontWeight-${COMP}`]: "$fontWeight-bold",
         light: {
             [`border-${COMP}`]: "0px solid $color-surface-400A80",

package/dist/scripts/src/components/Badge/Badge.js

@@ -51,11 +51,11 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}-pill`]: "0.8em",
         light: {
             [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
-            [`color-${COMP}`]: "white",
+            [`textColor-${COMP}`]: "white",
         },
         dark: {
             [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
-            [`color-${COMP}`]: "$color-surface-50",
+            [`textColor-${COMP}`]: "$color-surface-50",
         },
     },
 });

package/dist/scripts/src/components/Button/Button.js

@@ -104,7 +104,7 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-${COMP}--disabled`]: "$backgroundColor--disabled",
         [`borderColor-${COMP}--disabled`]: "$borderColor--disabled",
         [`borderStyle-${COMP}`]: "solid",
-        [`color-${COMP}--disabled`]: "$textColor--disabled",
+        [`textColor-${COMP}--disabled`]: "$textColor--disabled",
         [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
         [`borderWidth-${COMP}`]: "1px",
         [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
@@ -119,8 +119,8 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingHorizontal-${COMP}-lg`]: "$space-5",
         [`paddingVertical-${COMP}-lg`]: "$space-4",
         light: {
-            [`color-${COMP}`]: "$color-surface-950",
-            [`color-${COMP}-solid`]: "$color-surface-50",
+            [`textColor-${COMP}`]: "$color-surface-950",
+            [`textColor-${COMP}-solid`]: "$color-surface-50",
             [`borderColor-${COMP}-primary`]: "$color-primary-500",
             [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-400",
             [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
@@ -128,9 +128,9 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
             [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
             [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
             [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-            [`color-${COMP}-primary-outlined`]: "$color-primary-900",
-            [`color-${COMP}-primary-outlined--hover`]: "$color-primary-950",
-            [`color-${COMP}-primary-outlined--active`]: "$color-primary-900",
+            [`textColor-${COMP}-primary-outlined`]: "$color-primary-900",
+            [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-950",
+            [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-900",
             [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-50",
             [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-100",
             [`borderColor-${COMP}-secondary`]: "$color-secondary-100",
@@ -149,8 +149,8 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
             [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-100",
         },
         dark: {
-            [`color-${COMP}`]: "$color-surface-50",
-            [`color-${COMP}-solid`]: "$color-surface-50",
+            [`textColor-${COMP}`]: "$color-surface-50",
+            [`textColor-${COMP}-solid`]: "$color-surface-50",
             [`borderColor-${COMP}-primary`]: "$color-primary-500",
             [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-600",
             [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
@@ -158,9 +158,9 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
             [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-950",
             [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
             [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-            [`color-${COMP}-primary-outlined`]: "$color-primary-100",
-            [`color-${COMP}-primary-outlined--hover`]: "$color-primary-50",
-            [`color-${COMP}-primary-outlined--active`]: "$color-primary-100",
+            [`textColor-${COMP}-primary-outlined`]: "$color-primary-100",
+            [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
+            [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
             [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-900",
             [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-950",
             [`borderColor-${COMP}-secondary`]: "$color-secondary-500",

package/dist/scripts/src/components/Carousel/Carousel.js

@@ -95,19 +95,19 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
     },
     defaultThemeVars: {
         [`backgroundColor-control-${COMP}`]: "$color-primary",
-        [`color-control-${COMP}`]: "$textColor",
+        [`textColor-control-${COMP}`]: "$textColor",
         [`backgroundColor-control-hover-${COMP}`]: "$color-primary",
-        [`color-control-hover-${COMP}`]: "$textColor",
+        [`textColor-control-hover-${COMP}`]: "$textColor",
         [`backgroundColor-control-active-${COMP}`]: "$color-primary",
         [`backgroundColor-control-disabled-${COMP}`]: "$color-surface-200",
-        [`color-control-disabled-${COMP}`]: "$textColor-disabled",
-        [`color-control-active-${COMP}`]: "$color-primary",
+        [`textColor-control-disabled-${COMP}`]: "$textColor-disabled",
+        [`textColor-control-active-${COMP}`]: "$color-primary",
         [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
         [`backgroundColor-indicator-active-${COMP}`]: "$color-primary",
-        [`color-indicator-${COMP}`]: "$color-primary",
-        [`color-indicator-active-${COMP}`]: "$color-primary",
+        [`textColor-indicator-${COMP}`]: "$color-primary",
+        [`textColor-indicator-active-${COMP}`]: "$color-primary",
         [`backgroundColor-indicator-hover-${COMP}`]: "$color-surface-200",
-        [`color-indicator-hover-${COMP}`]: "$color-primary",
+        [`textColor-indicator-hover-${COMP}`]: "$color-primary",
         [`width-indicator-${COMP}`]: "25px",
         [`height-indicator-${COMP}`]: "6px",
         [`height-control-${COMP}`]: "36px",

package/dist/scripts/src/components/DatePicker/DatePicker.js

@@ -110,7 +110,7 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
-        [`color-value-${COMP}`]: "$textColor-primary",
+        [`textColor-value-${COMP}`]: "$textColor-primary",
         light: {
             [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
             [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZone.js

@@ -41,7 +41,7 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
         "backgroundColor-FileUploadDropZone": "$backgroundColor",
         "backgroundColor-dropping-FileUploadDropZone": "$backgroundColor--selected",
         "opacity-dropping-FileUploadDropZone": "0.5",
-        "color-FileUploadDropZone": "$textColor",
+        "textColor-FileUploadDropZone": "$textColor",
         light: {
         // --- No light-specific theme vars
         },

package/dist/scripts/src/components/Footer/Footer.js

@@ -16,9 +16,9 @@ exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Footer_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
-        [`align-vertical-${COMP}`]: "center",
+        [`verticalAlign-${COMP}`]: "center",
         [`fontSize-${COMP}`]: "$fontSize-small",
-        [`color-${COMP}`]: "$textColor-secondary",
+        [`textColor-${COMP}`]: "$textColor-secondary",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`border-${COMP}`]: `1px solid $borderColor`,
         [`padding-${COMP}`]: "$space-2 $space-4",

package/dist/scripts/src/components/Form/Form.js

@@ -105,10 +105,10 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             "color-accent-ValidationDisplay-warning": "$color-warning",
             "color-accent-ValidationDisplay-info": "$color-info",
             "color-accent-ValidationDisplay-valid": "$color-valid",
-            "color-ValidationDisplay-error": "$color-error",
-            "color-ValidationDisplay-warning": "$color-warning",
-            "color-ValidationDisplay-info": "$color-info",
-            "color-ValidationDisplay-valid": "$color-valid",
+            "textColor-ValidationDisplay-error": "$color-error",
+            "textColor-ValidationDisplay-warning": "$color-warning",
+            "textColor-ValidationDisplay-info": "$color-info",
+            "textColor-ValidationDisplay-valid": "$color-valid",
         },
         dark: {
             "backgroundColor-ValidationDisplay-error": "$color-danger-900",
@@ -119,10 +119,10 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             "color-accent-ValidationDisplay-warning": "$color-warn-700",
             "color-accent-ValidationDisplay-info": "$color-surface-200",
             "color-accent-ValidationDisplay-valid": "$color-success-600",
-            "color-ValidationDisplay-error": "$color-danger-500",
-            "color-ValidationDisplay-warning": "$color-warn-700",
-            "color-ValidationDisplay-info": "$color-secondary-200",
-            "color-ValidationDisplay-valid": "$color-success-600",
+            "textColor-ValidationDisplay-error": "$color-danger-500",
+            "textColor-ValidationDisplay-warning": "$color-warn-700",
+            "textColor-ValidationDisplay-info": "$color-secondary-200",
+            "textColor-ValidationDisplay-valid": "$color-success-600",
         },
     },
 });

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -164,12 +164,12 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        "color-FormItemLabel": "$textColor-primary",
+        "textColor-FormItemLabel": "$textColor-primary",
         "fontSize-FormItemLabel": "$fontSize-small",
         "fontWeight-FormItemLabel": "$fontWeight-medium",
         "font-style-FormItemLabel": "normal",
         "textTransform-FormItemLabel": "none",
-        "color-FormItemLabel-requiredMark": "$color-danger-400",
+        "textColor-FormItemLabel-requiredMark": "$color-danger-400",
     },
 });
 exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormItemMd, ({ node, renderChild, extractValue, layoutCss, layoutContext, lookupEventHandler, lookupAction, registerComponentApi, }) => {

package/dist/scripts/src/components/Heading/Heading.js

@@ -59,7 +59,7 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`fontFamily-${COMP}`]: "$fontFamily",
-        [`color-${COMP}`]: "inherit",
+        [`textColor-${COMP}`]: "inherit",
         [`fontWeight-${COMP}`]: "$fontWeight-bold",
         [`letterSpacing-${COMP} `]: "0",
         light: {

package/dist/scripts/src/components/HtmlTags/HtmlTags.js

@@ -1291,7 +1291,7 @@ exports.HtmlTheadMd = (0, ComponentDefs_1.createMetadata)({
         "textTransform-HtmlThead": "uppercase",
         light: {
             "backgroundColor-HtmlThead": "$color-surface-100",
-            "color-HtmlThead": "$color-surface-500",
+            "textColor-HtmlThead": "$color-surface-500",
         },
         dark: {
             "backgroundColor-HtmlThead": "$color-surface-950",

package/dist/scripts/src/components/Link/Link.js

@@ -40,7 +40,7 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     },
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
-        [`color-${COMP}--hover--active`]: `$color-${COMP}--active`,
+        [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
         [`textDecorationColor-${COMP}--hover`]: "$color-surface-400A80",
         [`textDecorationColor-${COMP}--active`]: "$color-surface200",
         [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
@@ -57,12 +57,12 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
         [`gap-icon-${COMP}`]: "$gap-tight",
         [`padding-icon-${COMP}`]: "$space-0_5",
         light: {
-            [`color-${COMP}`]: "$color-primary-500",
-            [`color-${COMP}--active`]: "$color-primary-500",
+            [`textColor-${COMP}`]: "$color-primary-500",
+            [`textColor-${COMP}--active`]: "$color-primary-500",
         },
         dark: {
-            [`color-${COMP}`]: "$color-primary-500",
-            [`color-${COMP}--active`]: "$color-primary-500",
+            [`textColor-${COMP}`]: "$color-primary-500",
+            [`textColor-${COMP}--active`]: "$color-primary-500",
         },
     },
 });

package/dist/scripts/src/components/ModalDialog/ModalDialog.js

@@ -51,7 +51,7 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`color-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`textColor-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
             [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
         } }),
 });

package/dist/scripts/src/components/NavLink/NavLink.js

@@ -65,7 +65,7 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-${COMP}`]: "$fontFamily",
-        [`color-${COMP}`]: "$textColor-primary",
+        [`textColor-${COMP}`]: "$textColor-primary",
         [`fontWeight-${COMP}--pressed`]: "$fontWeight-normal",
         [`thickness-indicator-${COMP}`]: "$space-0_5",
         [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",

package/dist/scripts/src/components/RadioGroup/RadioGroup.js

@@ -46,9 +46,9 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
         [`fontSize-${RGOption}`]: "$fontSize-small",
         [`fontWeight-${RGOption}`]: "$fontWeight-bold",
-        [`color-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`color-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`color-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
+        [`textColor-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`textColor-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`textColor-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
         light: {
             [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
             [`borderColor-${RGOption}-default`]: "$color-surface-500",

package/dist/scripts/src/components/Select/Select.js

@@ -72,14 +72,14 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         light: {
             [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
             [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-            [`color-item-${COMP}--disabled`]: "$color-surface-200",
-            [`color-${COMP}-badge`]: "$color-surface-50",
+            [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
+            [`textColor-${COMP}-badge`]: "$color-surface-50",
         },
         dark: {
             [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-600",
             [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-            [`color-${COMP}-badge`]: "$color-surface-50",
-            [`color-item-${COMP}--disabled`]: "$color-surface-800",
+            [`textColor-${COMP}-badge`]: "$color-surface-50",
+            [`textColor-item-${COMP}--disabled`]: "$color-surface-800",
         },
     },
 });

package/dist/scripts/src/components/Table/Table.js

@@ -115,14 +115,14 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-selected-${COMP}--hover`]: `$backgroundColor-row-${COMP}--hover`,
         [`backgroundColor-pagination-${COMP}`]: `$backgroundColor-${COMP}`,
         [`outlineColor-heading-${COMP}--focus`]: "$outlineColor--focus",
-        [`color-pagination-${COMP}`]: "$color-secondary",
+        [`textColor-pagination-${COMP}`]: "$color-secondary",
         light: {
             [`backgroundColor-row-${COMP}--hover`]: "$color-primary-50",
             [`backgroundColor-selected-${COMP}`]: "$color-primary-100",
             [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-200",
             [`backgroundColor-heading-${COMP}--active`]: "$color-surface-300",
             [`backgroundColor-heading-${COMP}`]: "$color-surface-100",
-            [`color-heading-${COMP}`]: "$color-surface-500",
+            [`textColor-heading-${COMP}`]: "$color-surface-500",
         },
         dark: {
             [`backgroundColor-row-${COMP}--hover`]: "$color-primary-900",

package/dist/scripts/src/components/TableOfContents/TableOfContents.js

@@ -60,21 +60,21 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`marginBottom-${COMP}`]: "0",
         [`borderRadius-${COMP}`]: "0",
         [`border-width-${COMP}`]: "0",
-        [`border-color-${COMP}`]: "transparent",
+        [`borderColor-${COMP}`]: "transparent",
         [`border-style-${COMP}`]: "solid",
         [`textTransform-${COMP}Item`]: "none",
-        [`align-vertical-${COMP}Item`]: "baseline",
+        [`verticalAlign-${COMP}Item`]: "baseline",
         [`letterSpacing-${COMP}Item`]: "0",
         light: {
             [`color-${COMP}Item`]: "$textColor-primary",
-            [`border-color-${COMP}Item`]: "$borderColor",
-            [`border-color-${COMP}Item--active`]: "$color-primary-500",
+            [`borderColor-${COMP}Item`]: "$borderColor",
+            [`borderColor-${COMP}Item--active`]: "$color-primary-500",
             [`color-${COMP}Item--active`]: "$color-primary-500",
         },
         dark: {
             [`color-${COMP}Item`]: "$textColor-primary",
-            [`border-color-${COMP}Item`]: "$borderColor",
-            [`border-color-${COMP}Item--active`]: "$color-primary-500",
+            [`borderColor-${COMP}Item`]: "$borderColor",
+            [`borderColor-${COMP}Item--active`]: "$color-primary-500",
             [`color-${COMP}Item--active`]: "$textColor-secondary",
         },
     },

package/dist/scripts/src/components/Tabs/Tabs.js

@@ -43,12 +43,12 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
         light: {
             [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-50",
             [`backgroundColor-list-${COMP}`]: "$color-primary-50",
-            [`color-trigge-r${COMP}`]: "$color-primary-100",
+            [`textColor-trigger-${COMP}`]: "$color-primary-100",
         },
         dark: {
             [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-800",
             [`backgroundColor-list-${COMP}`]: "$color-primary-800",
-            [`color-trigge-r${COMP}`]: "$color-primary-100",
+            [`textColor-trigger-${COMP}`]: "$color-primary-100",
         },
     },
 });

package/dist/scripts/src/components/Text/Text.js

@@ -60,7 +60,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`textTransform-${COMP}-abbr`]: "uppercase",
         [`fontSize-${COMP}-secondary`]: "$fontSize-small",
         [`font-style-${COMP}-cite`]: "italic",
-        [`color-${COMP}`]: "$textColor-primary",
+        [`textColor-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
@@ -77,9 +77,9 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-sample`]: "$fontSize-small",
         [`fontSize-${COMP}-sup`]: "$fontSize-smaller",
-        [`align-vertical-${COMP}-sup`]: "super",
+        [`verticalAlign-${COMP}-sup`]: "super",
         [`fontSize-${COMP}-sub`]: "$fontSize-smaller",
-        [`align-vertical-${COMP}-sub`]: "sub",
+        [`verticalAlign-${COMP}-sub`]: "sub",
         [`font-style-${COMP}-var`]: "italic",
         [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-title`]: "$fontSize-large",

package/dist/scripts/src/components/TextBox/TextBox.js

@@ -47,14 +47,14 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         // TODO: When FormItem is themed, move these defaults there
         "borderRadius-Input": "$borderRadius",
-        "color-Input": "$textColor-primary",
+        "textColor-Input": "$textColor-primary",
         "backgroundColor-Input--disabled": "$backgroundColor--disabled",
         "borderWidth-Input": "1px",
         "minHeight-Input": "39px",
         "padding-Input": "$space-2",
         "borderStyle-Input": "solid",
         "borderColor-Input--disabled": "$borderColor--disabled",
-        "color-Input--disabled": "$textColor--disabled",
+        "textColor-Input--disabled": "$textColor--disabled",
         "borderColor-Input-error": "$borderColor-Input-default--error",
         "borderColor-Input-warning": "$borderColor-Input-default--warning",
         "borderColor-Input-success": "$borderColor-Input-default--success",