xmlui 0.10.16 → 0.10.19

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

@@ -355,6 +355,13 @@ fixtures_1.test.describe("Event Handling", () => {
         yield page.getByRole("slider").focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
     }));
+    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Slider label="Volume" onGotFocus="testState = 'focused'" />
+    `);
+        yield page.getByText("Volume").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
     (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
       <Slider onLostFocus="testState = 'blurred'" />
@@ -605,3 +612,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);
+}));

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

@@ -55,10 +55,10 @@ const react_slider_1 = require("@radix-ui/react-slider");
 const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const classnames_1 = __importDefault(require("classnames"));
 const TooltipNative_1 = require("../Tooltip/TooltipNative");
 const lodash_es_1 = require("lodash-es");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.defaultProps = {
     step: 1,
     min: 0,
@@ -103,10 +103,9 @@ const formatValue = (val, defaultVal = 0, minVal, maxVal) => {
     return [clampValue(defaultVal)];
 };
 exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { id, style, className, step = exports.defaultProps.step, min = exports.defaultProps.min, max = exports.defaultProps.max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value, autoFocus, readOnly, tabIndex = exports.defaultProps.tabIndex, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue, minStepsBetweenThumbs = exports.defaultProps.minStepsBetweenThumbs, rangeStyle, thumbStyle, showValues = exports.defaultProps.showValues, valueFormat = exports.defaultProps.valueFormat } = _a, rest = __rest(_a, ["id", "style", "className", "step", "min", "max", "inverted", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "value", "autoFocus", "readOnly", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "validationStatus", "initialValue", "minStepsBetweenThumbs", "rangeStyle", "thumbStyle", "showValues", "valueFormat"]);
-    const _id = (0, react_1.useId)();
-    id = id || _id;
+    var { id, style, className, step = exports.defaultProps.step, min = exports.defaultProps.min, max = exports.defaultProps.max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value, autoFocus, readOnly, tabIndex = exports.defaultProps.tabIndex, required, validationStatus = exports.defaultProps.validationStatus, initialValue, minStepsBetweenThumbs = exports.defaultProps.minStepsBetweenThumbs, rangeStyle, thumbStyle, showValues = exports.defaultProps.showValues, valueFormat = exports.defaultProps.valueFormat } = _a, rest = __rest(_a, ["id", "style", "className", "step", "min", "max", "inverted", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "value", "autoFocus", "readOnly", "tabIndex", "required", "validationStatus", "initialValue", "minStepsBetweenThumbs", "rangeStyle", "thumbStyle", "showValues", "valueFormat"]);
     const inputRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(inputRef, forwardedRef) : inputRef;
     const tooltipRef = (0, react_1.useRef)(null);
     const thumbsRef = (0, react_1.useRef)([]);
     min = parseValue(min, exports.defaultProps.min);
@@ -218,21 +217,21 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     (0, react_1.useEffect)(() => {
         thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
     }, [displayValue.length]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, id: id, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, Slider_module_scss_1.default.sliderRoot, {
-                    [Slider_module_scss_1.default.disabled]: !enabled,
-                    [Slider_module_scss_1.default.readOnly]: readOnly,
-                }), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, onMouseOver: onShowTooltip, onMouseLeave: onHideTooltip, onPointerDown: onShowTooltip, value: displayValue, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { "data-track": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, style: style, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderContainer, className), "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { ref: inputRef, minStepsBetweenThumbs: minStepsBetweenThumbs, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRoot, {
+                [Slider_module_scss_1.default.disabled]: !enabled,
+                [Slider_module_scss_1.default.readOnly]: readOnly,
+            }), max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, onMouseOver: onShowTooltip, onMouseLeave: onHideTooltip, onPointerDown: onShowTooltip, value: displayValue, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { "data-track": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+                        [Slider_module_scss_1.default.disabled]: !enabled,
+                        [Slider_module_scss_1.default.readOnly]: readOnly,
+                        [Slider_module_scss_1.default.error]: validationStatus === "error",
+                        [Slider_module_scss_1.default.warning]: validationStatus === "warning",
+                        [Slider_module_scss_1.default.valid]: validationStatus === "valid",
+                    }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
                             [Slider_module_scss_1.default.disabled]: !enabled,
-                            [Slider_module_scss_1.default.readOnly]: readOnly,
-                            [Slider_module_scss_1.default.error]: validationStatus === "error",
-                            [Slider_module_scss_1.default.warning]: validationStatus === "warning",
-                            [Slider_module_scss_1.default.valid]: validationStatus === "valid",
-                        }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
-                                [Slider_module_scss_1.default.disabled]: !enabled,
-                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: (el) => {
-                                thumbsRef.current[index] = el;
-                            }, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
-                                [Slider_module_scss_1.default.disabled]: !enabled,
-                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus && index === 0 }) }, index)))] }) }) })));
+                        }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: (el) => {
+                            thumbsRef.current[index] = el;
+                        }, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
+                            [Slider_module_scss_1.default.disabled]: !enabled,
+                        }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus && index === 0 }) }, index)))] }) })));
 });
 exports.Slider.displayName = "Slider";

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

@@ -23,10 +23,6 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
     props: {
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -80,5 +76,5 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, className, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
 });

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

@@ -84,7 +84,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield initTestBed(`<Switch initialValue="false" />`);
             yield (0, fixtures_1.expect)(page.getByRole("switch")).not.toBeChecked();
         }));
-        (0, fixtures_1.test)("initialValue handles string 'FALSE' as false (case insensitive)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        (0, fixtures_1.test)("initialValue handles string 'FALSE' as false (case insensitive)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
             yield initTestBed(`<Switch initialValue="FALSE" />`);
             yield (0, fixtures_1.expect)(page.getByRole("switch")).not.toBeChecked();
         }));
@@ -96,7 +96,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield initTestBed(`<Switch initialValue="yes" />`);
             yield (0, fixtures_1.expect)(page.getByRole("switch")).toBeChecked();
         }));
-        (0, fixtures_1.test)("initialValue handles string with content and 'false' as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        (0, fixtures_1.test)("initialValue handles string with content and 'false' as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
             yield initTestBed(`<Switch initialValue="not false" />`);
             yield (0, fixtures_1.expect)(page.getByRole("switch")).toBeChecked();
         }));
@@ -127,7 +127,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
                 (0, fixtures_1.expect)(exists).toBe(0);
             }
         }));
-        (0, fixtures_1.test)("initialValue handles array with single element as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        (0, fixtures_1.test)("initialValue handles array with single element as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
             yield initTestBed(`<Switch initialValue="{['item']}" />`);
             // Arrays may cause component to not render in some contexts
             const switchElement = page.getByRole("switch");
@@ -453,7 +453,7 @@ fixtures_1.test.describe("Event Handling", () => {
     `);
         const switchElement = page.getByRole("switch");
         yield switchElement.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('changed');
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
     }));
     (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
@@ -469,7 +469,14 @@ fixtures_1.test.describe("Event Handling", () => {
     `);
         const switchElement = page.getByRole("switch");
         yield switchElement.focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('focused');
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
+    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Switch label="Enable" onGotFocus="testState = 'focused'" />
+    `);
+        yield page.getByText("Enable").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
     }));
     (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
@@ -478,7 +485,7 @@ fixtures_1.test.describe("Event Handling", () => {
         const switchElement = page.getByRole("switch");
         yield switchElement.focus();
         yield switchElement.blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('blurred');
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
     }));
 });
 // =============================================================================
