@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/components/Modal/index.js

@@ -6,12 +6,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = require("react-dom");
 const react_1 = require("react");
 const react_remove_scroll_1 = require("react-remove-scroll");
+const utils_1 = require("../../lib/utils");
 const Backdrop_1 = tslib_1.__importStar(require("./Backdrop"));
 const uuid_1 = require("../utils/uuid");
 const UIHelper_1 = require("../../View/UIHelper");
 const useStacking_1 = require("../WindowModal/useStacking");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 let portalElement;
 let loadingScreenPortalElement;
 const ensurePortalElement = () => {
@@ -48,6 +48,6 @@ const Modal = (props) => {
     const backdropZIndexOffset = 1;
     const stacking = (0, useStacking_1.useStacking)();
     const zIndex = stacking.zIndex;
-    return (0, react_dom_1.createPortal)(isOpen ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Backdrop_1.default, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }), (0, jsx_runtime_1.jsx)(react_remove_scroll_1.RemoveScroll, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: (0, clsx_1.default)('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', Backdrop_1.baseClassName, className), children: children }) })] })) : null, portalElement);
+    return (0, react_dom_1.createPortal)(isOpen ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Backdrop_1.default, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }), (0, jsx_runtime_1.jsx)(react_remove_scroll_1.RemoveScroll, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: (0, utils_1.cn)('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', Backdrop_1.baseClassName, className), children: children }) })] })) : null, portalElement);
 };
 exports.Modal = Modal;

package/src/components/NewSelect/index.d.ts

