xmlui 0.10.16 → 0.10.19

package/dist/scripts/src/components/Input/PartialInput.js

@@ -36,7 +36,7 @@ const PartialInput_module_scss_1 = __importDefault(require("./PartialInput.modul
  * @returns A configured input element with enhanced multi-field input behavior
  */
 function PartialInput(_a) {
-    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
+    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, id, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "id", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
     /**
      * Process emptyCharacter according to requirements.
      * Handles null/empty values, multi-character strings, and unicode characters.
@@ -147,7 +147,7 @@ function PartialInput(_a) {
         // Call the original onKeyDown handler for other keys
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     }, [onKeyDown]);
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { "aria-label": ariaLabel, autoComplete: "off", 
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { id: id, "aria-label": ariaLabel, autoComplete: "off", 
         // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
         autoFocus: autoFocus, className: (0, classnames_1.default)(PartialInput_module_scss_1.default.partialInput, className, {
             [invalidClassName]: isInvalid,

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

@@ -34,10 +34,6 @@ exports.NumberBoxMd = (0, metadata_helpers_1.createMetadata)({
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        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),
         maxLength: (0, metadata_helpers_1.dMaxLength)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
@@ -123,5 +119,5 @@ exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
         extractedInitialValue = extractValue.asOptionalNumber(node.props.initialValue);
     }
     catch (_a) { }
-    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { className: className, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractedInitialValue, step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), spinnerUpIcon: extractValue.asOptionalString(node.props.spinnerUpIcon), spinnerDownIcon: extractValue.asOptionalString(node.props.spinnerDownIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), 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) }));
+    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { className: className, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractedInitialValue, step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), spinnerUpIcon: extractValue.asOptionalString(node.props.spinnerUpIcon), spinnerDownIcon: extractValue.asOptionalString(node.props.spinnerDownIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), required: extractValue.asOptionalBoolean(node.props.required), direction: extractValue(node.props.direction) }));
 });

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

@@ -342,6 +342,11 @@ fixtures_1.test.describe("Event Handling", () => {
         yield page.getByRole("textbox").focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
     }));
+    (0, fixtures_1.test)("gotFocus event fires on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`<NumberBox onGotFocus="testState = 'focused'" label="test" />`);
+        yield page.getByText("test").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
+    }));
     (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`<NumberBox onLostFocus="testState = 'blurred'" />`);
         const input = page.getByRole("textbox");
@@ -441,7 +446,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
         const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
+        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
     }));
     (0, fixtures_1.test)("endText displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" direction="ltr" endText="USD" />`);
@@ -455,7 +460,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
         const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
+        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
     }));
     (0, fixtures_1.test)("startIcon displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" direction="ltr" startIcon="search" />`);
@@ -467,7 +472,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         yield initTestBed(`<NumberBox testId="input" direction="rtl" startIcon="search" />`);
         const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
         const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
+        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
     }));
     (0, fixtures_1.test)("endIcon displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" endIcon="search" />`);
@@ -479,7 +484,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         yield initTestBed(`<NumberBox testId="input" direction="rtl" endIcon="search" />`);
         const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
         const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
+        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
     }));
     (0, fixtures_1.test)("multiple adornments can be combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
@@ -918,3 +923,32 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield (0, fixtures_1.expect)(input).toHaveValue("123.0");
     }));
 });
+// =============================================================================
+// 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(`<NumberBox 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(`<NumberBox 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(`<NumberBox 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(`<NumberBox 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/NumberBox/NumberBoxNative.js

@@ -58,7 +58,6 @@ const numberbox_abstractions_1 = require("./numberbox-abstractions");
 const IconNative_1 = require("../Icon/IconNative");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ButtonNative_1 = require("../Button/ButtonNative");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const parts_1 = require("../../components-core/parts");
 const PART_SPINNER_UP = "spinnerUp";
 const PART_SPINNER_DOWN = "spinnerDown";
@@ -79,7 +78,7 @@ exports.defaultProps = {
 };
 exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef) {
     var _b;
-    var { id, value, initialValue, style, className, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, hasSpinBox = exports.defaultProps.hasSpinBox, step = exports.defaultProps.step, integersOnly = exports.defaultProps.integersOnly, zeroOrPositive = exports.defaultProps.zeroOrPositive, min = zeroOrPositive ? 0 : exports.defaultProps.min, max = exports.defaultProps.max, maxLength, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, startText, startIcon, endText, endIcon, gap, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak } = _a, rest = __rest(_a, ["id", "value", "initialValue", "style", "className", "enabled", "placeholder", "validationStatus", "hasSpinBox", "step", "integersOnly", "zeroOrPositive", "min", "max", "maxLength", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "startText", "startIcon", "endText", "endIcon", "gap", "spinnerUpIcon", "spinnerDownIcon", "autoFocus", "readOnly", "required", "label", "labelPosition", "labelWidth", "labelBreak"]);
+    var { id, value, initialValue, style, className, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, hasSpinBox = exports.defaultProps.hasSpinBox, step = exports.defaultProps.step, integersOnly = exports.defaultProps.integersOnly, zeroOrPositive = exports.defaultProps.zeroOrPositive, min = zeroOrPositive ? 0 : exports.defaultProps.min, max = exports.defaultProps.max, maxLength, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, startText, startIcon, endText, endIcon, gap, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, direction } = _a, rest = __rest(_a, ["id", "value", "initialValue", "style", "className", "enabled", "placeholder", "validationStatus", "hasSpinBox", "step", "integersOnly", "zeroOrPositive", "min", "max", "maxLength", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "startText", "startIcon", "endText", "endIcon", "gap", "spinnerUpIcon", "spinnerDownIcon", "autoFocus", "readOnly", "required", "direction"]);
     const _id = (0, react_1.useId)();
     id = id || _id;
     // --- Ensure the provided value is a number or null
@@ -453,21 +452,20 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: id, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, 
-        // NOTE: This is a band-aid solution to handle the multiple IDs issue - remove after resolving focus bug
-        isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NumberBox_module_scss_1.default.inputRoot, {
-                [NumberBox_module_scss_1.default.readOnly]: readOnly,
-                [NumberBox_module_scss_1.default.disabled]: !enabled,
-                [NumberBox_module_scss_1.default.noSpinBox]: !hasSpinBox,
-                [NumberBox_module_scss_1.default.error]: validationStatus === "error",
-                [NumberBox_module_scss_1.default.warning]: validationStatus === "warning",
-                [NumberBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: () => {
-                var _a;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, {
-                        [NumberBox_module_scss_1.default.readOnly]: readOnly,
-                    }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onPaste: handleOnPaste, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SPINNER_UP, "data-spinner": "up", type: "button", role: "spinbutton", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SPINNER_DOWN, "data-spinner": "down", type: "button", role: "spinbutton", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] }) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, NumberBox_module_scss_1.default.inputRoot, {
+            [NumberBox_module_scss_1.default.readOnly]: readOnly,
+            [NumberBox_module_scss_1.default.disabled]: !enabled,
+            [NumberBox_module_scss_1.default.noSpinBox]: !hasSpinBox,
+            [NumberBox_module_scss_1.default.error]: validationStatus === "error",
+            [NumberBox_module_scss_1.default.warning]: validationStatus === "warning",
+            [NumberBox_module_scss_1.default.valid]: validationStatus === "valid",
+            [NumberBox_module_scss_1.default.rtl]: direction === "rtl",
+        }), id: id, ref: forwardedRef, tabIndex: -1, onFocus: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, style: Object.assign(Object.assign({}, style), { gap }), children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, {
+                    [NumberBox_module_scss_1.default.readOnly]: readOnly,
+                }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onPaste: handleOnPaste, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SPINNER_UP, "data-spinner": "up", type: "button", role: "spinbutton", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SPINNER_DOWN, "data-spinner": "down", type: "button", role: "spinbutton", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] })));
 });
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);

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

@@ -31,10 +31,6 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
         validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: RadioGroupNative_1.defaultProps.validationStatus }),
         orientation: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This property sets the orientation of the ` +
             `options within the radio group.`),
-        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),
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
@@ -61,5 +57,5 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, className, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { autofocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { autofocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, required: extractValue.asOptionalBoolean(node.props.required), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), children: renderChild(node.children) }));
 });

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

@@ -293,6 +293,15 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield options.nth(0).focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
     }));
+    (0, fixtures_1.test)("gotFocus event fires on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <RadioGroup initialValue="1" onGotFocus="() => testState = 'focused'" label="test">
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        yield page.getByText("test").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
+    }));
     (0, fixtures_1.test)("lostFocus event fires on blurring the field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
       <RadioGroup initialValue="1" onLostFocus="() => testState = 'blurred'">

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

@@ -55,7 +55,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
 const RadioItemNative_1 = require("./RadioItemNative");
 const OptionNative_1 = require("../Option/OptionNative");
@@ -136,10 +135,10 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRe
     const contextValue = (0, react_1.useMemo)(() => {
         return { value, setValue: updateValue, status: validationStatus, enabled };
     }, [value, updateValue, validationStatus, enabled]);
-    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, onLabelClick: focusActiveOption, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { ref: radioGroupRef, id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, required: required, "aria-readonly": readOnly, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
-                        [RadioGroup_module_scss_1.default.focused]: focused,
-                        [RadioGroup_module_scss_1.default.disabled]: !enabled,
-                    }), children: children }) })) }) }));
+    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, Object.assign({}, rest, { style: style, ref: radioGroupRef, id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, required: required, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, RadioGroup_module_scss_1.default.radioGroupContainer, {
+                    [RadioGroup_module_scss_1.default.focused]: focused,
+                    [RadioGroup_module_scss_1.default.disabled]: !enabled,
+                }), children: children })) }) }));
 });
 const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, className, }) => {
     const id = (0, react_1.useId)();

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioItemComponentRenderer = exports.RadioItemMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
+const RadioItemNative_1 = require("./RadioItemNative");
+const COMP = "RadioItem";
+exports.RadioItemMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component is a radio button that is part of a group of radio buttons.`,
+    props: {
+        checked: {
+            description: "This property specifies whether the radio button is checked.",
+            defaultValue: RadioItemNative_1.defaultProps.checked,
+        },
+        value: {
+            description: "This property specifies the value of the radio button.",
+            defaultValue: RadioItemNative_1.defaultProps.value,
+        },
+    },
+    events: {
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+});
+exports.radioItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioItemMd, ({ node, extractValue, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(RadioItemNative_1.RadioItem, { checked: extractValue(node.props.checked), value: extractValue(node.props.value), onDidChange: lookupEventHandler("didChange") }));
+});

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

@@ -31,10 +31,6 @@ exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
         readOnly: Object.assign(Object.assign({}, (0, metadata_helpers_1.dReadonly)()), { defaultValue: SelectNative_1.defaultProps.readOnly }),
         enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: SelectNative_1.defaultProps.enabled }),
         validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: SelectNative_1.defaultProps.validationStatus }),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: Object.assign(Object.assign({}, (0, metadata_helpers_1.dLabelBreak)(COMP)), { defaultValue: SelectNative_1.defaultProps.labelBreak }),
         optionLabelTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
         optionTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
         valueTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display a selected value when ` +
@@ -119,7 +115,7 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
     const searchable = extractValue.asOptionalBoolean(node.props.searchable);
     const isControlled = node.props.value !== undefined;
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: isControlled ? extractValue(node.props.value) : state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), 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), valueRenderer: node.props.valueTemplate
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: isControlled ? extractValue(node.props.value) : state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), required: extractValue.asOptionalBoolean(node.props.required), valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
                         $itemContext: { removeItem },