@@ -526,13 +533,13 @@ fixtures_1.test.describe("Api", () => {
       </Fragment>
     `);
         yield page.getByTestId("setBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('api-changed');
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("api-changed");
     }));
     // =============================================================================
     // VALUE PROPERTY TESTS - Testing transformToLegitValue with dynamic value updates
     // =============================================================================
     fixtures_1.test.describe("value property with transformToLegitValue", () => {
-        (0, fixtures_1.test)("switch reflects state changes with different value types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        (0, fixtures_1.test)("switch reflects state changes with different value types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
             yield initTestBed(`
         <Fragment>
           <Switch id="mySwitch" initialValue="false" />
@@ -634,7 +641,7 @@ fixtures_1.test.describe("Api", () => {
 // VISUAL STATE TESTS
 // =============================================================================
 fixtures_1.test.describe("Visual States", () => {
-    (0, fixtures_1.test)("component applies switch-specific styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("component applies switch-specific styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch />`);
         const driver = yield createCheckboxDriver();
         // Switch should have different visual styling than checkbox
@@ -734,22 +741,22 @@ fixtures_1.test.describe("Theme Vars", () => {
 // VALIDATION STATUS TESTS
 // =============================================================================
 fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch validationStatus="error" />`);
         const driver = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveClass(/error/);
     }));
-    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch validationStatus="warning" />`);
         const driver = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveClass(/warning/);
     }));
-    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch validationStatus="valid" />`);
         const driver = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveClass(/valid/);
     }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch validationStatus="invalid-status" />`);
         const driver = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver.component).toBeVisible();
@@ -759,7 +766,7 @@ fixtures_1.test.describe("Validation", () => {
 // EDGE CASE TESTS
 // =============================================================================
 fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch/>`, {});
         const driver1 = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver1.component).toBeVisible();
@@ -767,12 +774,12 @@ fixtures_1.test.describe("Edge Cases", () => {
         const driver2 = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver2.component).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch label="Test with !@#$%^&*()"/>`, {});
         const driver = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver.component).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles concurrent prop updates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("component handles concurrent prop updates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`<Switch initialValue="false" />`, {});
         const driver1 = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver1.component).not.toBeChecked();
@@ -785,7 +792,7 @@ fixtures_1.test.describe("Edge Cases", () => {
 // INTEGRATION TESTS
 // =============================================================================
 fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
+    (0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
         yield initTestBed(`
       <VStack>
         <Switch label="First switch" />

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

@@ -125,6 +125,16 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
             availableValues: ["top", "center", "bottom"],
             defaultValue: "center",
         },
+        checkboxTolerance: {
+            description: `This property controls the tolerance area around checkboxes for easier interaction. ` +
+                `This property only has an effect when the rowsSelectable property is set to \`true\`. ` +
+                `\`none\` provides no tolerance (0px), \`compact\` provides minimal tolerance (8px), ` +
+                `\`comfortable\` provides medium tolerance (12px), and \`spacious\` provides generous tolerance (16px) ` +
+                `for improved accessibility.`,
+            valueType: "string",
+            availableValues: TableNative_1.CheckboxToleranceValues,
+            defaultValue: TableNative_1.defaultProps.checkboxTolerance,
+        },
     },
     events: {
         sortingDidChange: (0, metadata_helpers_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
@@ -246,7 +256,7 @@ const TableWithColumns = (0, react_1.memo)((0, react_1.forwardRef)(({ extractVal
     const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { className: className, ref: ref, data: data, columns: columns, pageSizeOptions: extractValue(node.props.pageSizeOptions), pageSize: extractValue.asOptionalNumber(node.props.pageSize), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
                     (() => {
                         return renderChild(node.props.noDataTemplate);
-                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector), initiallySelected: extractValue(node.props.initiallySelected), syncWithAppState: extractValue(node.props.syncWithAppState) })] }));
+                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector), checkboxTolerance: extractValue.asOptionalString(node.props.checkboxTolerance), initiallySelected: extractValue(node.props.initiallySelected), syncWithAppState: extractValue(node.props.syncWithAppState) })] }));
     if (selectionContext === null) {
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }