xmlui 0.10.16 → 0.10.19

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.16",
+    "version": "0.10.19",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -66,7 +66,7 @@ const CODE = `
     const content = page.getByText("Content");
     yield (0, fixtures_1.expect)(content).not.toBeVisible();
     yield header.focus();
-    page.keyboard.press("Enter");
+    yield page.keyboard.press("Enter");
     yield (0, fixtures_1.expect)(content).toBeVisible();
 }));
 // =============================================================================

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

@@ -68,7 +68,7 @@ exports.AccordionItemComponent = (0, react_1.forwardRef)(function AccordionItemC
     const itemId = (0, react_1.useMemo)(() => (id ? `${id}` : generatedId), [id, generatedId]);
     const triggerId = (0, react_1.useMemo)(() => `trigger_${itemId}`, [itemId]);
     const { rotateExpanded, expandedItems, hideIcon, expandedIcon, collapsedIcon, triggerPosition, expandItem, register, unRegister, } = (0, AccordionContext_1.useAccordionContext)();
-    const expanded = (0, react_1.useMemo)(() => expandedItems.includes(itemId), [itemId, expandedItems]);
+    const expanded = (0, react_1.useMemo)(() => (expandedItems !== null && expandedItems !== void 0 ? expandedItems : []).includes(itemId), [itemId, expandedItems]);
     const [initialised, setInitialised] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (!initialised) {

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

@@ -257,6 +257,29 @@ const fixtures_1 = require("../../testing/fixtures");
     yield page.keyboard.press("Tab");
     yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
 }));
+(0, fixtures_1.test)("gotFocus and lostFocus events by clicking on label work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`
+    <App var.isFocused="false">
+      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
+      <AutoComplete
+        id="autoComplete"
+        label="Select a hero"
+        onGotFocus="isFocused = true"
+        onLostFocus="isFocused = false"
+      >
+        <Option value="1" label="Bruce Wayne" />
+      </AutoComplete>
+    </App>
+  `);
+    // Initial state
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
+    // Focus the autocomplete
+    yield page.getByText("Select a hero").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete focused");
+    // Blur the autocomplete
+    yield page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
+}));
 (0, fixtures_1.test)("setValue API works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
     <App>
@@ -334,10 +357,8 @@ const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // ACCESSIBILITY TESTS
 // =============================================================================
-(0, fixtures_1.test)("has appropriate ARIA attributes", // SKIP_REASON.XMLUI_BUG(
-//   "There's a weird issue where the aria-expanded attribute is not set correctly on the input but it is on the wrapping div.",
-// ),
-(_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("has appropriate ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    // ), //   "There's a weird issue where the aria-expanded attribute is not set correctly on the input but it is on the wrapping div.", // SKIP_REASON.XMLUI_BUG(
     // TODO: review these Copilot-created tests
     yield initTestBed(`
     <AutoComplete label="Select a hero" placeholder="Search heroes">
@@ -381,3 +402,32 @@ const fixtures_1 = require("../../testing/fixtures");
     // Verify selection
     yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Clark Kent");
 }));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<AutoComplete width="200px" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<AutoComplete width="200px" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<AutoComplete width="50%" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<AutoComplete width="50%" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));

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

@@ -49,18 +49,15 @@ exports.defaultProps = {
     initiallyOpen: false,
 };
 exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forwardedRef) {
-    var { id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onItemCreated = exports.defaultProps.onItemCreated, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "onItemCreated", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "label", "labelPosition", "labelWidth", "labelBreak", "required", "creatable", "optionRenderer", "initiallyOpen"]);
+    var { id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onItemCreated = exports.defaultProps.onItemCreated, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "onItemCreated", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "required", "creatable", "optionRenderer", "initiallyOpen"]);
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(initiallyOpen);
-    const dropdownRef = (0, react_1.useRef)(null);
     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)();
-    const generatedId = (0, react_1.useId)();
-    const inputId = id || generatedId;
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
@@ -229,8 +226,8 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                 var _a, _b;
                 if (item.type === "creatable")
                     return false;
-                return ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === inputValue.toLowerCase() ||
-                    ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === inputValue.toLowerCase();
+                return (((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === inputValue.toLowerCase() ||
+                    ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === inputValue.toLowerCase());
             });
             if (matchingIndex !== -1) {
                 setSelectedIndex(matchingIndex);
@@ -298,7 +295,18 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                 setOpen(false);
                 break;
         }
