xmlui 0.10.15 → 0.10.18

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,13 +78,15 @@ 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
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
     // Step must be an integer since floating point arithmetic needs a deeper dive.
+    // probably some way to integrate with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+    // since there are footguns, like 0.1 + 0.2 = 0.0000...04
     const _step = (_b = (0, numberbox_abstractions_1.toUsableNumber)(step, true)) !== null && _b !== void 0 ? _b : numberbox_abstractions_1.DEFAULT_STEP;
     const inputRef = (0, react_1.useRef)(null);
     const upButton = (0, react_1.useRef)(null);
@@ -414,10 +415,22 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
         if (!integersOnly && currentInputValue.endsWith(numberbox_abstractions_1.DECIMAL_SEPARATOR)) {
             // --- Add trailing zero if the value ends with decimal separator
             finalValue = currentInputValue + "0";
-            // --- Update the input and state with the new value
-            if (inputRef.current) {
-                inputRef.current.value = finalValue;
+        }
+        // --- Convert to number and clamp to min/max bounds
+        const numericValue = (0, numberbox_abstractions_1.toUsableNumber)(finalValue, integersOnly);
+        if (!(0, numberbox_abstractions_1.isEmptyLike)(numericValue)) {
+            const clampedValue = (0, numberbox_abstractions_1.clamp)(numericValue, min, max);
+            if (clampedValue !== numericValue) {
+                const clampedString = clampedValue.toString();
+                finalValue = clampedString;
+                // --- Update the input field immediately
+                if (inputRef.current) {
+                    inputRef.current.value = clampedString;
+                }
             }
+        }
+        // --- Update the state if the final value is different from current input
+        if (finalValue !== currentInputValue) {
             updateValue(finalValue, finalValue);
         }
         else {
@@ -425,7 +438,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
             setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [value, onBlur, integersOnly, updateValue]);
+    }, [value, onBlur, integersOnly, updateValue, min, max]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -439,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/Option/Option.js

@@ -25,6 +25,8 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: OptionNative_1.defaultProps.enabled,
         },
+        keywords: (0, metadata_helpers_1.d)("An array of keywords that can be used for searching and filtering the option. " +
+            "These keywords are not displayed but help users find the option through search."),
     },
 });
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, className, renderChild, layoutContext }) => {
@@ -36,7 +38,7 @@ exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     }
     const hasTextNodeChild = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
     const textNodeChild = hasTextNodeChild ? renderChild(node.children) : undefined;
-    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), keywords: extractValue.asOptionalStringArray(node.props.keywords), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
             ? !hasTextNodeChild ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.children, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext })) : undefined
             : undefined, children: !hasTextNodeChild && renderChild(node.children) }));
 });

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/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/HiddenOption.js

@@ -10,7 +10,7 @@ function HiddenOption(option) {
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
+        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: option.keywords || [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
     }, [option, node, label]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);

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 },

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