@@ -9,10 +9,12 @@ type SelectGroupType<T extends SelectItemType> = {
     items: T[];
 };
 type NewSelectBaseProps<T extends SelectItemType> = {
+    chevronIcon?: React.ReactNode;
     'data-name'?: string;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     showClear?: boolean;
+    extraWidthChars?: number;
     multiple?: boolean;
     disabled?: boolean;
     value?: T['value'] | T['value'][];

package/src/components/NewSelect/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelect = exports.SingleSelect = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const select_1 = require("~/components/ui/select");
-const tooltip_1 = require("~/components/ui/tooltip");
+const select_1 = require("../ui/select");
+const tooltip_1 = require("../ui/tooltip");
 const utils_1 = require("../../lib/utils");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getItemTitle = (label, value) => {
@@ -34,9 +34,13 @@ const NewSelect = (props) => {
         ];
         allItems = props.items;
     }
-    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0);
+    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
+        ? item.label.length
+        : typeof item.tooltip === 'string'
+            ? item.tooltip.length
+            : 0), 0);
     const contentStyle = {
-        width: `max(${maxLabelLength + 3}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
+        width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
     };
     const renderValueProp = props.renderValue;
     const renderValueChild = renderValueProp
@@ -52,13 +56,22 @@ const NewSelect = (props) => {
             return item !== undefined ? renderValueProp(item) : undefined;
         }
         : undefined;
-    return ((0, jsx_runtime_1.jsxs)(select_1.Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: (0, utils_1.cn)('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
+    return ((0, jsx_runtime_1.jsxs)(select_1.Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: (0, utils_1.cn)('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], icon: props.chevronIcon, onMouseDown: props.stopMouseDownPropagation
+                    ? (e) => {
+                        e.stopPropagation();
+                        e.nativeEvent?.stopPropagation?.();
+                    }
+                    : undefined, onClick: props.stopMouseDownPropagation
+                    ? (e) => {
+                        e.stopPropagation();
+                        e.nativeEvent?.stopPropagation?.();
+                    }
+                    : undefined, children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { "aria-label": props.ariaLabel ? `${props.ariaLabel} content` : undefined, alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
                     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(select_1.SelectGroup, { children: [group.label && (0, jsx_runtime_1.jsx)(select_1.SelectLabel, { children: group.label }), group.items.map((item) => {
-                                        const tooltipText = props.showItemTooltip
-                                            ? getItemTitle(item.label, item.value)
-                                            : undefined;
+                                        const itemTitle = getItemTitle(item.label, item.value);
+                                        const tooltipText = props.showItemTooltip ? itemTitle : undefined;
                                         const itemContent = item.label;
-                                        const itemElement = ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: item.value, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
+                                        const itemElement = ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: item.value, "aria-label": itemTitle || undefined, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
                                         if (tooltipText != null) {
                                             return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { render: itemElement, children: itemContent }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: tooltipText })] }, item.value));
                                         }

package/src/components/NewTooltip/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewTooltip = NewTooltip;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tooltip_1 = require("~/components/ui/tooltip");
+const tooltip_1 = require("../ui/tooltip");
 function NewTooltip({ label, children, side, align }) {
     if (!label) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });

package/src/components/OverlayTrigger/index.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
+const TimingHelper_1 = require("../../Utilities/Helpers/TimingHelper");
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
 const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
@@ -100,7 +100,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     // visible state may quickly change from true -> false -> true
     // when moving the mouse cursor from the trigger to the overlay
     // for this case we debounce the visible change for a very small amount of time
-    (0, debounce_1.default)((visible) => {
+    (0, TimingHelper_1.debounce)((visible) => {
         // if (!visible) {
         //   return;
         // }

package/src/components/Panel/index.js

@@ -4,11 +4,11 @@ exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
 exports.baseClassName = 'ab-Panel';
-const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-foreground';
+const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-background twa:text-foreground';
 const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
     if (!children) {
         return null;
@@ -22,16 +22,16 @@ const Body = ({ children, bodyScroll, variant, className, style, }) => {
     if (bodyScroll === true) {
         bodyScroll = 'auto';
     }
-    const bodyCls = (0, clsx_1.default)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
-        'twa:bg-primarylight twa:text-text-on-primary twa:border-0': variant === 'modern',
+    const bodyCls = (0, utils_1.cn)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
+        'twa:bg-primarylight twa:text-primary-foreground twa:border-0': variant === 'modern',
     }, className);
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { style: style, className: bodyCls, children: children }));
 };
 const PlainHeader = ({ children, className }) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-plain`, className), children: children }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-plain`, className), children: children }));
 };
 const FlexBody = ({ children, className }) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, `${exports.baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className), children: children }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, `${exports.baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className), children: children }));
 };
 const Panel = (props) => {
     const { border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
@@ -44,7 +44,7 @@ const Panel = (props) => {
         border,
         ...(bodyProps ? bodyProps.style : null),
     };
-    const cls = (0, twMerge_1.twMerge)((0, clsx_1.default)(exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col'), className);
+    const cls = (0, utils_1.cn)(exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col', className);
     let headerCls = headerProps?.className;
     if (cls.includes('twa:rounded-none')) {
         headerCls = (0, twMerge_1.twMerge)(headerCls, 'twa:rounded-none');
@@ -69,10 +69,10 @@ const Panel = (props) => {
     });
     if (theHeader) {
         childrenArr = childrenArr.filter((child) => child !== theHeader);
-        theHeader = ((0, jsx_runtime_1.jsx)(PlainHeader, { ...theHeader.props, className: (0, clsx_1.default)(headerCls, theHeader.props.className ?? '') }));
+        theHeader = ((0, jsx_runtime_1.jsx)(PlainHeader, { ...theHeader.props, className: (0, utils_1.cn)(headerCls, theHeader.props.className ?? '') }));
     }
     if (theBody) {
-        theBody = ((0, jsx_runtime_1.jsx)(FlexBody, { ...theBody.props, className: (0, clsx_1.default)(bodyCls, theBody.props.className ?? '') }));
+        theBody = ((0, jsx_runtime_1.jsx)(FlexBody, { ...theBody.props, className: (0, utils_1.cn)(bodyCls, theBody.props.className ?? '') }));
     }
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls, children: [theHeader ?? ((0, jsx_runtime_1.jsx)(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls, children: header })), theBody ??
                 (childrenArr.length > 0 ? ((0, jsx_runtime_1.jsx)(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: (0, twMerge_1.twMerge)(bodyCls), children: childrenArr })) : null)] }));

package/src/components/Radio/index.d.ts

@@ -9,7 +9,7 @@ type TypeProps = {
     value?: any;
     onChange?: (checked: boolean, event?: SyntheticEvent | any) => void;
     children?: ReactNode | React.JSX.Element;
-    gapDistance?: number;
+    gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
     variant?: Variant;
 };

package/src/components/Radio/index.js

@@ -8,8 +8,8 @@ const react_1 = require("react");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twUtils_1 = require("../twUtils");
+const utils_1 = require("../../lib/utils");
 const RadioContext = React.createContext({
     value: null,
     name: '',
@@ -20,7 +20,7 @@ const useRadioContext = () => {
     return React.useContext(RadioContext);
 };
 exports.useRadioContext = useRadioContext;
-const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
+const Radio = ({ children, checked, onChange, value, name, gapDistance = 'var(--ab-radio-gap)', childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
     const context = (0, exports.useRadioContext)();
     const { value: contextValue, onChange: contextOnChange, name: contextName, variant } = context;
     const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
@@ -46,7 +46,7 @@ const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, chi
     const beforeGap = childrenPosition === 'start' ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' ? gap : null;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)(`ab-Radio twa:my-2 twa:inline-flex twa:flex-row twa:items-center twa:cursor-pointer twa:relative`, props.className), "data-checked": computedChecked, as: as, children: [before, beforeGap, (0, jsx_runtime_1.jsx)("input", { disabled: disabled, className: (0, clsx_1.default)('ab-Radio-input', twUtils_1.targetOwn.focusOutline, 'twa:align-middle', 'twa:m-0', 'twa:rounded-full', 'twa:cursor-pointer', 'twa:position-relative', 'twa:w-[1rem]', 'twa:h-[1rem]', 'twa:min-w-[1rem]', 'twa:min-h-[1rem]', variant === 'default' && 'ab-Radio-input--default', variant === 'text-only' && 'ab-Radio-input--text-only twa:size-0 twa:opacity-0'), id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, onChange: onInputChange }), afterGap, after] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)(`ab-Radio twa:my-2 twa:inline-flex twa:flex-row twa:items-center twa:cursor-pointer twa:relative`, props.className), "data-checked": computedChecked, as: as, children: [before, beforeGap, (0, jsx_runtime_1.jsx)("input", { disabled: disabled, className: (0, utils_1.cn)('ab-Radio-input', twUtils_1.targetOwn.focusOutline, 'twa:align-middle', 'twa:m-0', 'twa:rounded-full', 'twa:cursor-pointer', 'twa:position-relative', 'twa:w-[1rem]', 'twa:h-[1rem]', 'twa:min-w-[1rem]', 'twa:min-h-[1rem]', variant === 'default' && 'ab-Radio-input--default', variant === 'text-only' && 'ab-Radio-input--text-only twa:size-0 twa:opacity-0'), id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, onChange: onInputChange }), afterGap, after] }));
 };
 const RadioGroup = (props) => {
     const { orientation, value: _value, name, onRadioChange, children, variant = 'default' } = props;
@@ -55,13 +55,15 @@ const RadioGroup = (props) => {
             onRadioChange(value);
         },
     });
-    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value, onChange: setValue, name, variant }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start', children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value, onChange: setValue, name, variant }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start', children: children }) }));
 };
 exports.RadioGroup = RadioGroup;
 exports.radioGroupStyling = {
-    horizontalTextOnly: (0, clsx_1.default)('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
-        'twa:*:flex-1 twa:*:rounded-standard twa:*:p-1 twa:*:m-0': 'default styles for all the radio buttons',
+    horizontalTextOnly: (0, utils_1.cn)('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
+        'twa:*:flex-1 twa:*:shrink-0 twa:*:min-w-fit twa:*:rounded-standard twa:*:p-1 twa:*:m-0 twa:*:px-4': 'default styles for all the radio buttons',
         'twa:*:data-[checked=true]:bg-accent twa:*:data-[checked=true]:text-accent-foreground': 'style the checked state',
+        'twa:[--ab-radio-gap:0]': 'remove the gap between the radio input and its label',
+        'twa:[&_input]:size-0 twa:[&_input]:min-w-0 twa:[&_input]:min-h-0 twa:[&_input]:border-0 twa:[&_input]:p-0': 'collapse any nested radio inputs to zero size (overriding their fixed min-w/min-h)',
         [twUtils_1.targetChildren.focusWithinOutline]: 'styles for when a radio is currently focused - show a ring, so people know they can do keyboard nav with left/right arrow keys',
     }),
 };

package/src/components/SimpleButton/index.js

@@ -4,11 +4,11 @@ exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const icons_1 = require("../icons");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const NewTooltip_1 = require("../NewTooltip");
 exports.baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
@@ -77,36 +77,36 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     if (ariaLabel != null && ariaLabel !== '') {
         extraButtonProps['aria-label'] = ariaLabel;
     }
-    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, clsx_1.default)(exports.baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
+    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
         // direct children should be above the before pseudo element
         'twa:*:z-1', 
         // all svgs inside should be aligned middle
         'twa:[&_svg]:align-middle', 
-        // 'twa:text-text-on-primary',
+        // 'twa:text-primary-foreground',
         // the text variant has the background applied on the before pseudo element
         // so let's configure the before pseudo element for all buttons here
         'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 'twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50', disabled ? `${exports.baseClassName}--disabled` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
-            'twa:text-text-on-primary': tone == 'neutral',
+            'twa:text-primary-foreground': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
             'twa:text-accent': tone === 'accent',
-            'twa:text-error': tone === 'error',
+            'twa:text-destructive': tone === 'error',
             'twa:text-warn': tone === 'warning',
             'twa:text-info': tone === 'info',
         }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
             ? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
             : '', variant === 'outlined'
-            ? 'twa:bg-defaultbackground twa:border-input-border twa:border'
+            ? 'twa:bg-background twa:border-input-border twa:border'
             : '', variant === 'raised'
             ? {
-                'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
-                'twa:bg-success twa:text-text-on-success': tone == 'success',
+                'twa:text-primary-foreground twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
+                'twa:bg-success twa:text-success-foreground': tone == 'success',
                 'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
                 'twa:bg-transparent': tone == 'none',
-                'twa:bg-primary twa:text-text-on-primary': tone == 'neutral',
-                'twa:bg-error twa:text-text-on-error': tone == 'error',
-                'twa:bg-warn twa:text-text-on-warn': tone == 'warning',
-                'twa:bg-info twa:text-text-on-info': tone == 'info',
+                'twa:bg-primary twa:text-primary-foreground': tone == 'neutral',
+                'twa:bg-destructive twa:text-destructive-foreground': tone == 'error',
+                'twa:bg-warn twa:text-warn-foreground': tone == 'warning',
+                'twa:bg-info twa:text-info-foreground': tone == 'info',
             }
             : '', 
         // opacity transitioning for the background applied on the before pseudo element

package/src/components/StylePreview.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylePreview = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const utils_1 = require("../lib/utils");
 const twMerge_1 = require("../twMerge");
 const Flex_1 = require("./Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const StylePreview = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style }, children: props.children ?? 'Preview result' }));
+const StylePreview = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, utils_1.cn)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style }, children: props.children ?? 'Preview result' }));
 exports.StylePreview = StylePreview;

package/src/components/Tabs/index.js

@@ -9,7 +9,7 @@ const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const TabContext = React.createContext({
     selectedIndex: 0,
     tabCount: 0,
@@ -65,12 +65,12 @@ const Tabs = (props) => {
     };
     const currentContent = contents[selectedIndex];
     const { value, ...contentProps } = (currentContent?.props || {});
-    const fillerClassName = (0, clsx_1.default)('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
+    const fillerClassName = (0, utils_1.cn)('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
     return ((0, jsx_runtime_1.jsx)(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: fillerClassName }), tabs, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)(fillerClassName, 'twa:flex-1') })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.cn)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)', 'twa:pt-0.5'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: fillerClassName }), tabs, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)(fillerClassName, 'twa:flex-1') })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
 };
 exports.Tabs = Tabs;
 const Tab = (props) => {
@@ -79,7 +79,7 @@ const Tab = (props) => {
     const baseClassName = 'ab-Tabs__Tab';
     const active = context.selectedIndex === props.index;
     const beforeActive = context.selectedIndex === props.index + 1;
-    const className = (0, clsx_1.default)(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
+    const className = (0, utils_1.cn)(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
     const ref = (0, react_1.useRef)(null);
     React.useEffect(() => {
         if (active && autoFocus && keyboardNavigation) {

package/src/components/Tag/Tag.d.ts

@@ -1,10 +1,21 @@
 import * as React from 'react';
 import { FlexProps } from '../Flex';
+export type TagVariant = 'default' | 'column';
 export declare const Tag: React.FunctionComponent<React.PropsWithChildren<FlexProps & {
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    variant?: TagVariant;
 }> & React.RefAttributes<HTMLDivElement>>;
+/** Tag styled for column names — accent tint and left stripe for quick recognition. */
+export declare const ColumnTag: React.ForwardRefExoticComponent<Omit<FlexProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    variant?: TagVariant;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const TagBox: (props: {
     children: React.ReactNode;
     className?: string;
@@ -12,4 +23,9 @@ export declare const TagBox: (props: {
 export declare const TagList: (props: {
     tags: (React.ReactNode | string)[];
     className?: string;
+    variant?: TagVariant;
 }) => React.JSX.Element;
+export declare function renderColumnTags(columnIds: string[], getFriendlyName: (columnId: string) => string, options?: {
+    className?: string;
+    tagClassName?: string;
+}): React.ReactNode;

package/src/components/Tag/Tag.js

@@ -1,18 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagList = exports.TagBox = exports.Tag = void 0;
+exports.TagList = exports.TagBox = exports.ColumnTag = exports.Tag = void 0;
+exports.renderColumnTags = renderColumnTags;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const twMerge_1 = require("../../twMerge");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-exports.Tag = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
+const COLUMN_TAG_CLASS = 'ab-Tag--column';
+exports.Tag = React.forwardRef(({ variant = 'default', className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:w-fit twa:rounded-standard`, variant === 'column' ? COLUMN_TAG_CLASS : 'twa:bg-primary', className), style: props.style })));
+/** Tag styled for column names — accent tint and left stripe for quick recognition. */
+exports.ColumnTag = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)(exports.Tag, { ...props, ref: ref, variant: "column" }));
 const TagBox = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
 };
 exports.TagBox = TagBox;
 const TagList = (props) => {
-    return ((0, jsx_runtime_1.jsx)(exports.TagBox, { className: props.className, children: props.tags.map((tag, index) => ((0, jsx_runtime_1.jsx)(exports.Tag, { children: tag }, index))) }));
+    const TagComponent = props.variant === 'column' ? exports.ColumnTag : exports.Tag;
+    return ((0, jsx_runtime_1.jsx)(exports.TagBox, { className: props.className, children: props.tags.map((tag, index) => ((0, jsx_runtime_1.jsx)(TagComponent, { children: tag }, index))) }));
 };
 exports.TagList = TagList;
+function renderColumnTags(columnIds, getFriendlyName, options) {
+    if (!columnIds.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: (0, utils_1.cn)('twa:gap-1', options?.className), children: columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(exports.ColumnTag, { className: options?.tagClassName, children: getFriendlyName(columnId) }, columnId))) }));
+}

package/src/components/Tag/columnScopeTagHelpers.d.ts

@@ -0,0 +1,8 @@
+import type { Report } from '../../types';
+import type { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
+import type { TagVariant } from './Tag';
+/** True when a tag label is a scope placeholder (e.g. `[All Columns]`), not a column name. */
+export declare const isBracketedScopeTagLabel: (value: string) => boolean;
+/** True when export column tags are actual column friendly names. */
+export declare const reportColumnTagsUseColumnVariant: (report: Report) => boolean;
+export declare const getScopeViewItemsTagVariant: (scope: ColumnScope) => TagVariant | undefined;

package/src/components/Tag/columnScopeTagHelpers.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScopeViewItemsTagVariant = exports.reportColumnTagsUseColumnVariant = exports.isBracketedScopeTagLabel = void 0;
+const BRACKETED_SCOPE_LABEL = /^\[[^\]]+\]$/;
+/** True when a tag label is a scope placeholder (e.g. `[All Columns]`), not a column name. */
+const isBracketedScopeTagLabel = (value) => BRACKETED_SCOPE_LABEL.test(value.trim());
+exports.isBracketedScopeTagLabel = isBracketedScopeTagLabel;
+/** True when export column tags are actual column friendly names. */
+const reportColumnTagsUseColumnVariant = (report) => report.ReportColumnScope === 'ScopeColumns' && 'ColumnIds' in (report.Scope ?? {});
+exports.reportColumnTagsUseColumnVariant = reportColumnTagsUseColumnVariant;
+const getScopeViewItemsTagVariant = (scope) => 'ColumnIds' in scope && Array.isArray(scope.ColumnIds) ? 'column' : undefined;
+exports.getScopeViewItemsTagVariant = getScopeViewItemsTagVariant;

