@cwellt_software/cwellt-reactjs-lib 1.4.14 → 1.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/index.cjs.js +284 -89
  2. package/dist/index.css +2 -2
  3. package/dist/index.d.ts +227 -20
  4. package/dist/index.es.js +283 -91
  5. package/dist/src/common/hooks/useRovingSingleSelect.d.ts +28 -0
  6. package/dist/src/common/hooks/useRovingSingleSelect.d.ts.map +1 -0
  7. package/dist/src/components/control/action/button/CwButton.d.ts +14 -4
  8. package/dist/src/components/control/action/button/CwButton.d.ts.map +1 -1
  9. package/dist/src/components/control/action/button/CwButtonSplit.d.ts +52 -0
  10. package/dist/src/components/control/action/button/CwButtonSplit.d.ts.map +1 -0
  11. package/dist/src/components/control/action/button/CwButtonSwitch.d.ts +65 -0
  12. package/dist/src/components/control/action/button/CwButtonSwitch.d.ts.map +1 -0
  13. package/dist/src/components/control/choice/checkbox/CwCheck.d.ts +6 -5
  14. package/dist/src/components/control/choice/checkbox/CwCheck.d.ts.map +1 -1
  15. package/dist/src/components/control/choice/checkbox/CwCheckboxGroup.d.ts +30 -7
  16. package/dist/src/components/control/choice/checkbox/CwCheckboxGroup.d.ts.map +1 -1
  17. package/dist/src/components/control/choice/checkbox/CwRadio.d.ts +10 -0
  18. package/dist/src/components/control/choice/checkbox/CwRadio.d.ts.map +1 -0
  19. package/dist/src/components/control/choice/checkbox/CwRadioGroup.d.ts +58 -0
  20. package/dist/src/components/control/choice/checkbox/CwRadioGroup.d.ts.map +1 -0
  21. package/dist/src/components/control/choice/toggle/CwToggle.d.ts +6 -5
  22. package/dist/src/components/control/choice/toggle/CwToggle.d.ts.map +1 -1
  23. package/dist/src/index.d.ts +3 -0
  24. package/dist/src/index.d.ts.map +1 -1
  25. package/dist/src/playground/PlaygroundApp.d.ts.map +1 -1
  26. package/dist/src/playground/PlaygroundSection.d.ts +13 -0
  27. package/dist/src/playground/PlaygroundSection.d.ts.map +1 -0
  28. package/dist/src/playground/pages/CwButtonPage.d.ts +3 -0
  29. package/dist/src/playground/pages/CwButtonPage.d.ts.map +1 -0
  30. package/dist/src/playground/pages/CwButtonSplitPage.d.ts +3 -0
  31. package/dist/src/playground/pages/CwButtonSplitPage.d.ts.map +1 -0
  32. package/dist/src/playground/pages/CwButtonSwitchPage.d.ts +3 -0
  33. package/dist/src/playground/pages/CwButtonSwitchPage.d.ts.map +1 -0
  34. package/dist/src/playground/pages/CwCheckboxGroupPage.d.ts +3 -0
  35. package/dist/src/playground/pages/CwCheckboxGroupPage.d.ts.map +1 -0
  36. package/dist/src/playground/pages/CwRadioGroupPage.d.ts +3 -0
  37. package/dist/src/playground/pages/CwRadioGroupPage.d.ts.map +1 -0
  38. package/dist/test/common/hooks/useRovingSingleSelect.test.d.ts +2 -0
  39. package/dist/test/common/hooks/useRovingSingleSelect.test.d.ts.map +1 -0
  40. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
- import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, createElement, useId, memo, Fragment as Fragment$1, Component } from 'react';
3
+ import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, useId, createElement, memo, Fragment as Fragment$1, Component } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { createRoot } from 'react-dom/client';
6
6
  import Draggable from 'react-draggable';
@@ -166,7 +166,7 @@ const SVG_ICONS = {
166
166
  'sortable-desc': (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 128 128", fill: "currentColor", children: [jsx("path", { d: "M93.1675 73.1739C94.5691 74.5758 94.7323 76.7924 93.5515 78.3846L93.1675 78.8326L63.6741 108.326L34.1755 78.8326C32.6908 77.3518 32.6014 74.9761 33.9708 73.3881C35.3401 71.8001 37.7033 71.5391 39.3861 72.7899L39.8341 73.1739L63.6741 97.0137L87.5088 73.1739C88.9104 71.7726 91.1274 71.6092 92.7194 72.7899L93.1674 73.1739H93.1675Z", opacity: "1" }), jsx("path", { d: "M34.1714 55.1518C32.7697 53.7499 32.6066 51.5333 33.7874 49.9411L34.1714 49.4931L63.6647 20L93.1634 49.4931C94.6481 50.9739 94.7375 53.3496 93.3681 54.9376C91.9987 56.5256 89.6356 56.7866 87.9527 55.5358L87.5047 55.1517L63.6647 31.312L39.8301 55.1518C38.4285 56.5531 36.2115 56.7165 34.6195 55.5358L34.1715 55.1518L34.1714 55.1518Z", opacity: "0.3" })] })),
167
167
  };
168
168
 
169
- var styles$r = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
169
+ var styles$u = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
170
170
 
171
171
  // Constants
172
172
  const margin$1 = 16;
@@ -456,7 +456,7 @@ const CwTooltipManager = () => {
456
456
  if (!state.isVisible || !state.content) {
457
457
  return null;
458
458
  }
459
- return createPortal(jsx("div", { ref: tooltipRef, className: styles$r["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
459
+ return createPortal(jsx("div", { ref: tooltipRef, className: styles$u["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
460
460
  top: `${tooltipPosition.top}px`,
461
461
  left: `${tooltipPosition.left}px`,
462
462
  opacity: (isPositioned && !isMeasuring) ? 1 : 0,
@@ -537,7 +537,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
537
537
  useEffect(() => {
538
538
  ensureTooltipManager();
539
539
  }, []);
540
- return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$r["cw-tooltip"], children: children }));
540
+ return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$u["cw-tooltip"], children: children }));
541
541
  };
542
542
 
543
543
  function CwIcon(props) {
@@ -1000,7 +1000,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
1000
1000
  return (jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (jsx("div", { className: "cw-loading-container", children: jsx("div", { className: "cw-loading" }) })) : (jsx("div", {})) }));
1001
1001
  }
1002
1002
 
1003
- var styles$q = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
1003
+ var styles$t = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
1004
1004
 
1005
1005
  // Constants moved outside to prevent recreation
1006
1006
  const margin = 16;
@@ -1123,12 +1123,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
1123
1123
  const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
1124
1124
  setIsVisible(true);
1125
1125
  }, showDelay);
1126
- const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$q["cw-generic-tooltip-content"]);
1126
+ const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$t["cw-generic-tooltip-content"]);
1127
1127
  // Memoize tooltip content creation