@@ -242,7 +242,6 @@ const fixtures_1 = require("../../testing/fixtures");
     yield initTestBed(`
     <Select
       label="Dignissimos esse quasi esse cupiditate qui qui. Ut provident ad voluptatem tenetur sit consequuntur. Aliquam nisi fugit ut temporibus itaque ducimus rerum. Dolorem reprehenderit qui adipisci. Ullam harum atque ipsa."
-
       >
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
@@ -251,7 +250,7 @@ const fixtures_1 = require("../../testing/fixtures");
     const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
     const select = page.getByRole("button").or(page.getByRole("combobox")).first();
     const { width: selectWidth } = yield select.boundingBox();
-    (0, fixtures_1.expect)(labelWidth).toBeGreaterThan(selectWidth);
+    (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
 }));
 (0, fixtures_1.test)("placeholder is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
     yield initTestBed(`
@@ -424,7 +423,7 @@ fixtures_1.test.describe("multiSelect", () => {
         const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
         const select = page.getByRole("button").or(page.getByRole("combobox")).first();
         const { width: selectWidth } = yield select.boundingBox();
-        (0, fixtures_1.expect)(labelWidth).toBeGreaterThan(selectWidth);
+        (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
     }));
     (0, fixtures_1.test)('labelPosition="start" is left in ltr language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`
@@ -525,3 +524,32 @@ fixtures_1.test.describe("searchable multiselect", { tag: "@smoke" }, () => {
     </Form>`);
     yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: opt3");
 }));
+// =============================================================================
+// 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(`<Select 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(`<Select 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(`<Select 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(`<Select 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/Select/SelectNative.js

@@ -65,7 +65,6 @@ const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const SelectContext_1 = require("./SelectContext");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
 const OptionContext_1 = require("./OptionContext");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("./HiddenOption");
 const FormContext_1 = require("../Form/FormContext");
 exports.defaultProps = {
@@ -84,9 +83,8 @@ exports.defaultProps = {
 const SimpleSelect = (0, react_2.forwardRef)(function SimpleSelect(props, forwardedRef) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, width, children, readOnly, emptyListNode, className } = props, rest = __rest(props, ["enabled", "onBlur", "autoFocus", "onValueChange", "validationStatus", "value", "height", "style", "placeholder", "id", "triggerRef", "onFocus", "width", "children", "readOnly", "emptyListNode", "className"]);
-    // Compose refs for proper forwarding
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
     const { options } = (0, SelectContext_1.useSelect)();
+    const composedRef = react_2.forwardRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
     // Convert value to string for Radix UI compatibility
     const stringValue = (0, react_2.useMemo)(() => {
         return value != undefined ? String(value) : undefined;
@@ -101,7 +99,7 @@ const SimpleSelect = (0, react_2.forwardRef)(function SimpleSelect(props, forwar
     const selectedOption = (0, react_2.useMemo)(() => {
         return optionsArray.find((option) => String(option.value) === String(value));
     }, [optionsArray, value]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: handleValueChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, Object.assign({}, rest, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(className, Select_module_scss_1.default.selectTrigger, {
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: handleValueChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, Object.assign({}, rest, { id: id, ref: composedRef, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(className, Select_module_scss_1.default.selectTrigger, {
                     [Select_module_scss_1.default.error]: validationStatus === "error",
                     [Select_module_scss_1.default.warning]: validationStatus === "warning",
                     [Select_module_scss_1.default.valid]: validationStatus === "valid",
@@ -109,12 +107,12 @@ const SimpleSelect = (0, react_2.forwardRef)(function SimpleSelect(props, forwar
                     // Prevent event propagation to parent elements (e.g., DropdownMenu)
                     // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
                     event.stopPropagation();
-                }, ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
+                }, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
                             [Select_module_scss_1.default.selectValue]: value !== undefined,
                             [Select_module_scss_1.default.placeholder]: value === undefined,
                         }), children: selectedOption ? selectedOption.label : readOnly ? "" : placeholder }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { maxHeight: height, minWidth: width }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsxs)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: [children, optionsArray.length === 0 && emptyListNode] }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
 });
-exports.Select = (0, react_2.forwardRef)(function Select(_a, ref) {
+exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
     var _b;
     var { 
     // Basic props
@@ -129,18 +127,14 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, ref) {
     searchable = exports.defaultProps.searchable, multiSelect = exports.defaultProps.multiSelect, emptyListTemplate, valueRenderer, optionRenderer, 
     // Progress state
     inProgress = exports.defaultProps.inProgress, inProgressNotificationMessage = exports.defaultProps.inProgressNotificationMessage, 
-    // Label configuration
-    label, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, 
     // Internal
-    updateState = constants_1.noop, registerComponentApi, children } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "autoFocus", "readOnly", "required", "style", "className", "dropdownHeight", "validationStatus", "onDidChange", "onFocus", "onBlur", "searchable", "multiSelect", "emptyListTemplate", "valueRenderer", "optionRenderer", "inProgress", "inProgressNotificationMessage", "label", "labelPosition", "labelWidth", "labelBreak", "updateState", "registerComponentApi", "children"]);
+    updateState = constants_1.noop, registerComponentApi, children } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "autoFocus", "readOnly", "required", "style", "className", "dropdownHeight", "validationStatus", "onDidChange", "onFocus", "onBlur", "searchable", "multiSelect", "emptyListTemplate", "valueRenderer", "optionRenderer", "inProgress", "inProgressNotificationMessage", "updateState", "registerComponentApi", "children"]);
     const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
     const [open, setOpen] = (0, react_2.useState)(false);
     const [width, setWidth] = (0, react_2.useState)(0);
     const observer = (0, react_2.useRef)();
     const { root } = (0, ThemeContext_1.useTheme)();
     const [options, setOptions] = (0, react_2.useState)(new Set());
-    const generatedId = (0, react_2.useId)();
-    const inputId = id || generatedId;
     const isInForm = (0, FormContext_1.useIsInsideForm)();
     // Set initial state based on the initialValue prop
     (0, react_2.useEffect)(() => {
@@ -232,26 +226,26 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, ref) {
         options,
         optionRenderer,
     }), [multiSelect, toggleOption, value, options]);
-    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((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: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, style: style, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, Object.assign({}, rest, { id: inputId, "aria-haspopup": "listbox", style: style, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: (event) => {
-                                        // Prevent event propagation to parent elements (e.g., DropdownMenu)
-                                        // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
-                                        event.stopPropagation();
-                                        setOpen((prev) => !prev);
-                                    }, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
-                                        [Select_module_scss_1.default.disabled]: !enabled,
-                                        [Select_module_scss_1.default.multi]: multiSelect,
-                                    }, className), autoFocus: autoFocus, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
-                                                        var _a;
-                                                        return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
-                                                            toggleOption(v);
-                                                        })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_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)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_b = Array.from(options).find((o) => o.value === value)) === null || _b === void 0 ? void 0 : _b.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            clearValue();
-                                                        } })), (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_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { minWidth: width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((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: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, Object.assign({}, rest, { ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, forwardedRef), id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: (event) => {
+                                    // Prevent event propagation to parent elements (e.g., DropdownMenu)
+                                    // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
+                                    event.stopPropagation();
+                                    setOpen((prev) => !prev);
+                                }, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+                                    [Select_module_scss_1.default.disabled]: !enabled,
+                                    [Select_module_scss_1.default.multi]: multiSelect,
+                                }, className), autoFocus: autoFocus, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
+                                                    var _a;
+                                                    return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
+                                                        toggleOption(v);
+                                                    })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_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)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_b = Array.from(options).find((o) => o.value === value)) === null || _b === void 0 ? void 0 : _b.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        clearValue();
+                                                    } })), (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_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { minWidth: width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
                                                 const lowSearch = search.toLowerCase();
                                                 for (const kw of keywords) {
                                                     if (kw.toLowerCase().includes(lowSearch))
@@ -260,7 +254,7 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, ref) {
                                                 return 0;
                                             }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                 // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }), children] })) : ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, style: style, children: (0, react_1.createElement)(SimpleSelect, Object.assign({}, rest, { readOnly: !!readOnly, ref: ref, key: isInForm ? (value ? `status-${value}` : "status-initial") : undefined, value: value, onValueChange: toggleOption, id: inputId, style: style, className: className, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, width: width, emptyListNode: emptyListNode }), children) })) })) }) }));
+                                                (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }), children] })) : ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, react_1.createElement)(SimpleSelect, Object.assign({}, rest, { readOnly: !!readOnly, ref: forwardedRef, key: isInForm ? (value ? `status-${value}` : "status-initial") : undefined, value: value, onValueChange: toggleOption, id: id, style: style, className: className, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, width: width, emptyListNode: emptyListNode }), children) })) }) }));
 });
 exports.ComboboxOption = (0, react_2.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_2.useId)();

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

@@ -21,10 +21,6 @@ exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
         "Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.",
     props: {
         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),
         minValue: {
             description: `This property specifies the minimum value of the allowed input range.`,
             valueType: "number",
@@ -115,5 +111,5 @@ exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, lookupSyncCallback, className, updateState, state, registerComponentApi, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { validationStatus: extractValue(node.props.validationStatus), minStepsBetweenThumbs: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.minStepsBetweenThumbs), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, step: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.step), min: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.minValue), max: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.maxValue), enabled: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), rangeStyle: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.rangeStyle), thumbStyle: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.thumbStyle), showValues: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.showValues), valueFormat: lookupSyncCallback((_j = node.props) === null || _j === void 0 ? void 0 : _j.valueFormat) }));
+    return ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { validationStatus: extractValue(node.props.validationStatus), minStepsBetweenThumbs: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.minStepsBetweenThumbs), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, step: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.step), min: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.minValue), max: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.maxValue), enabled: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), required: extractValue.asOptionalBoolean(node.props.required), rangeStyle: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.rangeStyle), thumbStyle: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.thumbStyle), showValues: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.showValues), valueFormat: lookupSyncCallback((_j = node.props) === null || _j === void 0 ? void 0 : _j.valueFormat) }));
 });

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

@@ -141,29 +141,62 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield slider.press("ArrowRight");
         yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0.1");
     }));
-    fixtures_1.test.fixme("minStepsBetweenThumbs maintains thumb separation", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED("Need to test actual thumb separation logic"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[2, 7]}" minStepsBetweenThumbs="5" />`);
-        // Test that thumbs maintain minimum separation
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
+    (0, fixtures_1.test)("component handles multiple thumbs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider initialValue="{[2, 4]}" />`);
+        const thumbs = page.getByRole("slider");
+        yield (0, fixtures_1.expect)(thumbs).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("all thumbs are interactable via mouse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page, }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
+        <Text testId="sliderValue0">{slider.value[0]}</Text>
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.dragThumbByMouse("start", 0);
+        yield driver.dragThumbByMouse("end", 1);
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("0");
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("10");
+    }));
+    (0, fixtures_1.test)("all thumbs are interactable via keyboard", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
+        <Text testId="sliderValue0">{slider.value[0]}</Text>
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.stepThumbByKeyboard("ArrowLeft", 0);
+        yield driver.stepThumbByKeyboard("ArrowRight", 1);
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("1");
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("5");
+    }));
+    (0, fixtures_1.test)("minStepsBetweenThumbs maintains thumb separation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[0, 5]}" minStepsBetweenThumbs="3" minValue="0" maxValue="10" />
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.stepThumbByKeyboard("ArrowLeft", 1, 3); // Try to move left by 3 steps
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("3");
     }));
     (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<Slider enabled="false" />`);
         yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeDisabled();
     }));
-    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSliderDriver }) {
         yield initTestBed(`
       <Fragment>
         <Slider id="mySlider" readOnly="true" />
         <Text testId="slider-value" value="{mySlider.value}" />
       </Fragment>`);
-        const slider = page.getByRole("slider");
-        const sliderOffsetWidth = yield page.locator("[data-track]").evaluate((el) => {
-            return el.getBoundingClientRect().width;
-        });
-        yield slider.hover();
-        yield page.mouse.down({ button: "left" });
-        yield page.mouse.move(sliderOffsetWidth, 0); // Attempt to drag to end
-        yield page.mouse.up();
+        const driver = yield createSliderDriver("mySlider");
+        yield driver.dragThumbByMouse("end");
         yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0"); // Value should remain unchanged
     }));
     fixtures_1.test.fixme("autoFocus focuses slider on mount", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("autoFocus does not seem to work with radix-ui, need to double-check"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
@@ -572,3 +605,32 @@ fixtures_1.test.describe("Edge Cases", () => {
         yield (0, fixtures_1.expect)(sliders).toHaveCount(2);
     }));
 });
+// =============================================================================
+// 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(`<Slider 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(`<Slider 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(`<Slider 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(`<Slider width="50%" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));