package/src/components/Tag/index.d.ts

@@ -1 +1 @@
-export { Tag, TagBox, TagList } from './Tag';
+export { Tag, TagBox, TagList, ColumnTag, renderColumnTags, type TagVariant } from './Tag';

package/src/components/Tag/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagList = exports.TagBox = exports.Tag = void 0;
+exports.renderColumnTags = exports.ColumnTag = exports.TagList = exports.TagBox = exports.Tag = void 0;
 var Tag_1 = require("./Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 Object.defineProperty(exports, "TagBox", { enumerable: true, get: function () { return Tag_1.TagBox; } });
 Object.defineProperty(exports, "TagList", { enumerable: true, get: function () { return Tag_1.TagList; } });
+Object.defineProperty(exports, "ColumnTag", { enumerable: true, get: function () { return Tag_1.ColumnTag; } });
+Object.defineProperty(exports, "renderColumnTags", { enumerable: true, get: function () { return Tag_1.renderColumnTags; } });

package/src/components/Textarea/index.js

@@ -4,9 +4,8 @@ exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const twMerge_1 = require("../../twMerge");
 exports.baseClassName = 'ab-Textarea';
 const Textarea = React.forwardRef((props, ref) => {
     const internalRef = React.useRef(null);
@@ -63,6 +62,6 @@ const Textarea = React.forwardRef((props, ref) => {
         }, onChange: (e) => {
             expandToFitContent();
             props.onChange && props.onChange(e);
-        }, as: "textarea", type: type, disabled: disabled, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : ''), className), spellCheck: false }));
+        }, as: "textarea", type: type, disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '', className), spellCheck: false }));
 });
 exports.default = Textarea;

package/src/components/Toggle/Toggle.d.ts

@@ -4,5 +4,7 @@ export type ToggleProps = {
     onPressedChange: (pressed: boolean) => void;
     pressed?: boolean;
     icon?: AdaptableSystemIconName;
+    /** Render as an individual button (not inside a {@link ToggleGroup}). */
+    standalone?: boolean;
 };
 export declare const Toggle: React.FunctionComponent<React.PropsWithChildren<ToggleProps>>;

package/src/components/Toggle/Toggle.js

@@ -4,12 +4,11 @@ exports.Toggle = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const Icon_1 = require("../Icon");
-const twMerge_1 = require("../../twMerge");
 const ToggleGroup_1 = require("./ToggleGroup");
 const baseClassName = 'ab-Toggle';
-const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
+const Toggle = ({ onPressedChange, pressed, icon, standalone = false, children, ...rest }) => {
     const onPressedChangeRef = React.useRef(onPressedChange);
     React.useLayoutEffect(() => {
         onPressedChangeRef.current = onPressedChange;
@@ -24,7 +23,10 @@ const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
     const isActive = toggleContext.activeIndex === currentIndex;
     const ref = React.useRef(null);
     React.useEffect(() => {
-        if (!toggleContext || !toggleContext.toggleButtons) {
+        if (standalone) {
+            return;
+        }
+        if (!toggleContext?.toggleButtons) {
             return;
         }
         const thisButton = {
@@ -40,19 +42,24 @@ const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
             }
         };
     }, [toggleContext]);
-    return ((0, jsx_runtime_1.jsxs)("button", { ...rest, ref: ref, tabIndex: -1, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
+    return ((0, jsx_runtime_1.jsxs)("button", { ...rest, ref: ref, tabIndex: standalone ? 0 : -1, className: (0, utils_1.cn)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', !standalone &&
+            'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', standalone && [
+            'ab-Toggle--standalone',
+            'twa:shadow-sm twa:rounded-standard twa:bg-primary twa:text-primary-foreground',
+        ], 
         // backgrounds
         {
             'twa:text-inherit twa:bg-transparent': !pressed,
-            'twa:hover:bg-primarylight twa:hover:text-text-on-primary': !pressed,
+            'twa:hover:bg-primarylight twa:hover:text-primary-foreground': !pressed,
             [`${baseClassName}--pressed`]: pressed,
             'twa:bg-accent twa:hover:bg-accent/90 twa:text-accent-foreground': pressed,
-        }, {
+        }, !standalone && {
             'twa:before:rounded-standard twa:before:content-[""] twa:before:absolute twa:before:inset-1 twa:before:z-20 twa:before:pointer-events-none': true,
             // let's display a shadow on the before pseudo element
             // when the toggle is active
             'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
             'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
-        }, baseClassName)), onClick: toggle, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: icon } }), children] }));
+        }, standalone &&
+            'twa:focus-visible:ring-2 twa:focus-visible:ring-ring twa:focus-visible:ring-offset-1', baseClassName), onClick: toggle, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: icon } }), children] }));
 };
 exports.Toggle = Toggle;

package/src/components/Toggle/ToggleGroup.js

@@ -5,9 +5,9 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const react_1 = require("react");
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
+const utils_1 = require("../../lib/utils");
 exports.ToggleGroupContext = React.createContext({
     toggleButtons: [],
     activeIndex: -1,
@@ -24,7 +24,7 @@ const ToggleGroup = (props) => {
             activeIndex: index,
         }));
     }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.ToggleGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
+    return ((0, jsx_runtime_1.jsx)(exports.ToggleGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, utils_1.cn)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-primary-foreground', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
             // make the shadow of child Toggle buttons invisible when the group is not focused
             'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
                 const index = context.toggleButtons.findIndex((btn) => (0, contains_1.default)(btn.node, event.target));