-    }, [open, selectedIndex, allItems, searchTerm, onOptionAdd, onItemCreated, toggleOption, setOpen, findNextEnabledIndex, findPreviousEnabledIndex]);
+    }, [
+        open,
+        selectedIndex,
+        allItems,
+        searchTerm,
+        onOptionAdd,
+        onItemCreated,
+        toggleOption,
+        setOpen,
+        findNextEnabledIndex,
+        findPreviousEnabledIndex,
+    ]);
     // Render the "empty list" message
     const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.autoCompleteEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
     // Register component API for external interactions
@@ -332,8 +340,19 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
             setSelectedIndex,
             optionRenderer,
         };
-    }, [inputValue, searchTerm, multi, options, toggleOption, value, open, setOpen, setSelectedIndex, optionRenderer]);
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsx)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
+    }, [
+        inputValue,
+        searchTerm,
+        multi,
+        options,
+        toggleOption,
+        value,
+        open,
+        setOpen,
+        setSelectedIndex,
+        optionRenderer,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
                             if (readOnly)
                                 return;
                             setOpen(isOpen);
@@ -341,62 +360,62 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                 // Reset highlighted option when dropdown closes
                                 setSelectedIndex(-1);
                             }
-                        }, modal: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: forwardedRef, "data-part-id": PART_LIST_WRAPPER, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, 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]: isFocused,
-                                        }), "aria-expanded": open, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                toggleOption(v.value);
-                                                            } }))] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.inputWrapper, children: [(0, jsx_runtime_1.jsx)("input", { role: "combobox", id: inputId, onFocus: (ev) => {
-                                                            setIsFocused(true);
-                                                            onFocus(ev);
-                                                        }, onBlur: (ev) => {
-                                                            if (inputValue === "" && !multi) {
-                                                                clearValue();
+                        }, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", { style: style, "data-part-id": PART_LIST_WRAPPER, className: (0, classnames_1.default)(className, 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]: isFocused,
+                                    }), "aria-expanded": open, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            toggleOption(v.value);
+                                                        } }))] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.inputWrapper, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { role: "combobox", id: id, ref: inputRef, onFocus: (ev) => {
+                                                        setIsFocused(true);
+                                                        onFocus(ev);
+                                                    }, onBlur: (ev) => {
+                                                        if (inputValue === "" && !multi) {
+                                                            clearValue();
+                                                        }
+                                                        else {
+                                                            if (!Array.isArray(selectedValue) && selectedValue) {
+                                                                setInputValue(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label);
                                                             }
                                                             else {
-                                                                if (!Array.isArray(selectedValue) && selectedValue) {
-                                                                    setInputValue(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label);
-                                                                }
-                                                                else {
-                                                                    setInputValue("");
-                                                                }
-                                                            }
-                                                            onBlur(ev);
-                                                            setIsFocused(false);
-                                                        }, onKeyDown: (event) => {
-                                                            if (readOnly)
-                                                                return;
-                                                            // Handle opening dropdown
-                                                            if (event.key === "ArrowDown" && !open) {
-                                                                setOpen(true);
-                                                                return;
-                                                            }
-                                                            // Handle keyboard navigation when dropdown is open
-                                                            if (open) {
-                                                                handleKeyDown(event);
+                                                                setInputValue("");
                                                             }
-                                                            else if (event.key === "Enter") {
-                                                                setOpen(true);
-                                                            }
-                                                        }, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-autocomplete": "list", ref: inputRef, value: inputValue, disabled: !enabled, onChange: (event) => {
+                                                        }
+                                                        onBlur(ev);
+                                                        setIsFocused(false);
+                                                    }, onKeyDown: (event) => {
+                                                        if (readOnly)
+                                                            return;
+                                                        // Handle opening dropdown
+                                                        if (event.key === "ArrowDown" && !open) {
+                                                            setOpen(true);
+                                                            return;
+                                                        }
+                                                        // Handle keyboard navigation when dropdown is open
+                                                        if (open) {
+                                                            handleKeyDown(event);
+                                                        }
+                                                        else if (event.key === "Enter") {
                                                             setOpen(true);
-                                                            setInputValue(event.target.value);
-                                                            setSearchTerm(event.target.value);
-                                                        }, placeholder: !readOnly ? 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 && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: (event) => {
-                                                                    event.stopPropagation();
-                                                                    clearValue();
-                                                                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: () => {
-                                                                    var _a;
-                                                                    if (readOnly)
-                                                                        return;
-                                                                    setOpen(!open);
-                                                                    // Focus the input after opening dropdown
-                                                                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                                                }, 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, { style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)("div", { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [filteredOptions.length === 0 && !shouldShowCreatable && ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode })), shouldShowCreatable && ((0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated, isHighlighted: selectedIndex === 0 })), (0, jsx_runtime_1.jsx)("div", { children: filteredOptions.map(({ value, label, enabled, keywords }, index) => {
-                                                        const itemIndex = shouldShowCreatable ? index + 1 : index;
-                                                        return ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly, isHighlighted: selectedIndex === itemIndex, itemIndex: itemIndex }, value));
-                                                    }) })] }) }) }))] }) }), children] }) }) }));
+                                                        }
+                                                    }, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-autocomplete": "list", value: inputValue, disabled: !enabled, onChange: (event) => {
+                                                        setOpen(true);
+                                                        setInputValue(event.target.value);
+                                                        setSearchTerm(event.target.value);
+                                                    }, placeholder: !readOnly ? 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 && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: (event) => {
+                                                                event.stopPropagation();
+                                                                clearValue();
+                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: () => {
+                                                                var _a;
+                                                                if (readOnly)
+                                                                    return;
+                                                                setOpen(!open);
+                                                                // Focus the input after opening dropdown
+                                                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                                            }, 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, { style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)("div", { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [filteredOptions.length === 0 && !shouldShowCreatable && ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode })), shouldShowCreatable && ((0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated, isHighlighted: selectedIndex === 0 })), (0, jsx_runtime_1.jsx)("div", { children: filteredOptions.map(({ value, label, enabled, keywords }, index) => {
+                                                    const itemIndex = shouldShowCreatable ? index + 1 : index;
+                                                    return ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly, isHighlighted: selectedIndex === itemIndex, itemIndex: itemIndex }, value));
+                                                }) })] }) }) }))] }), children] }) }) }));
 });
 function CreatableItem({ onNewItem, isHighlighted = false }) {
     const { value, options, searchTerm, onChange, setOpen, setSelectedIndex } = (0, AutoCompleteContext_1.useAutoComplete)();
@@ -432,7 +451,7 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
 function AutoCompleteOption(option) {
     const { value, label, enabled = true, keywords, readOnly, children, isHighlighted = false, itemIndex, } = option;
     const id = (0, react_1.useId)();
-    const { value: selectedValue, onChange, multi, setOpen, setSelectedIndex, optionRenderer } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { value: selectedValue, onChange, multi, setOpen, setSelectedIndex, optionRenderer, } = (0, AutoCompleteContext_1.useAutoComplete)();
     const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
     const handleClick = () => {
         if (!readOnly && enabled) {

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

@@ -28,10 +28,6 @@ exports.CheckboxMd = (0, metadata_helpers_1.createMetadata)({
     },
     props: {
         indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)(exports.defaultProps.labelPosition),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -81,5 +77,5 @@ exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const inputTemplate = node.props.inputTemplate;
     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
-            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, exports.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
+            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, exports.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
 });

package/dist/scripts/src/components/Checkbox/Checkbox.spec.js

@@ -503,6 +503,11 @@ fixtures_1.test.describe("Event Handling", () => {
         yield page.getByRole("checkbox").focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
     }));
+    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`<Checkbox onGotFocus="testState = 'focused'" label="test" />`);
+        yield page.getByText("test").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
     (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`<Checkbox onLostFocus="testState = 'blurred'" />`);
         yield page.getByRole("checkbox").focus();

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

@@ -16,10 +16,6 @@ exports.ColorPickerMd = (0, metadata_helpers_1.createMetadata)({
     description: "`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)(),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
@@ -51,8 +47,8 @@ exports.ColorPickerMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(ColorPicker_module_scss_1.default.themeVars),
 });
 exports.colorPickerComponentRenderer = (0, renderers_1.createComponentRenderer)("ColorPicker", exports.ColorPickerMd, ({ node, extractValue, className, state, lookupEventHandler, registerComponentApi, updateState, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d;
     const readOnly = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.readOnly, false);
     const enabled = extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.enabled, true);
-    return ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, { validationStatus: extractValue(node.props.validationStatus), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, required: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.required), enabled: enabled && !readOnly, readOnly: readOnly, autoFocus: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoFocus), label: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.label), labelPosition: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.labelPosition), labelBreak: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.labelBreak), labelWidth: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.labelWidth) }));
+    return ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, { validationStatus: extractValue(node.props.validationStatus), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, required: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.required), enabled: enabled && !readOnly, readOnly: readOnly, autoFocus: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoFocus) }));
 });

package/dist/scripts/src/components/ColorPicker/ColorPicker.spec.js

@@ -281,3 +281,32 @@ const fixtures_1 = require("../../testing/fixtures");
     // Verify the focus event fired
     yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
 }));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker width="200px" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker width="200px" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<ColorPicker width="50%" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<ColorPicker width="50%" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));

package/dist/scripts/src/components/ColorPicker/ColorPickerNative.js

@@ -18,11 +18,12 @@ exports.ColorPicker = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const parts_1 = require("../../components-core/parts");
 exports.defaultProps = {
     initialValue: "#000000",
     value: "#000000",
@@ -30,9 +31,10 @@ exports.defaultProps = {
     validationStatus: "none",
 };
 exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, readOnly, value = exports.defaultProps.value, autoFocus, tabIndex = 0, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "readOnly", "value", "autoFocus", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "validationStatus", "initialValue"]);
-    const inputRef = (0, react_2.useRef)(null);
+    var { id, style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, readOnly, value = exports.defaultProps.value, autoFocus, tabIndex = 0, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["id", "style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "readOnly", "value", "autoFocus", "tabIndex", "required", "validationStatus", "initialValue"]);
     const [isPending, startTransition] = (0, react_1.useTransition)();
+    const inputRef = (0, react_2.useRef)(null);
+    const composedRef = forwardedRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, inputRef) : inputRef;
     const updateValue = (0, react_2.useCallback)((value) => {
         updateState({ value });
         onDidChange(value);
@@ -73,11 +75,12 @@ exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)(ColorPicker_module_scss_1.default.colorInput, {
-                [ColorPicker_module_scss_1.default.disabled]: !enabled,
-                [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
-                [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
-                [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
-            }), disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: inputRef, value: value }) })));
+    { /* Produces a 7 character RGB color output in hex as a string type */ }
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { id: id, className: (0, classnames_1.default)(className, ColorPicker_module_scss_1.default.colorInput, {
+            [ColorPicker_module_scss_1.default.disabled]: !enabled,
+            [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
+            [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
+            [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
+        }), "data-part-id": parts_1.PART_INPUT, style: style, disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: composedRef, value: value })));
 });
 exports.ColorPicker.displayName = "ColorPicker";

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

@@ -53,6 +53,7 @@ const Footer_1 = require("./Footer/Footer");
 const NavGroup_1 = require("./NavGroup/NavGroup");
 const Logo_1 = require("./Logo/Logo");
 const RadioGroup_1 = require("./RadioGroup/RadioGroup");
+const RadioItem_1 = require("./RadioGroup/RadioItem");
 const Slot_1 = require("./Slot/Slot");
 const FileInput_1 = require("./FileInput/FileInput");
 const Spinner_1 = require("./Spinner/Spinner");
@@ -412,6 +413,7 @@ class ComponentRegistry {
             this.registerCoreComponent(NumberBox_1.numberBoxComponentRenderer);
             this.registerCoreComponent(HoverCard_1.hoverCardComponentRenderer);
             this.registerCoreComponent(RadioGroup_1.radioGroupRenderer);
+            this.registerCoreComponent(RadioItem_1.radioItemComponentRenderer);
             this.registerCoreComponent(FileInput_1.fileInputRenderer);
             this.registerCoreComponent(Spinner_1.spinnerComponentRenderer);
             this.registerCoreComponent(Select_1.selectComponentRenderer);

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

@@ -36,10 +36,6 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(DateInputNative_1.defaultProps.enabled),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(DateInputNative_1.defaultProps.validationStatus),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         mode: {
             description: "The mode of the date input (single or range)",
             valueType: "string",
@@ -197,5 +193,5 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.dateInputComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DateInputMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue.asOptionalString(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
+    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
 });