1128
1128
  const tooltipContent = useMemo(() => {
1129
1129
  if (hide || !isVisible || !content)
1130
1130
  return null;
1131
- return createPortal(jsx("div", { className: styles$q["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
1131
+ return createPortal(jsx("div", { className: styles$t["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
1132
1132
  position: 'fixed',
1133
1133
  top: `${tooltipPosition.top}px`,
1134
1134
  left: `${tooltipPosition.left}px`,
@@ -1143,10 +1143,10 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
1143
1143
  clearTooltipTimeout();
1144
1144
  setIsVisible(false);
1145
1145
  }, [clearTooltipTimeout]);
1146
- return (jsxs("div", { ref: containerRef, className: styles$q["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
1146
+ return (jsxs("div", { ref: containerRef, className: styles$t["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
1147
1147
  };
1148
1148
 
1149
- function CwButton({ text, variant = 'solid', color = 'primary', className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }) {
1149
+ const CwButton = React__default.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }, ref) {
1150
1150
  // Build CSS classes based on variant and props
1151
1151
  let buttonClass = `cw-button-${variant}`;
1152
1152
  // Add icon class only for icon variant without children
@@ -1157,9 +1157,18 @@ function CwButton({ text, variant = 'solid', color = 'primary', className = '',
1157
1157
  buttonClass += ` ${className}`;
1158
1158
  }
1159
1159
  const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
1160
- const buttonElement = (jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, "aria-label": tooltipContent, children: variant === 'icon' ? null : (children ?? (jsxs(Fragment, { children: [icon && jsx(CwIcon, { iconId: icon }), text && jsx("strong", { children: text })] }))) }));
1160
+ const iconElement = icon ? jsx(CwIcon, { iconId: icon }) : null;
1161
+ const textElement = text ? jsx("strong", { children: text }) : null;
1162
+ // Only emit toggle attributes when `pressed` is defined; otherwise output stays identical to a normal button.
1163
+ const pressedProps = pressed !== undefined
1164
+ ? { "aria-pressed": pressed, "data-pressed": pressed ? "true" : undefined }
1165
+ : {};
1166
+ const buttonElement = (jsx("button", { ref: ref, type: "button", className: buttonClass, ...buttonProps, "data-color": color, "data-size": size, ...pressedProps, "aria-label": tooltipContent ?? buttonProps["aria-label"], children: variant === 'icon' ? null : (children ?? (iconPosition === 'right'
1167
+ ? jsxs(Fragment, { children: [textElement, iconElement] })
1168
+ : jsxs(Fragment, { children: [iconElement, textElement] }))) }));
1161
1169
  return tooltipContent ? (jsx(CwTooltipNew, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
1162
- }
1170
+ });
1171
+ CwButton.displayName = "CwButton";
1163
1172
 
1164
1173
  // Reference for draggable modal
1165
1174
  /**
@@ -1196,7 +1205,7 @@ function CwModal(custModalProps) {
1196
1205
  return (jsx("div", { children: custModalProps.modalState && (jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsx("span", { className: "cwelltCloseIcon" }) })] }), jsx("div", { className: "cwelltModalBody", children: jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (jsx("div", { style: { display: "none" } }))] }) })] })) }));
1197
1206
  }
1198
1207
 
1199
- var styles$p = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
1208
+ var styles$s = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
1200
1209
 
1201
1210
  function CwConfirmationPopup(props) {
1202
1211
  const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
@@ -1260,15 +1269,15 @@ function CwConfirmationPopup(props) {
1260
1269
  onCancel();
1261
1270
  }
1262
1271
  };
1263
- return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$p.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$p.popup, style: {
1272
+ return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$s.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$s.popup, style: {
1264
1273
  position: 'absolute',
1265
1274
  top: `${position.top}px`,
1266
1275
  left: `${position.left}px`,
1267
1276
  transform: 'none'
1268
- }, children: [jsx("p", { className: styles$p.message, children: message }), jsxs("div", { className: styles$p.buttons, children: [jsx("button", { className: `${styles$p.button} ${styles$p.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$p.button} ${styles$p.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
1277
+ }, children: [jsx("p", { className: styles$s.message, children: message }), jsxs("div", { className: styles$s.buttons, children: [jsx("button", { className: `${styles$s.button} ${styles$s.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$s.button} ${styles$s.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
1269
1278
  }
1270
1279
 
1271
- var styles$o = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
1280
+ var styles$r = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
1272
1281
 
1273
1282
  // Helper function to parse size values
1274
1283
  const parseSize = (size) => {
@@ -1541,7 +1550,7 @@ const CwDialog = props => {
1541
1550
  }
1542
1551
  }
1543
1552
  }, [open]);
1544
- const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$o["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
1553
+ const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$r["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
1545
1554
  const content = useMemo(() => (jsx("section", { children: children })), [children]);
1546
1555
  const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave, "data-testid": "cw-dialog-save" })) })), [customFooter, onSave, disableSave]);
1547
1556
  const resizeHandles = useMemo(() => size.autoHeight
@@ -1568,7 +1577,7 @@ const CwDialog = props => {
1568
1577
  : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
1569
1578
  return { displayWidth, displayHeight };
1570
1579
  }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
1571
- const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$o["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
1580
+ const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$r["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
1572
1581
  left: `${position.x}px`,
1573
1582
  top: `${position.y}px`,
1574
1583
  width: displayDimensions.displayWidth,
@@ -1729,7 +1738,7 @@ function CwAlign(props) {
1729
1738
  }, children: props.children }));
1730
1739
  }
1731
1740
 
1732
- var styles$n = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","loading":"cw-card-module__loading__-fzlx","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW","loadingOverlay":"cw-card-module__loadingOverlay__8-zVV"};
1741
+ var styles$q = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","loading":"cw-card-module__loading__-fzlx","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW","loadingOverlay":"cw-card-module__loadingOverlay__8-zVV"};
1733
1742
 
1734
1743
  /**
1735
1744
  * CwCard - A simple card component for displaying content in a contained format
@@ -1755,11 +1764,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
1755
1764
  // Construct class names using CSS modules
1756
1765
  const cardClassNames = [
1757
1766
  'cw-card',
1758
- styles$n.card,
1767
+ styles$q.card,
1759
1768
  className,
1760
- clickable ? styles$n.clickable : '',
1761
- disabled ? styles$n.disabled : '',
1762
- isLoading ? styles$n.loading : '',
1769
+ clickable ? styles$q.clickable : '',
1770
+ disabled ? styles$q.disabled : '',
1771
+ isLoading ? styles$q.loading : '',
1763
1772
  ].filter(Boolean).join(' ');
1764
1773
  // Handle click event when card is clickable
1765
1774
  const handleClick = () => {
@@ -1776,15 +1785,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
1776
1785
  // Determine if footer should be rendered
1777
1786
  const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
1778
1787
  // Actions component to reuse
1779
- const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$n.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
1788
+ const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$q.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
1780
1789
  return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
1781
1790
  role: 'button',
1782
1791
  tabIndex: 0,
1783
1792
  onClick: handleClick,
1784
- }), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$n.headerContent, "data-align": resolvedAlign, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] })), jsx("div", { className: styles$n.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$n.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$n.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$n.footerContent, children: footer }))] })), resolvedDirection === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$n.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
1793
+ }), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$q.headerContent, "data-align": resolvedAlign, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] })), jsx("div", { className: styles$q.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$q.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$q.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$q.footerContent, children: footer }))] })), resolvedDirection === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$q.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
1785
1794
  };
1786
1795
 
1787
- var styles$m = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS"};
1796
+ var styles$p = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS"};
1788
1797
 
1789
1798
  /**
1790
1799
  * Option to display in the CwSelect
@@ -1879,10 +1888,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
1879
1888
  icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
1880
1889
  onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
1881
1890
  title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
1882
- }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsx("div", { className: styles$m.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$m.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$m.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx(React__default.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxs("div", { className: styles$m.pagination, children: [jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxs("span", { className: styles$m.pageInfo, children: [currentPage, " / ", totalPages] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
1891
+ }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsx("div", { className: styles$p.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$p.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$p.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx(React__default.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxs("div", { className: styles$p.pagination, children: [jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxs("span", { className: styles$p.pageInfo, children: [currentPage, " / ", totalPages] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
1883
1892
  }
1884
1893
 
1885
- var styles$l = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
1894
+ var styles$o = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
1886
1895
 
1887
1896
  /**
1888
1897
  *
@@ -1899,7 +1908,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
1899
1908
  setVisible_accordionBody(!isVisible_accordionBody);
1900
1909
  };
1901
1910
  // #endregion
1902
- return (jsxs("div", { className: styles$l["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$l["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
1911
+ return (jsxs("div", { className: styles$o["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$o["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
1903
1912
  }
1904
1913
 
1905
1914
  /**
@@ -2157,7 +2166,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
2157
2166
  }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
2158
2167
  }
2159
2168
 
2160
- var styles$k = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
2169
+ var styles$n = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
2161
2170
 
2162
2171
  /**
2163
2172
  * Hook that provides state management for CwSortableTable.
@@ -2220,9 +2229,9 @@ function useSortableTable(initialItems) {
2220
2229
  }
2221
2230
 
2222
2231
  // ─── Drop indicator row ───────────────────────────────────────────────────────
2223
- const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$k.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
2232
+ const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$n.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
2224
2233
  // ─── Loading skeleton ─────────────────────────────────────────────────────────
2225
- const LoadingRows = ({ colSpan }) => (jsx(Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsx("tr", { className: styles$k.skeletonRow, children: jsx("td", { colSpan: colSpan, children: jsx("div", { className: styles$k.skeleton }) }) }, i))) }));
2234
+ const LoadingRows = ({ colSpan }) => (jsx(Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsx("tr", { className: styles$n.skeletonRow, children: jsx("td", { colSpan: colSpan, children: jsx("div", { className: styles$n.skeleton }) }) }, i))) }));
2226
2235
  // ─── Component ────────────────────────────────────────────────────────────────
2227
2236
  /**
2228
2237
  * CwSortableTable
@@ -2309,11 +2318,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
2309
2318
  return items.map((item, index) => {
2310
2319
  const key = item[rowKey];
2311
2320
  const isDragging = draggedItem?.[rowKey] === key;
2312
- return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$k.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
2321
+ return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$n.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
2313
2322
  });
2314
2323
  };
2315
2324
  // ── Render ──────────────────────────────────────────────────────────────
2316
- return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxs("footer", { className: styles$k.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
2325
+ return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxs("footer", { className: styles$n.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
2317
2326
  }
2318
2327
 
2319
2328
  /**
@@ -2512,7 +2521,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
2512
2521
  }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
2513
2522
  }
2514
2523
 
2515
- var styles$j = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
2524
+ var styles$m = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
2516
2525
 
2517
2526
  const TabIcon = ({ icon }) => {
2518
2527
  if (!icon)
@@ -2562,7 +2571,7 @@ function CwTabs(CwTabsProps) {
2562
2571
  const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
2563
2572
  ? { minWidth: CwTabsProps.tabsListWidth }
2564
2573
  : undefined;
2565
- return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$j['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx("span", { className: styles$j['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$j['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
2574
+ return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$m['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx("span", { className: styles$m['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$m['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
2566
2575
  }
2567
2576
 
2568
2577
  /**
@@ -2589,7 +2598,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
2589
2598
  return (jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsx("summary", { children: briefing }), children && jsx("section", { children: children })] }));
2590
2599
  };
2591
2600
 
2592
- var styles$i = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
2601
+ var styles$l = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
2593
2602
 
2594
2603
  const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, detailContent, emptyDetail, searchPlaceholder = 'Search...', onSearch, masterHeader, masterFooter, masterWidth: initialWidth = 320, minMasterWidth = 240, maxMasterWidth = 500, resizable = true, showSearch = true, }) => {
2595
2604
  const [masterWidth, setMasterWidth] = useState(initialWidth);
@@ -2625,10 +2634,10 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
2625
2634
  document.body.style.userSelect = '';
2626
2635
  };
2627
2636
  }, [isResizing, minMasterWidth, maxMasterWidth]);
2628
- const rootClassName = [styles$i['cw-master-detail'], className].filter(Boolean).join(' ');
2629
- return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: items.map((item) => (jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$i.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$i.detail, children: selectedKey && detailContent
2637
+ const rootClassName = [styles$l['cw-master-detail'], className].filter(Boolean).join(' ');
2638
+ return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: items.map((item) => (jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$l.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$l.detail, children: selectedKey && detailContent
2630
2639
  ? detailContent
2631
- : (jsx("div", { className: styles$i['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
2640
+ : (jsx("div", { className: styles$l['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
2632
2641
  };
2633
2642
 
2634
2643
  /**
@@ -2653,7 +2662,7 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
2653
2662
  : emptyValue })] }, item.key))) }));
2654
2663
  };
2655
2664
 
2656
- var styles$h = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
2665
+ var styles$k = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
2657
2666
 
2658
2667
  function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
2659
2668
  const [draggedItem, setDraggedItem] = useState(null);
@@ -2716,15 +2725,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
2716
2725
  }
2717
2726
  };
2718
2727
  if (items.length === 0) {
2719
- return (jsx("div", { className: `${styles$h.sortableList} ${styles$h.emptyState} ${className}`, children: jsx("div", { className: styles$h.emptyMessage, children: emptyMessage }) }));
2728
+ return (jsx("div", { className: `${styles$k.sortableList} ${styles$k.emptyState} ${className}`, children: jsx("div", { className: styles$k.emptyMessage, children: emptyMessage }) }));
2720
2729
  }
2721
- return (jsx("div", { className: `${styles$h.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
2730
+ return (jsx("div", { className: `${styles$k.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
2722
2731
  const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
2723
2732
  const isDragging = draggedItem?.id === item.id;
2724
2733
  const isMoved = movedItems.has(item.id);
2725
2734
  const canExpand = Boolean(expandedContent);
2726
2735
  const isExpanded = expandedItems.has(item.id);
2727
- return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$h.dropIndicator }), jsxs("div", { className: `${styles$h.sortableItem} ${isDragging ? styles$h.dragging : ''} ${isMoved ? styles$h.moved : ''} ${readOnly ? styles$h.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$h.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$h.sortableContent, children: [jsx("div", { className: styles$h.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$h.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$h.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$h.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$h.dropIndicator }))] }, item.id));
2736
+ return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$k.dropIndicator }), jsxs("div", { className: `${styles$k.sortableItem} ${isDragging ? styles$k.dragging : ''} ${isMoved ? styles$k.moved : ''} ${readOnly ? styles$k.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$k.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$k.sortableContent, children: [jsx("div", { className: styles$k.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$k.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$k.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$k.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$k.dropIndicator }))] }, item.id));
2728
2737
  }) }));
2729
2738
  }
2730
2739
 
@@ -2901,7 +2910,7 @@ function CwFileUpload(fileUploadProps) {
2901
2910
  return (jsxs("div", { children: [jsxs("div", { className: "row", children: [jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsx("div", { className: "row", children: jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsx("div", { className: "row error", children: error }), jsx("div", { className: "row", children: jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
2902
2911
  }
2903
2912
 
2904
- var styles$g = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
2913
+ var styles$j = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
2905
2914
 
2906
2915
  const DEFAULT_LABELS = {
2907
2916
  uploadDisabled: 'Upload disabled',
@@ -3068,12 +3077,12 @@ function CwFileUploadMultiple(fileUploadProps) {
3068
3077
  }
3069
3078
  }
3070
3079
  };
3071
- return (jsxs("div", { className: `${styles$g.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$g.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$g.uploadArea} ${fileUploadProps.disabled ? styles$g.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$g.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$g.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$g.filesContainer, children: [jsxs("div", { className: styles$g.fileItem, children: [jsxs("div", { className: styles$g.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$g.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$g.fileInfo, children: jsx("p", { className: styles$g.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
3080
+ return (jsxs("div", { className: `${styles$j.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$j.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$j.uploadArea} ${fileUploadProps.disabled ? styles$j.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$j.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$j.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$j.filesContainer, children: [jsxs("div", { className: styles$j.fileItem, children: [jsxs("div", { className: styles$j.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$j.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$j.fileInfo, children: jsx("p", { className: styles$j.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
3072
3081
  setExistingFile(undefined);
3073
3082
  if (fileUploadProps.onSelect) {
3074
3083
  fileUploadProps.onSelect(null);
3075
3084
  }
3076
- }, disabled: fileUploadProps.disabled, className: styles$g.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$g.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("small", { className: styles$g.filesCount, children: labels.filesSelected(selectedFiles.length) }), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$g.fileItem, children: [jsxs("div", { className: styles$g.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$g.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$g.fileInfo, children: [jsx("p", { className: styles$g.fileName, children: file.name }), jsxs("p", { className: styles$g.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$g.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
3085
+ }, disabled: fileUploadProps.disabled, className: styles$j.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$j.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("small", { className: styles$j.filesCount, children: labels.filesSelected(selectedFiles.length) }), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$j.fileItem, children: [jsxs("div", { className: styles$j.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$j.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$j.fileInfo, children: [jsx("p", { className: styles$j.fileName, children: file.name }), jsxs("p", { className: styles$j.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$j.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
3077
3086
  }
3078
3087
 
3079
3088
  function CwInput(CwInputProps) {
@@ -3114,7 +3123,7 @@ function CwDigit(props) {
3114
3123
  return (jsx("div", { className: "cw-input-text", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "number", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
3115
3124
  }
3116
3125
 
3117
- var styles$f = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
3126
+ var styles$i = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
3118
3127
 
3119
3128
  const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
3120
3129
  const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
@@ -3317,13 +3326,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
3317
3326
  // Calculate background color for the main area based on current hue
3318
3327
  const hueColor = hsvToRgb(hsv.h, 100, 100);
3319
3328
  const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
3320
- return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$f.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$f.colorPickerInteractiveArea, children: [jsx("div", { className: styles$f.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$f.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$f.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$f.colorAreaOverlay, children: [jsx("div", { className: styles$f.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$f.whiteGradient }), jsx("div", { className: styles$f.blackGradient })] }), jsx("div", { className: styles$f.colorAreaCursor, style: {
3329
+ return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$i.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$i.colorPickerInteractiveArea, children: [jsx("div", { className: styles$i.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$i.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$i.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$i.colorAreaOverlay, children: [jsx("div", { className: styles$i.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$i.whiteGradient }), jsx("div", { className: styles$i.blackGradient })] }), jsx("div", { className: styles$i.colorAreaCursor, style: {
3321
3330
  left: `${hsv.s}%`,
3322
3331
  top: `${100 - hsv.v}%`
3323
3332
  } })] })] })] }));
3324
3333
  };
3325
3334
 
3326
- var styles$e = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
3335
+ var styles$h = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
3327
3336
 
3328
3337
  const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
3329
3338
  const [isOpen, setIsOpen] = useState(false);
@@ -3456,11 +3465,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
3456
3465
  break;
3457
3466
  }
3458
3467
  };
3459
- return (jsxs("div", { className: `cw-input-color ${styles$e.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$e.selectColor} ${disabled ? styles$e.disabled : ''} ${readOnly ? styles$e.readOnly : ''}`, style: {
3468
+ return (jsxs("div", { className: `cw-input-color ${styles$h.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$h.selectColor} ${disabled ? styles$h.disabled : ''} ${readOnly ? styles$h.readOnly : ''}`, style: {
3460
3469
  width,
3461
3470
  height,
3462
3471
  backgroundColor: value,
3463
- }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$e.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
3472
+ }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$h.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
3464
3473
  };
3465
3474
 
3466
3475
  /**
@@ -3710,7 +3719,7 @@ function CwInputDateText(props) {
3710
3719
  return (jsx("div", { className: "cw-input-date-text", children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { children: [jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), jsxs("span", { children: [jsx(CwIcon, { iconId: "calendar" }), jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
3711
3720
  }
3712
3721
 
3713
- var styles$d = {"dropZone":"cw-input-image-module__dropZone__ygrGu"};
3722
+ var styles$g = {"dropZone":"cw-input-image-module__dropZone__ygrGu"};
3714
3723
 
3715
3724
  function CwInputImage(props) {
3716
3725
  const [_uploadedImage, setUploadedImage] = useState(null);
@@ -3758,7 +3767,7 @@ function CwInputImage(props) {
3758
3767
  const file = e.target.files?.[0];
3759
3768
  handleFile(file ?? null);
3760
3769
  };
3761
- return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$d.dropZone, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: "Paste" }), jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: "Browse" })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
3770
+ return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$g.dropZone, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: "Paste" }), jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: "Browse" })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
3762
3771
  }
3763
3772
 
3764
3773
  /**
@@ -3890,7 +3899,7 @@ const CwImageArea = forwardRef((props, ref) => {
3890
3899
  });
3891
3900
  CwImageArea.displayName = "CwImageArea";
3892
3901
 
3893
- var styles$c = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
3902
+ var styles$f = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
3894
3903
 
3895
3904
  /**
3896
3905
  * This class represents a week where days can be selected or unselected
@@ -4030,15 +4039,16 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
4030
4039
  setSelectedDays(newWeekdays);
4031
4040
  onChange?.(newWeekdays.toString());
4032
4041
  };
4033
- return (jsx("div", { className: styles$c["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
4042
+ return (jsx("div", { className: styles$f["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
4034
4043
  };
4035
4044
 
4036
- var styles$b = {"check-container":"cw-check-module__check-container__4nscZ","checkbox-group-container":"cw-check-module__checkbox-group-container__WMNbG"};
4045
+ var styles$e = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
4037
4046
 
4038
4047
  function CwCheck(props) {
4039
- const { labelProps, labelText, iconProps, alignment = "row", className, ...inputProps } = props;
4040
- const displayText = labelText || labelProps?.text;
4041
- return (jsx("div", { className: `cw-check ${styles$b["check-container"]}${className ? ` ${className}` : ''}`, children: jsxs("label", { "data-direction": alignment, children: [jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsxs("span", { className: "cw-icon-text", children: [iconProps && jsx(CwIcon, { ...iconProps }), displayText] }))] }) }));
4048
+ const { labelProps, labelText, direction, alignment, className, ...inputProps } = props;
4049
+ const resolvedDirection = direction ?? alignment ?? "row";
4050
+ const displayText = labelProps?.text ?? labelText;
4051
+ return (jsx("div", { className: `cw-check ${styles$e["check-container"]}${className ? ` ${className}` : ''}`, children: jsxs("label", { "data-direction": resolvedDirection, children: [jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsx("span", { className: "cw-icon-text", children: displayText }))] }) }));
4042
4052
  }
4043
4053
 
4044
4054
  function CwCheckbox(CwCheckboxProps) {
@@ -4056,7 +4066,16 @@ function CwCheckbox(CwCheckboxProps) {
4056
4066
  : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
4057
4067
  }
4058
4068
 
4059
- function CwCheckboxGroup({ options, value = [], onChange, labelProps, alignProps, required, disabled, optionsAlignment = "row", className, feedback, }) {
4069
+ /**
4070
+ * CwCheckboxGroup - Multi-select group of native checkbox inputs.
4071
+ *
4072
+ * Use for selecting any number of values from a list of options. Layout follows the
4073
+ * CwKeyValueList / CwRadioGroup convention with two nested {@link CwLayoutProps} axes applied as
4074
+ * `data-*` attributes: `groupLayout` positions the label relative to the group block (root grid),
4075
+ * `itemLayout` controls how the checkboxes flow among themselves (options container) and, on the
4076
+ * opposite axis, each checkbox's own box-to-text layout.
4077
+ */
4078
+ function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayout, itemLayout, required, disabled, className, feedback, alignProps, optionsAlignment, "data-testid": dataTestId, }) {
4060
4079
  const handleChange = (optionValue, checked) => {
4061
4080
  if (checked) {
4062
4081
  onChange([...value, optionValue]);
@@ -4068,15 +4087,57 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, alignProps
4068
4087
  const feedbackMessages = feedback
4069
4088
  ? Array.isArray(feedback) ? feedback : [feedback]
4070
4089
  : [];
4071
- const flexDirection = alignProps?.flexDirection ?? "row";
4072
- const dataDirection = { 'data-direction': flexDirection };
4073
- return (jsxs("div", { className: `cw-checkbox-group ${styles$b["checkbox-group-container"]}${className ? ` ${className}` : ''}`, ...dataDirection, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: `${optionsAlignment === "row" ? "cw-flex-column cw-gap-small" : "cw-flex-row cw-flex-wrap"}`, children: options.map((option) => (jsx(CwCheck, { labelText: option.label, checked: value.includes(option.value), disabled: disabled || option.disabled, alignment: optionsAlignment, onChange: (e) => handleChange(option.value, e.target.checked) }, option.value))) })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
4090
+ // Effective layout — precedence: new `groupLayout`/`itemLayout` > legacy-derived > default.
4091
+ // Legacy `alignProps.flexDirection` drove the label-vs-options axis (default "row" = label
4092
+ // beside the options); map it to `groupLayout.direction`.
4093
+ const groupDirection = groupLayout?.direction
4094
+ ?? (alignProps?.flexDirection === "column" ? "column" : "row");
4095
+ // Legacy `optionsAlignment` is inverted relative to the options flow: "row" stacked the options
4096
+ // (column flow) with each check internally row; "column" laid them inline (row flow) with each
4097
+ // check internally column. Default reproduces the legacy `optionsAlignment="row"` case.
4098
+ const itemDirection = itemLayout?.direction
4099
+ ?? (optionsAlignment === "column" ? "row" : "column");
4100
+ // Each checkbox's box-to-text layout is the opposite of the options flow, mirroring CwRadioGroup.
4101
+ const checkDirection = itemDirection === "row" ? "column" : "row";
4102
+ return (jsxs("div", { className: `cw-checkbox-group ${styles$e.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$e.options, role: "group", "aria-label": labelProps?.text, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (jsx(CwCheck, { labelProps: { text: option.label }, checked: value.includes(option.value), disabled: disabled || option.disabled, direction: checkDirection, onChange: (e) => handleChange(option.value, e.currentTarget.checked) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
4103
+ }
4104
+
4105
+ var styles$d = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
4106
+
4107
+ /** Single native radio input. Building block for CwRadioGroup. */
4108
+ function CwRadio({ label, direction = "row", className, ...inputProps }) {
4109
+ return (jsxs("label", { className: `cw-radio ${styles$d.radio}${className ? ` ${className}` : ""}`, "data-direction": direction, children: [jsx("input", { type: "radio", ...inputProps }), label && jsx("span", { children: label })] }));
4110
+ }
4111
+
4112
+ /**
4113
+ * CwRadioGroup - Single-select group of native radio inputs.
4114
+ *
4115
+ * Built on `<input type="radio">` sharing one `name`, so the browser provides radio-group
4116
+ * semantics (roving tabindex, arrow-key navigation) natively. Use for a single choice from a
4117
+ * list of options; for 2–3 options shown as a strip use CwButtonSwitch.
4118
+ *
4119
+ * Layout follows the CwKeyValueList convention with two nested {@link CwLayoutProps} axes
4120
+ * applied as `data-*` attributes: `groupLayout` positions the label relative to the radiogroup
4121
+ * block (root grid), `itemLayout` controls how the radios flow among themselves (options
4122
+ * container) and, on the opposite axis, each radio's own circle-to-text layout.
4123
+ */
4124
+ function CwRadioGroup({ options, value, onChange, labelProps, groupLayout, itemLayout, required, disabled, className, feedback, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": dataTestId, }) {
4125
+ const groupName = useId();
4126
+ const feedbackMessages = feedback
4127
+ ? Array.isArray(feedback) ? feedback : [feedback]
4128
+ : [];
4129
+ // Each radio's circle-to-text layout is the opposite of the options flow: a stacked list
4130
+ // (itemLayout column) reads best with the circle beside the text; a side-by-side row reads
4131
+ // best with the circle above the text.
4132
+ const radioDirection = itemLayout?.direction === "row" ? "column" : "row";
4133
+ return (jsxs("div", { className: `cw-radio-group ${styles$d.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$d.options, role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : (ariaLabel ?? labelProps?.text), "aria-required": required || undefined, "data-direction": itemLayout?.direction ?? "column", "data-gap": itemLayout?.gap, children: options.map((option) => (jsx(CwRadio, { name: groupName, label: option.label, direction: radioDirection, checked: value === option.value, required: required, disabled: disabled || option.disabled, onChange: () => onChange(option.value) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
4074
4134
  }
4075
4135
 
4076
4136
  function CwToggle(props) {
4077
- const { labelProps, labelText, iconProps, alignment = "row", className, style, ...inputProps } = props;
4078
- const displayText = labelText || labelProps?.text;
4079
- return (jsx("div", { className: `cw-toggle ${className ? ` ${className}` : ''}`, style: style, children: jsxs("label", { className: "cw-toggle-label", "data-direction": alignment, children: [displayText && (jsxs("span", { className: "cw-icon-text", children: [iconProps && jsx(CwIcon, { ...iconProps }), displayText] })), jsx("input", {
4137
+ const { labelProps, labelText, direction, alignment, className, style, ...inputProps } = props;
4138
+ const resolvedDirection = direction ?? alignment ?? "row";
4139
+ const displayText = labelProps?.text ?? labelText;
4140
+ return (jsx("div", { className: `cw-toggle ${className ? ` ${className}` : ''}`, style: style, children: jsxs("label", { className: "cw-toggle-label", "data-direction": resolvedDirection, children: [displayText && (jsx("span", { className: "cw-icon-text", children: displayText })), jsx("input", {
4080
4141
  //data-color={color}
4081
4142
  type: "checkbox", ...inputProps })] }) }));
4082
4143
  }
@@ -4335,7 +4396,7 @@ function CwDropdownFilter(props) {
4335
4396
  return (jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
4336
4397
  }
4337
4398
 
4338
- var styles$a = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
4399
+ var styles$c = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
4339
4400
 
4340
4401
  /**
4341
4402
  * Button that toggles a floating panel with arbitrary children.
@@ -4414,7 +4475,7 @@ function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-st
4414
4475
  }
4415
4476
  panel.showPopover();
4416
4477
  }, [placement]);
4417
- return (jsxs("div", { ref: containerRef, className: styles$a.container, children: [jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsx("div", { ref: panelCallbackRef, className: `${styles$a.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
4478
+ return (jsxs("div", { ref: containerRef, className: styles$c.container, children: [jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsx("div", { ref: panelCallbackRef, className: `${styles$c.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
4418
4479
  }
4419
4480
 
4420
4481
  function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
@@ -4432,13 +4493,13 @@ function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor
4432
4493
  return result;
4433
4494
  }
4434
4495
 
4435
- var styles$9 = {"cw-multifilter-tag":"cw-multi-filter-tag-module__cw-multifilter-tag__Epda-"};
4496
+ var styles$b = {"cw-multifilter-tag":"cw-multi-filter-tag-module__cw-multifilter-tag__Epda-"};
4436
4497
 
4437
4498
  const CwMultiFilterTag = props => {
4438
4499
  const { ID, Name, Value, Category, Removable, PrimaryColor, Selectable, Selected } = props;
4439
4500
  const backgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
4440
4501
  const isOutlineMode = Selected && !Removable;
4441
- return (jsx("li", { className: styles$9["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
4502
+ return (jsx("li", { className: styles$b["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
4442
4503
  if (Selectable)
4443
4504
  props.OnSelect?.(props);
4444
4505
  }, children: jsx(CwChip, { label: Name, colorScheme: "custom", customColor: backgroundColor, variant: isOutlineMode ? "outline" : "soft", closable: Removable, onClose: () => props.OnRemove?.(props),
@@ -4448,7 +4509,7 @@ const CwMultiFilterTag = props => {
4448
4509
  } : undefined }) }));
4449
4510
  };
4450
4511
 
4451
- var styles$8 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0 cw-choice-input-box-module__inputBox__gHY9d"};
4512
+ var styles$a = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0 cw-choice-input-box-module__inputBox__gHY9d"};
4452
4513
 
4453
4514
  /**
4454
4515
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -4675,9 +4736,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
4675
4736
  inputRef.current?.focus();
4676
4737
  }
4677
4738
  };
4678
- return (jsxs("form", { ref: componentRef, id: id, className: `${styles$8["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
4739
+ return (jsxs("form", { ref: componentRef, id: id, className: `${styles$a["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
4679
4740
  e.preventDefault();
4680
- }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$8["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
4741
+ }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$a["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
4681
4742
  switch (e.key) {
4682
4743
  case "Enter":
4683
4744
  case "Tab": {
@@ -4704,7 +4765,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
4704
4765
  break;
4705
4766
  }
4706
4767
  }
4707
- } })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$8["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$8["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { className: selectedCategory === category ? styles$8["category-selected"] : undefined, style: {
4768
+ } })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$a["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$a["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { className: selectedCategory === category ? styles$a["category-selected"] : undefined, style: {
4708
4769
  backgroundColor: getColor(category).primary,
4709
4770
  color: getColor(category).onPrimary,
4710
4771
  }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: displayTags
@@ -4730,7 +4791,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
4730
4791
  } }, props.ID))) })] }))] }));
4731
4792
  };
4732
4793
 
4733
- var styles$7 = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
4794
+ var styles$9 = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
4734
4795
 
4735
4796
  /**
4736
4797
  * Multi-select input with chip tags and searchable dropdown.
@@ -4865,11 +4926,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
4865
4926
  // Keeping containerRef for any other potential use
4866
4927
  const direction = alignProps?.flexDirection ?? "row";
4867
4928
  const feedbackMessages = feedback ? (Array.isArray(feedback) ? feedback : [feedback]) : [];
4868
- return (jsxs("div", { ref: containerRef, className: `${styles$7.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$7.inputBox}${disabled ? ` ${styles$7.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
4869
- inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$7.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$7.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$7.option}${idx === focusedIndex ? ` ${styles$7.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$7.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
4929
+ return (jsxs("div", { ref: containerRef, className: `${styles$9.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$9.inputBox}${disabled ? ` ${styles$9.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
4930
+ inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$9.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$9.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$9.option}${idx === focusedIndex ? ` ${styles$9.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$9.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
4870
4931
  }
4871
4932
 
4872
- var styles$6 = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
4933
+ var styles$8 = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
4873
4934
 
4874
4935
  function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null }) {
4875
4936
  const [expanded, setExpanded] = useState(new Set());
@@ -4936,10 +4997,10 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
4936
4997
  const isLeaf = !hasChildren;
4937
4998
  const isSelected = selectedId?.toString().toLowerCase() === node.id.toString().toLowerCase();
4938
4999
  const selectable = allowParentSelection || isLeaf;
4939
- return (jsxs("div", { className: styles$6["tree-item"], children: [jsxs("div", { className: [
4940
- styles$6["tree-node"],
4941
- isSelected && styles$6["selected"],
4942
- !selectable && styles$6["non-selectable"]
5000
+ return (jsxs("div", { className: styles$8["tree-item"], children: [jsxs("div", { className: [
5001
+ styles$8["tree-node"],
5002
+ isSelected && styles$8["selected"],
5003
+ !selectable && styles$8["non-selectable"]
4943
5004
  ].filter(Boolean).join(' '), style: { paddingLeft: `${depth * 24 + 8}px` }, onClick: () => {
4944
5005
  if (selectable) {
4945
5006
  setSelectedId(node.id);
@@ -4948,7 +5009,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
4948
5009
  else {
4949
5010
  toggleExpand(node.id);
4950
5011
  }
4951
- }, children: [hasChildren && (jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsx("div", { className: `${styles$6["tree-label"]} ${!hasChildren ? styles$6["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$6["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
5012
+ }, children: [hasChildren && (jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsx("div", { className: `${styles$8["tree-label"]} ${!hasChildren ? styles$8["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$8["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
4952
5013
  };
4953
5014
  // Function to search for nodes that match the search term
4954
5015
  const searchInTree = (nodes, searchTerm) => {
@@ -4972,7 +5033,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
4972
5033
  return results;
4973
5034
  };
4974
5035
  const filteredData = searchInTree(data, search);
4975
- return (jsxs("div", { className: `cw-tree-view ${styles$6["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$6["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$6["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
5036
+ return (jsxs("div", { className: `cw-tree-view ${styles$8["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$8["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$8["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
4976
5037
  }
4977
5038
 
4978
5039
  /**
@@ -5330,7 +5391,7 @@ const CwSearchAsync = ({ onSearch, onChange, value, onResolveInitial, onResolveS
5330
5391
  }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeholder, disabled: disabled, required: required, autoComplete: "off", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": showDropdown, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? optionId(highlightedIndex) : undefined, title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selection", variant: "icon", icon: "close", color: "neutral" })) : (icon ? jsx(CwIcon, { ...icon }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, id: listboxId, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { id: optionId(index), className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.id), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.subLabel ? (jsxs("span", { className: "cw-search-async-option-lines", children: [jsx("span", { children: option.label }), jsx("span", { className: "cw-search-async-option-sub", children: option.subLabel })] })) : (option.label) }, option.id))) }) }))] }));
5331
5392
  };
5332
5393
 
5333
- var styles$5 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
5394
+ var styles$7 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
5334
5395
 
5335
5396
  const ARROW_SIZE = 8;
5336
5397
  const SAFETY_MARGIN = 8;
@@ -5471,14 +5532,14 @@ const CwAnchoredMenu = ({ children, options, onSelect, placement = 'bottom', ope
5471
5532
  document.removeEventListener("keydown", handleEscape);
5472
5533
  };
5473
5534
  }, [isOpen]);
5474
- return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$5["menu"], style: {
5535
+ return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$7["menu"], style: {
5475
5536
  top: `${position.y}px`,
5476
5537
  left: `${position.x}px`,
5477
- }, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$5["arrow"], "data-placement": placement }), normalizedOptions.map(option => (jsxs("div", { onClick: (e) => {
5538
+ }, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$7["arrow"], "data-placement": placement }), normalizedOptions.map(option => (jsxs("div", { onClick: (e) => {
5478
5539
  e.stopPropagation();
5479
5540
  e.preventDefault();
5480
5541
  handleOptionClick(option);
5481
- }, className: `${styles$5["item"]} ${option.disabled ? styles$5["disabled"] : ""}`, "data-disabled": option.disabled, children: [option.icon && jsx("span", { className: styles$5["icon"], children: option.icon }), option.label] }, option.key)))] }), document.body)] }));
5542
+ }, className: `${styles$7["item"]} ${option.disabled ? styles$7["disabled"] : ""}`, "data-disabled": option.disabled, children: [option.icon && jsx("span", { className: styles$7["icon"], children: option.icon }), option.label] }, option.key)))] }), document.body)] }));
5482
5543
  };
5483
5544
 
5484
5545
  /**
@@ -5551,12 +5612,143 @@ const CwContextMenu = ({ children, options, offset = DEFAULT_OFFSET, onSelect })
5551
5612
  document.removeEventListener("keydown", handleEscape);
5552
5613
  };
5553
5614
  }, [isOpen]);
5554
- return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$5["menu"], style: {
5615
+ return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$7["menu"], style: {
5555
5616
  top: `${position.y}px`,
5556
5617
  left: `${position.x}px`,
5557
- }, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$5["item"], children: option }, option))) }), document.body)] }));
5618
+ }, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$7["item"], children: option }, option))) }), document.body)] }));
5558
5619
  };
5559
5620
 
5621
+ var styles$6 = {"split":"cw-button-split-module__split__B2KbU","menu":"cw-button-split-module__menu__mKDlt","item":"cw-button-split-module__item__Aqw6f"};
5622
+
5623
+ /**
5624
+ * CwButtonSplit - A primary action joined to a dropdown of alternative actions.
5625
+ *
5626
+ * Composes a main {@link CwButton} with a {@link CwPopoverButton} chevron whose
5627
+ * panel holds a vertical menu of alternatives (rendered as `variant="ghost"` rows).
5628
+ * Both parts share variant, color and size and read as one joined control.
5629
+ *
5630
+ * @example
5631
+ * <CwButtonSplit
5632
+ * text="Save"
5633
+ * icon="save"
5634
+ * onClick={handleSave}
5635
+ * actions={[
5636
+ * { key: "saveAs", label: "Save as…", icon: "copy" },
5637
+ * { key: "saveAndClose", label: "Save and close" },
5638
+ * ]}
5639
+ * onSelect={handleSelect}
5640
+ * />
5641
+ */
5642
+ function CwButtonSplit({ text, icon, onClick, actions, onSelect, variant = "solid", color = "primary", size = "medium", disabled = false, placement = "bottom-end", "data-testid": dataTestId, }) {
5643
+ const handleSelect = (action) => (event) => {
5644
+ onSelect(action.key);
5645
+ event.currentTarget.closest("[popover]")?.hidePopover();
5646
+ };
5647
+ return (jsxs("div", { className: styles$6.split, "data-variant": variant, "data-testid": dataTestId, children: [jsx(CwButton, { text: text, icon: icon, variant: variant, color: color, size: size, onClick: onClick, disabled: disabled }), jsx(CwPopoverButton, { icon: "chevron-down", title: "More actions", variant: variant, color: color, size: size, disabled: disabled, placement: placement, children: jsx("div", { className: styles$6.menu, children: actions.map((action) => (jsx(CwButton, { variant: "ghost", color: "neutral", text: action.label, icon: action.icon, disabled: action.disabled, className: styles$6.item, onClick: handleSelect(action) }, action.key))) }) })] }));
5648
+ }
5649
+
5650
+ /**
5651
+ * Roving-tabindex single-select behaviour for a custom radio group (e.g. a segmented
5652
+ * button strip that has no native grouping). The active segment is the selected one,
5653
+ * or the first enabled option when nothing is selected. Arrow keys (Right/Down = next,
5654
+ * Left/Up = previous) move focus and select, wrapping around and skipping disabled
5655
+ * options; Space/Enter selects the focused segment.
5656
+ *
5657
+ * Native form controls (e.g. `<input type="radio">` sharing a name) already get this
5658
+ * behaviour from the browser — use this hook only for non-native custom groups.
5659
+ */
5660
+ function useRovingSingleSelect(options, value, onChange) {
5661
+ const elementRefs = useRef([]);
5662
+ const selectedIndex = options.findIndex((option) => option.value === value);
5663
+ const firstEnabledIndex = options.findIndex((option) => !option.disabled);
5664
+ // If the selected option is disabled it cannot hold the tab stop (disabled elements are out of
5665
+ // the tab order), so fall back to the first enabled option to keep the group reachable by Tab.
5666
+ const activeIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : firstEnabledIndex;
5667
+ const focusAndSelect = useCallback((index) => {
5668
+ const option = options[index];
5669
+ if (!option || option.disabled)
5670
+ return;
5671
+ onChange(option.value);
5672
+ elementRefs.current[index]?.focus();
5673
+ }, [options, onChange]);
5674
+ const moveFocus = useCallback((fromIndex, direction) => {
5675
+ const count = options.length;
5676
+ if (count === 0)
5677
+ return;
5678
+ let nextIndex = fromIndex;
5679
+ for (let step = 0; step < count; step++) {
5680
+ nextIndex = (nextIndex + direction + count) % count;
5681
+ if (!options[nextIndex]?.disabled) {
5682
+ focusAndSelect(nextIndex);
5683
+ return;
5684
+ }
5685
+ }
5686
+ }, [options, focusAndSelect]);
5687
+ const getSegmentProps = useCallback((index) => ({
5688
+ tabIndex: index === activeIndex ? 0 : -1,
5689
+ ref: (element) => {
5690
+ elementRefs.current[index] = element;
5691
+ },
5692
+ onKeyDown: (event) => {
5693
+ switch (event.key) {
5694
+ case "ArrowRight":
5695
+ case "ArrowDown":
5696
+ event.preventDefault();
5697
+ moveFocus(index, 1);
5698
+ break;
5699
+ case "ArrowLeft":
5700
+ case "ArrowUp":
5701
+ event.preventDefault();
5702
+ moveFocus(index, -1);
5703
+ break;
5704
+ case " ":
5705
+ case "Enter":
5706
+ event.preventDefault();
5707
+ focusAndSelect(index);
5708
+ break;
5709
+ }
5710
+ },
5711
+ }), [activeIndex, moveFocus, focusAndSelect]);
5712
+ return { activeIndex, getSegmentProps };
5713
+ }
5714
+
5715
+ var styles$5 = {"switch":"cw-button-switch-module__switch__vdWV-","segment":"cw-button-switch-module__segment__JmVla","iconOnly":"cw-button-switch-module__iconOnly__-kCwj"};
5716
+
5717
+ /**
5718
+ * CwButtonSwitch - Segmented single-select control: a strip of joined CwButtons.
5719
+ *
5720
+ * The selected segment renders `solid`, the others `outline`, both sharing the `color`
5721
+ * theme (`primary` default, `danger`, or `neutral`). It is a proper ARIA radiogroup with
5722
+ * roving tabindex (one tab stop) and arrow-key navigation, provided by
5723
+ * {@link useRovingSingleSelect}. Use for 2–3 mutually-exclusive options that benefit from
5724
+ * being shown side by side; for a longer list use CwRadioGroup.
5725
+ *
5726
+ * `direction="column"` renders the strip vertically (stacked, full-width segments) instead of
5727
+ * the default horizontal `row`; arrow-key navigation handles both orientations.
5728
+ *
5729
+ * Set `iconOnly` to render just each option's icon; the option's `label` is still required
5730
+ * and is passed as the segment title, so it becomes the tooltip and the accessible name.
5731
+ *
5732
+ * It is an inline control with no form label — if a caption is needed, place it next to the
5733
+ * control at the call site, and pass `aria-label` (or `aria-labelledby`) to name the radiogroup
5734
+ * for screen readers.
5735
+ *
5736
+ * @example
5737
+ * <CwButtonSwitch
5738
+ * options={[{ value: "list", label: "List", icon: "list" }, { value: "grid", label: "Grid", icon: "grid" }]}
5739
+ * value={view}
5740
+ * onChange={setView}
5741
+ * />
5742
+ */
5743
+ function CwButtonSwitch({ options, value, onChange, size = "medium", color = "primary", iconOnly = false, direction = "row", disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": dataTestId, }) {
5744
+ const { getSegmentProps } = useRovingSingleSelect(options, value, onChange);
5745
+ return (jsx("div", { className: `cw-button-switch ${styles$5.switch}`, role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : ariaLabel, "data-direction": direction, "data-testid": dataTestId, children: options.map((option, index) => {
5746
+ const selected = option.value === value;
5747
+ const segmentProps = getSegmentProps(index);
5748
+ return (jsx(CwButton, { text: iconOnly ? undefined : option.label, title: iconOnly ? option.label : undefined, icon: option.icon, size: size, color: color, variant: selected ? "solid" : "outline", role: "radio", "aria-checked": selected, disabled: disabled || option.disabled, onClick: () => onChange(option.value), className: `${styles$5.segment}${iconOnly ? ` ${styles$5.iconOnly}` : ""}`, tabIndex: segmentProps.tabIndex, ref: segmentProps.ref, onKeyDown: segmentProps.onKeyDown }, option.value));
5749
+ }) }));
5750
+ }
5751
+
5560
5752
  /**
5561
5753
  * Save button wrapper (6 uses pending delete)
5562
5754
  * @deprecated Use <CwButton variant="icon" icon="save" onClick={...} /> instead
@@ -11100,4 +11292,4 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
11100
11292
  }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
11101
11293
  };
11102
11294
 
11103
- export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
11295
+ export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwButtonSplit, CwButtonSwitch, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwRadioGroup, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };