@cwellt_software/cwellt-reactjs-lib 1.5.2 → 1.5.4

package/dist/index.cjs.js

@@ -181,7 +181,7 @@ function getContrastColor(color) {
     return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
 }
 
-var styles$x = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
+var styles$y = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
 
 // Constants
 const margin$1 = 16;
@@ -471,7 +471,7 @@ const CwTooltipManager = () => {
     if (!state.isVisible || !state.content) {
         return null;
     }
-    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$x["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
+    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$y["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
             top: `${tooltipPosition.top}px`,
             left: `${tooltipPosition.left}px`,
             opacity: (isPositioned && !isMeasuring) ? 1 : 0,
@@ -552,7 +552,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
     React.useEffect(() => {
         ensureTooltipManager();
     }, []);
-    return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$x["cw-tooltip"], children: children }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$y["cw-tooltip"], children: children }));
 };
 
 const SVG_ICONS = {
@@ -587,25 +587,31 @@ function CwIcon(props) {
 /**
 * CwChip - A simple chip/tag component for displaying labels or categories
 *
+* The colour comes from `color`; the older `colorScheme` spelling is deprecated but still
+* honoured, and `color` wins when both are passed.
+*
 * @example
-* <CwChip label="Active" colorScheme="success" />
-* <CwChip label="High Priority" colorScheme="danger" variant="solid" />
-* <CwChip label="Custom" colorScheme="custom" customColor="#8a2be2" />
-* <CwChip label="Outlined" colorScheme="info" variant="outline" />
+* <CwChip label="Active" color="success" />
+* <CwChip label="High Priority" color="danger" variant="solid" />
+* <CwChip label="Custom" color="custom" customColor="#8a2be2" />
+* <CwChip label="Outlined" color="info" variant="outline" />
 * <CwChip label="Removable" closable onClose={() => console.log('closed')} />
 **/
-const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+const CwChip = ({ label, color, colorScheme, customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+    const resolvedColor = color ?? colorScheme ?? 'info';
     // Basic validation
     if (closable && !onClose) {
         console.warn('CwChip: onClose prop is required when closable is true');
     }
-    // Calculate styles based on colorScheme, customColor and variant
+    // One arbitrary colour can only fill two of the four roles, so soft and solid look alike here.
     const chipStyle = React.useMemo(() => {
         if (customColor) {
-            // Simply set the CSS custom properties, CSS handles the rest
+            const contrast = getContrastColor(customColor);
             return {
-                '--chip-accent': customColor,
-                '--chip-text': getContrastColor(customColor),
+                '--accent-light': customColor,
+                '--accent-main': customColor,
+                '--accent-dark': contrast,
+                '--accent-on-main': contrast,
                 ...style
             };
         }
@@ -624,7 +630,79 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
         className,
         closable ? 'cw-chip-closable' : '',
     ].filter(Boolean).join(' ');
-    return (jsxRuntime.jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsxRuntime.jsx(CwIcon, { iconId: icon }), label && jsxRuntime.jsx("span", { children: label }), closable && (jsxRuntime.jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsxRuntime.jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+    return (jsxRuntime.jsxs("span", { className: chipClassNames, "data-color": resolvedColor, "data-variant": variant, "data-icon-only": (Boolean(icon) && !label) || undefined, style: chipStyle, children: [icon && jsxRuntime.jsx(CwIcon, { iconId: icon }), label && jsxRuntime.jsx("span", { children: label }), closable && (jsxRuntime.jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsxRuntime.jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+};
+
+/**
+ * Normalises a raw count into the integer the badge represents: a non-negative whole number.
+ * Both the display string and the `showZero` decision derive from this.
+ */
+function normalizeBadgeCount(count) {
+    return Number.isFinite(count) ? Math.max(0, Math.trunc(count)) : 0;
+}
+/**
+ * Formats a badge count into its display string. Both arguments are normalised, `max` with a
+ * floor of 1 - below that every non-zero count would overflow.
+ *
+ * @param count Raw count to display.
+ * @param max Highest value shown as a number; anything above renders `"{max}+"`.
+ *
+ * @example
+ * formatBadgeCount(7, 99);    // "7"
+ * formatBadgeCount(100, 99);  // "99+"
+ * formatBadgeCount(12, 9);    // "9+"
+ */
+function formatBadgeCount(count, max) {
+    const safeCount = normalizeBadgeCount(count);
+    const safeMax = Number.isFinite(max) ? Math.max(1, Math.trunc(max)) : 1;
+    return safeCount > safeMax ? `${safeMax}+` : `${safeCount}`;
+}
+/**
+ * Resolves the badge's accessibility attributes. A text-less badge with no label is hidden rather
+ * than announced as an empty element; the button or tab around it usually names the thing.
+ *
+ * @param label Caller-supplied accessible name.
+ * @param loading Whether the badge is showing its spinner.
+ * @param hasText Whether the badge renders a count or content.
+ */
+function resolveBadgeAria(label, loading, hasText) {
+    if (label) {
+        return { role: loading ? 'status' : 'img', 'aria-label': label };
+    }
+    return hasText ? {} : { 'aria-hidden': 'true' };
+}
+
+var styles$x = {"badge":"cw-badge-module__badge__PKlak"};
+
+/**
+ * CwBadge - the small coloured circle with a number, used for alert and notification counts.
+ *
+ * Always **in flow** (`inline-flex`); it never positions itself, so overlaying it on an icon
+ * button is the caller's job. One digit stays a circle, wider content such as `"99+"` grows into
+ * a pill. With neither `count` nor `content` it renders as a dot.
+ *
+ * Precedence: `loading` > `content` > `count` > dot. While loading the badge renders regardless
+ * of `showZero`, and the spinner replaces it - circle, background and padding come off.
+ *
+ * @example
+ * <CwBadge count={3} color="danger" />
+ * <CwBadge count={0} showZero={false} />
+ * <CwBadge count={128} max={99} color="warning" variant="soft" />
+ * <CwBadge color="warning" label="Unresolved findings" />
+ * <CwBadge count={0} loading />
+ */
+const CwBadge = ({ count, content, color = 'info', variant = 'solid', size = 'small', showZero = true, loading = false, max = 99, label, className = '', style, }) => {
+    // null counts as absent, so `content={null}` still renders a dot rather than an empty pill.
+    const hasContent = content !== undefined && content !== null;
+    if (!loading && !hasContent && count !== undefined && !showZero && normalizeBadgeCount(count) === 0) {
+        return null;
+    }
+    const countText = !hasContent && count !== undefined
+        ? formatBadgeCount(count, max)
+        : undefined;
+    const isDot = !loading && !hasContent && count === undefined;
+    const badgeClassNames = ['cw-badge', styles$x.badge, className].filter(Boolean).join(' ');
+    return (jsxRuntime.jsx("span", { className: badgeClassNames, "data-color": color, "data-variant": variant, "data-size": size, "data-loading": loading ? 'true' : undefined, "data-dot": isDot ? 'true' : undefined, ...resolveBadgeAria(label, loading, !loading && (hasContent || countText !== undefined)), style: style, children: loading ? jsxRuntime.jsx(CwIcon, { iconId: "spinner", size: "small" }) : hasContent ? content : countText }));
 };
 
 const CW_DEFAULT_MESSAGE_DURATION = 2000;
@@ -1078,7 +1156,7 @@ var styles$v = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-pro
  * <CwProgress value={62} label="Import" color="success" />
  * <CwProgress indeterminate label="Uploading" />
  */
-function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'regular', layout = 'row', color = 'primary', monoValue = false, prominent = false }) {
+function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'regular', layout = 'row', color = 'primary', monoValue = false, prominent = false, className }) {
     const labelId = React.useId();
     // Determinate: a missing or non-finite value is treated as 0 (never NaN), then
     // clamped to [0,100] for aria-valuenow and the fill width. Indeterminate has no value.
@@ -1090,7 +1168,7 @@ function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'r
     const valueText = rightLabel ?? (percent !== undefined ? `${percent}%` : '');
     // The un-hashed cw-progress class carries no styles in the library - a stable
     // public hook for exceptional external overrides only.
-    const rootClassName = ['cw-progress', styles$v.progress].filter(Boolean).join(' ');
+    const rootClassName = ['cw-progress', styles$v.progress, className].filter(Boolean).join(' ');
     const labelSpan = label ? jsxRuntime.jsx("span", { className: styles$v.label, id: labelId, children: label }) : null;
     const valueLabel = showValue ? (jsxRuntime.jsx("span", { className: styles$v.value, "data-mono": monoValue || undefined, children: valueText })) : null;
     return (jsxRuntime.jsxs("div", { className: rootClassName, "data-layout": layout, "data-size": size, "data-color": color, "data-prominent": prominent || undefined, "data-indeterminate": indeterminate || undefined, children: [layout === 'column' && (labelSpan || valueLabel) && (jsxRuntime.jsxs("header", { className: styles$v.header, children: [labelSpan, valueLabel] })), layout === 'row' && labelSpan, jsxRuntime.jsx("div", { className: styles$v.track, role: "progressbar", ...(label && { 'aria-labelledby': labelId }), ...(!indeterminate && percent !== undefined && {
@@ -1246,7 +1324,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$u["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
 };
 
-const CwButton = React.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }, ref) {
+const CwButton = React.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", badge, children, ...buttonProps }, ref) {
     // Build CSS classes based on variant and props
     let buttonClass = `cw-button-${variant}`;
     // Add icon class only for icon variant without children
@@ -1259,13 +1337,19 @@ const CwButton = React.forwardRef(function CwButton({ text, variant = 'solid', c
     const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
     const iconElement = icon ? jsxRuntime.jsx(CwIcon, { iconId: icon }) : null;
     const textElement = text ? jsxRuntime.jsx("strong", { children: text }) : null;
+    // Overlaid, not content: the `cwi-` condition above deliberately ignores it, so a badge
+    // never suppresses the button's own icon. Size defaulted explicitly, not by spread order,
+    // so `size: undefined` in the object cannot clobber it.
+    const badgeElement = badge
+        ? jsxRuntime.jsx(CwBadge, { ...badge, size: badge.size ?? (variant === 'icon' ? 'small' : size) })
+        : null;
     // Only emit toggle attributes when `pressed` is defined; otherwise output stays identical to a normal button.
     const pressedProps = pressed !== undefined
         ? { "aria-pressed": pressed, "data-pressed": pressed ? "true" : undefined }
         : {};
-    const buttonElement = (jsxRuntime.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'
-            ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [textElement, iconElement] })
-            : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconElement, textElement] }))) }));
+    const buttonElement = (jsxRuntime.jsx("button", { ref: ref, type: "button", className: buttonClass, ...buttonProps, "data-color": color, "data-size": size, "data-has-badge": badge ? "true" : undefined, ...pressedProps, "aria-label": buttonProps["aria-label"] ?? tooltipContent, children: variant === 'icon' ? badgeElement : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children ?? (iconPosition === 'right'
+                    ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [textElement, iconElement] })
+                    : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconElement, textElement] })), badgeElement] })) }));
     return tooltipContent ? (jsxRuntime.jsx(CwTooltipNew, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
 });
 CwButton.displayName = "CwButton";
@@ -2654,8 +2738,12 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                                 }, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
-var styles$n = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
+var styles$n = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
 
+const BADGE_COLOR_SCHEMES = ['primary', 'danger', 'warning', 'success', 'info', 'neutral'];
+function isBadgeColorScheme(value) {
+    return BADGE_COLOR_SCHEMES.includes(value);
+}
 const TabIcon = ({ icon }) => {
     if (!icon)
         return null;
@@ -2704,7 +2792,11 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$n['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsxRuntime.jsx("span", { className: styles$n['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$n['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, style: CwTabsProps.contentHeight ? { '--tabs-height': CwTabsProps.contentHeight } : undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$n['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => {
+                    const badgeScheme = tab.badgeColor && isBadgeColorScheme(tab.badgeColor) ? tab.badgeColor : undefined;
+                    const rawBadgeColor = tab.badgeColor && !badgeScheme ? tab.badgeColor : undefined;
+                    return (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, "data-badge-themed": tab.badgeColor ? "true" : undefined, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsxRuntime.jsx(CwBadge, { count: typeof tab.badge === 'number' ? tab.badge : undefined, content: typeof tab.badge === 'string' ? tab.badge : undefined, size: "medium", color: badgeScheme ?? 'primary', variant: badgeScheme ? 'solid' : 'soft', style: rawBadgeColor ? { backgroundColor: rawBadgeColor, color: getContrastColor(rawBadgeColor) } : undefined }))] }, tab.key));
+                }) }), jsxRuntime.jsx("div", { className: styles$n['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, style: CwTabsProps.contentHeight ? { '--tabs-height': CwTabsProps.contentHeight } : undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -3253,14 +3345,16 @@ function CwInput(CwInputProps) {
  * ```
  */
 function CwDigit(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, feedback, ...inputProps } = props;
+    const { alignProps, buttonProps, iconProps, labelProps, feedback, feedbackPosition, ...inputProps } = props;
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
     const feedbackId = React.useId();
     const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
     const describedBy = [inputProps["aria-describedby"], ...feedbackIds].filter(Boolean).join(" ") || undefined;
-    return (jsxRuntime.jsxs("div", { className: "cw-input-text", children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "number", ...inputProps, "aria-describedby": describedBy }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-info", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
+    // data-direction drives the feedback indent, which only makes sense under a label column.
+    const flexDirection = alignProps?.flexDirection ?? "row";
+    return (jsxRuntime.jsxs("div", { className: "cw-input-text", "data-direction": labelProps ? flexDirection : "column", "data-feedback-position": feedbackPosition, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-input-button", children: [jsxRuntime.jsx("input", { type: "number", ...inputProps, "aria-describedby": describedBy }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-info", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 var styles$j = {"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"};
@@ -4070,15 +4164,37 @@ const CwImageArea = React.forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$g = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
+var styles$g = {"container":"cw-weekday-selector-module__container__pwcvx","days":"cw-weekday-selector-module__days__Dd3RH"};
+
+/* 2024-01-01 was a Monday. Formatted in UTC so a negative browser offset cannot shift a day. */
+const MONDAY_UTC = Date.UTC(2024, 0, 1);
+const DAY_IN_MS = 86_400_000;
+const DAY_CODES = ["M", "T", "W", "R", "F", "S", "U"];
+/**
+ * Day names in the fixed MTWRFSU order the selector renders, resolved through Intl so every
+ * locale gets its own letters (es -> LMXJVSD, de -> MDMDFSS) with no table to maintain.
+ *
+ * @param localeCode BCP-47 tag, e.g. "en-GB" | "es" | "de"
+ */
+function getWeekdayNames(localeCode) {
+    const narrow = new Intl.DateTimeFormat(localeCode, { weekday: "narrow", timeZone: "UTC" });
+    const full = new Intl.DateTimeFormat(localeCode, { weekday: "long", timeZone: "UTC" });
+    const names = {};
+    DAY_CODES.forEach((code, index) => {
+        const date = new Date(MONDAY_UTC + index * DAY_IN_MS);
+        names[code] = { letter: narrow.format(date), full: full.format(date) };
+    });
+    return names;
+}
 
+/* The week model behind CwWeekdaySelector, kept apart from the rendering. */
 /**
  * This class represents a week where days can be selected or unselected
  * @remark Selected days are in UPPERCASE, unselected days are in lowercase
  * ```
  * Monday     = "M" | "m"
  * Tuesday    = "T" | "t"
- * Wendnesday = "W" | "w"
+ * Wednesday  = "W" | "w"
  * thuRsday   = "R" | "r"
  * Friday     = "F" | "f"
  * Saturday   = "S" | "s"
@@ -4090,15 +4206,6 @@ class Weekdays {
     static WEEKDAYS_STANDARD_ARRAY_EMPTY = ["m", "t", "w", "r", "f", "s", "u"];
     static WEEKDAYS_STANDARD_STRING_FULL = "MTWRFSU";
     static WEEKDAYS_STANDARD_STRING_EMPTY = "mtwrfsu";
-    static WEEKDAYS_TO_USA_LETTER_FORMAT = new Map([
-        ["M", "M"],
-        ["T", "T"],
-        ["W", "W"],
-        ["R", "T"],
-        ["F", "F"],
-        ["S", "S"],
-        ["U", "S"]
-    ]);
     static WEEKDAYS_TO_USA_SHORT_FORMAT = new Map([
         ["M", "Mon"],
         ["T", "Tue"],
@@ -4117,6 +4224,7 @@ class Weekdays {
         5: "F",
         6: "S"
     };
+    static DAY_NUMBER_BY_CODE = Object.fromEntries(Object.entries(Weekdays.WEEKDAY_MAP).map(([dayNumber, code]) => [code, Number(dayNumber)]));
     days;
     constructor(days = Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL) {
         if (typeof days === "string")
@@ -4160,11 +4268,11 @@ class Weekdays {
     toString() {
         return this.days.join("").trim();
     }
-    toStringFormatted(limiters = { startExistingDay: "{", endExsitingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
+    toStringFormatted(limiters = { startExistingDay: "{", endExistingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
         const result = new Array();
         [...this.days].forEach((letter, index) => {
             if (letter === letter.toUpperCase()) {
-                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExsitingDay);
+                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExistingDay);
             }
             else if (letter === letter.toLowerCase()) {
                 result.push(limiters.startMissingDay +
@@ -4184,33 +4292,77 @@ class Weekdays {
         return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_FULL;
     }
     static getFullWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL;
+        return [...Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL];
     }
     static getEmptyWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY;
+        return [...Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY];
     }
-}
-const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
-    const [selectedDays, setSelectedDays] = React.useState(Weekdays.fromString(value));
-    React.useEffect(() => {
-        setSelectedDays(Weekdays.fromString(value));
-    }, [value]);
-    const handleChange = (day, checked) => {
-        const currentDays = selectedDays.toArray();
-        let updated;
-        if (checked) {
-            updated = currentDays.filter(d => d !== day.toLowerCase());
-            updated.push(day);
+    /** A week with nothing selected. */
+    static empty() {
+        return new Weekdays(Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY);
+    }
+    /**
+     * Like {@link fromString}, but yields an empty week instead of throwing on anything invalid.
+     * For UI fed straight from a backend field that can arrive null, empty or partial.
+     */
+    static tryFromString(value) {
+        if (!value)
+            return Weekdays.empty();
+        try {
+            return Weekdays.fromString(value);
         }
-        else {
-            updated = currentDays.filter(d => d !== day);
-            updated.push(day.toLowerCase());
+        catch {
+            return Weekdays.empty();
         }
-        const newWeekdays = new Weekdays(updated);
-        setSelectedDays(newWeekdays);
-        onChange?.(newWeekdays.toString());
+    }
+    /** Selected flags in MTWRFSU order (Monday first). */
+    toBooleans() {
+        return this.days.map(day => day === day.toUpperCase());
+    }
+    /** @param flags selected flags in MTWRFSU order; missing entries count as unselected */
+    static fromBooleans(flags) {
+        return new Weekdays(Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL.map((day, index) => flags[index] ? day : day.toLowerCase()));
+    }
+    /** 7-character mask in MTWRFSU order where "1" means selected, e.g. "1100100". */
+    toMask() {
+        return this.toBooleans().map(selected => (selected ? "1" : "0")).join("");
+    }
+    /** @param mask 7-character mask in MTWRFSU order where "1" means selected; a shorter, empty or
+     *  missing mask counts the absent days as unselected */
+    static fromMask(mask) {
+        return Weekdays.fromBooleans(Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL.map((_, index) => mask?.[index] === "1"));
+    }
+    /** Selected days as Date.getDay() numbers (0 = Sunday), in MTWRFSU order. */
+    toDayNumbers() {
+        return this.days
+            .filter(day => day === day.toUpperCase())
+            .map(day => Weekdays.DAY_NUMBER_BY_CODE[day]);
+    }
+    /** @param days Date.getDay() numbers (0 = Sunday) */
+    static fromDayNumbers(days) {
+        const selected = new Set(days);
+        return Weekdays.fromBooleans(Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL.map(day => selected.has(Weekdays.DAY_NUMBER_BY_CODE[day])));
+    }
+}
+
+const CwWeekdaySelector = ({ value = "mtwrfsu", onChange, disabled = false, labelProps, layout, feedback, locale = "en-GB", className }) => {
+    const selectedDays = Weekdays.tryFromString(value).toArray();
+    const dayNames = React.useMemo(() => getWeekdayNames(locale), [locale]);
+    const handleChange = (day, checked) => {
+        const updated = selectedDays.filter(d => d !== day && d !== day.toLowerCase());
+        updated.push(checked ? day : day.toLowerCase());
+        onChange?.(new Weekdays(updated).toString());
     };
-    return (jsxRuntime.jsx("div", { className: styles$g["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
+    // Points at the label element rather than copying its text, which also covers a labelProps that
+    // carries children instead of `text`.
+    const labelId = labelProps?.id ?? `${feedbackId}-label`;
+    return (jsxRuntime.jsxs("div", { className: `cw-weekday-selector ${styles$g.container}${className ? ` ${className}` : ""}`, "data-direction": labelProps ? layout?.direction ?? "row" : "column", "data-align": layout?.align, "data-gap": layout?.gap, children: [labelProps && jsxRuntime.jsx(CwLabel, { id: labelId, ...labelProps }), jsxRuntime.jsx("div", { role: "group", className: styles$g.days, "aria-labelledby": labelProps ? labelId : undefined, "aria-describedby": describedBy, children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, "data-letter": dayNames[day].letter, "aria-label": dayNames[day].full, title: dayNames[day].full, checked: selectedDays.includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 };
 
 var styles$f = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
@@ -4258,6 +4410,9 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayou
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     // Effective layout — precedence: new `groupLayout`/`itemLayout` > legacy-derived > default.
     // Legacy `alignProps.flexDirection` drove the label-vs-options axis (default "row" = label
     // beside the options); map it to `groupLayout.direction`.
@@ -4270,7 +4425,7 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayou
         ?? (optionsAlignment === "column" ? "row" : "column");
     // Each checkbox's box-to-text layout is the opposite of the options flow, mirroring CwRadioGroup.
     const checkDirection = itemDirection === "row" ? "column" : "row";
-    return (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$f.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$f.options, role: "group", "aria-label": labelProps?.text, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (jsxRuntime.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) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$f.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$f.options, role: "group", "aria-label": labelProps?.text, "aria-describedby": describedBy, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (jsxRuntime.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) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 var styles$e = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
@@ -4297,11 +4452,14 @@ function CwRadioGroup({ options, value, onChange, labelProps, groupLayout, itemL
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     // Each radio's circle-to-text layout is the opposite of the options flow: a stacked list
     // (itemLayout column) reads best with the circle beside the text; a side-by-side row reads
     // best with the circle above the text.
     const radioDirection = itemLayout?.direction === "row" ? "column" : "row";
-    return (jsxRuntime.jsxs("div", { className: `cw-radio-group ${styles$e.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$e.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) => (jsxRuntime.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) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxRuntime.jsxs("div", { className: `cw-radio-group ${styles$e.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$e.options, role: "radiogroup", "aria-describedby": describedBy, "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) => (jsxRuntime.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) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 function CwToggle(props) {
@@ -4481,6 +4639,13 @@ function CwDropdown({ options, value, onChange, labelProps, alignProps, placehol
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
+    // The trigger is named by reference - the label for the field, the content for the current
+    // value - so neither has to be copied into a string.
+    const labelId = labelProps?.id ?? `${feedbackId}-label`;
+    const valueId = `${feedbackId}-value`;
     // Scroll highlighted item into view
     React.useEffect(() => {
         if (isOpen && highlightedItemRef.current) {
@@ -4549,12 +4714,12 @@ function CwDropdown({ options, value, onChange, labelProps, alignProps, placehol
         }
     }, [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]);
     const flexDirection = alignProps?.flexDirection ?? "row";
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsxRuntime.jsx("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": selectedOption?.label || placeholder, children: jsxRuntime.jsx("div", { className: "cw-dropdown-trigger-content", children: selectedOption ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedOption.color && (jsxRuntime.jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: selectedOption.color } })), jsxRuntime.jsx("span", { children: selectedOption.label })] })) : (jsxRuntime.jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }) }), jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", paddingRight: "0.5rem", flexShrink: 0, cursor: disabled ? "not-allowed" : "pointer" }, onClick: handleTriggerClick, children: jsxRuntime.jsx(CwIcon, { iconId: "chevron-down", size: "small" }) }), renderPanel(jsxRuntime.jsxs("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsxRuntime.jsx("div", { className: dropdownStyles.searchBox, children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: dropdownStyles.searchInput, autoComplete: "off" }) })), jsxRuntime.jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxRuntime.jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
-                                                dropdownStyles.option,
-                                                value === option.value ? dropdownStyles.optionSelected : "",
-                                                highlightedIndex === index ? dropdownStyles.optionFocused : "",
-                                                option.disabled ? dropdownStyles.optionDisabled : "",
-                                            ].filter(Boolean).join(" "), onClick: () => !option.disabled && handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": value === option.value, "aria-disabled": option.disabled, children: [option.color && (jsxRuntime.jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: option.color } })), jsxRuntime.jsx("span", { children: option.label })] }, option.value)))) : (jsxRuntime.jsx("li", { className: dropdownStyles.emptyState, children: "No options available" })) })] }))] })] }), feedbackMessages.map((item, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": item.type, children: item.message }, index)))] }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && jsxRuntime.jsx(CwLabel, { id: labelId, ...labelProps }), jsxRuntime.jsxs("div", { className: dropdownStyles.value, children: [jsxRuntime.jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsxRuntime.jsxs("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-labelledby": labelProps ? `${labelId} ${valueId}` : undefined, "aria-label": labelProps ? undefined : (selectedOption?.label || placeholder), "aria-describedby": describedBy, children: [jsxRuntime.jsx("div", { className: "cw-dropdown-trigger-content", id: valueId, children: selectedOption ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedOption.color && (jsxRuntime.jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: selectedOption.color } })), jsxRuntime.jsx("span", { children: selectedOption.label })] })) : (jsxRuntime.jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }), jsxRuntime.jsx(CwIcon, { iconId: "chevron-down", size: "small" })] }), renderPanel(jsxRuntime.jsxs("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsxRuntime.jsx("div", { className: dropdownStyles.searchBox, children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: dropdownStyles.searchInput, autoComplete: "off" }) })), jsxRuntime.jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxRuntime.jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
+                                                    dropdownStyles.option,
+                                                    value === option.value ? dropdownStyles.optionSelected : "",
+                                                    highlightedIndex === index ? dropdownStyles.optionFocused : "",
+                                                    option.disabled ? dropdownStyles.optionDisabled : "",
+                                                ].filter(Boolean).join(" "), onClick: () => !option.disabled && handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": value === option.value, "aria-disabled": option.disabled, children: [option.color && (jsxRuntime.jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: option.color } })), jsxRuntime.jsx("span", { children: option.label })] }, option.value)))) : (jsxRuntime.jsx("li", { className: dropdownStyles.emptyState, children: "No options available" })) })] }))] }), feedbackMessages.map((item, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": item.type, "aria-live": "polite", children: item.message }, index)))] })] }) }));
 }
 
 function CwDropdownFilter(props) {
@@ -4821,21 +4986,29 @@ var styles$b = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-
  * @param {CwMultiFilterProps} props
  * @returns Set the `onChange` callback to a function to check for changes in the selected filters
  */
-const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeholder = "Write to filter", allCategoriesLabel = "ALL CATEGORIES", className, style }) => {
+const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeholder = "Write to filter", allCategoriesLabel = "ALL CATEGORIES", className, style, testId, initialTagVisibility = "all" }) => {
     const [inputTextValue, setInputTextValue] = React.useState("");
     const [isPanelOpen, setIsPanelOpen] = React.useState(false);
     const [selectedCategory, setSelectedCategory] = React.useState("All");
+    // True once the user touches the current opening (any category click or a search); gates the cascade.
+    const [hasInteracted, setHasInteracted] = React.useState(false);
     const componentRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
         anchorRef: wrapperRef,
         isOpen: isPanelOpen,
-        onClose: () => { setIsPanelOpen(false); setSelectedCategory("All"); setInputTextValue(""); },
+        onClose: () => setIsPanelOpen(false),
     });
+    // Single reset point for all transient panel state on close, whatever closed it - the clear-all
+    // button closes the panel directly and bypasses onClose, so resetting here covers every path.
     React.useEffect(() => {
-        // Outside-click is now handled by useDropdownPortal
-    }, []);
+        if (!isPanelOpen) {
+            setHasInteracted(false);
+            setSelectedCategory("All");
+            setInputTextValue("");
+        }
+    }, [isPanelOpen]);
     const categoriesMappedToTags = () => {
         const categoriesMap = new Map();
         allTags.forEach(tag => {
@@ -4846,6 +5019,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         return categoriesMap;
     };
     const displayTags = React.useMemo(() => {
+        if (initialTagVisibility === "afterCategoryOrSearch" && !hasInteracted) {
+            return [];
+        }
         let tags = Array.from(allTags);
         if (selectedCategory !== "All") {
             tags = tags.filter(t => t.Category === selectedCategory);
@@ -4855,8 +5031,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             tags = tags.filter(t => t.Name.replaceAll(" ", "").toLowerCase().includes(input));
         }
         return tags;
-    }, [allTags, selectedCategory, inputTextValue]);
+    }, [allTags, selectedCategory, inputTextValue, initialTagVisibility, hasInteracted]);
     const handleClickCategory = (category) => {
+        setHasInteracted(true);
         setSelectedCategory(category);
     };
     const rgbAString = (r, g, b) => {
@@ -4881,6 +5058,8 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const handleInputText = (input) => {
         if (selectedCategory !== "All")
             setSelectedCategory("All");
+        if (input.trim() !== "")
+            setHasInteracted(true);
         setInputTextValue(input.trimStart());
     };
     const addTag = (newTag) => {
@@ -4907,7 +5086,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             inputRef.current?.focus();
         }
     };
-    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, "data-testid": testId, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
             e.preventDefault();
         }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$b["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.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 => {
                                     switch (e.key) {
@@ -4962,7 +5141,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                             } }, props.ID))) })] }))] }));
 };
 
-var styles$a = {"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"};
+var styles$a = {"container":"cw-tag-selector-module__container__-do8i","value":"cw-tag-selector-module__value__TDAy3","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"};
 
 /**
  * Multi-select input with chip tags and searchable dropdown.
@@ -5097,8 +5276,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
     // Keeping containerRef for any other potential use
     const direction = alignProps?.flexDirection ?? "row";
     const feedbackMessages = feedback ? (Array.isArray(feedback) ? feedback : [feedback]) : [];
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `${styles$a.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: `${styles$a.inputBox}${disabled ? ` ${styles$a.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
-                            inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsxRuntime.jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsxRuntime.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 && (jsxRuntime.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) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxRuntime.jsxs("div", { ref: panelRef, className: styles$a.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxRuntime.jsxs("div", { className: styles$a.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsxRuntime.jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxRuntime.jsxs("li", { className: `${styles$a.option}${idx === focusedIndex ? ` ${styles$a.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsxRuntime.jsx("span", { className: styles$a.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `${styles$a.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: styles$a.value, children: [jsxRuntime.jsxs("div", { className: `${styles$a.inputBox}${disabled ? ` ${styles$a.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
+                                    inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsxRuntime.jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off", "aria-describedby": describedBy }), value.length > 0 && !disabled && (jsxRuntime.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) => (jsxRuntime.jsx("p", { id: feedbackIds[i], className: "cw-input-feedback", "data-color": fb.type, "aria-live": "polite", children: fb.message }, i)))] })] }), renderPanel((showSelectAll || filtered.length > 0) ? (jsxRuntime.jsxs("div", { ref: panelRef, className: styles$a.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxRuntime.jsxs("div", { className: styles$a.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsxRuntime.jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxRuntime.jsxs("li", { className: `${styles$a.option}${idx === focusedIndex ? ` ${styles$a.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsxRuntime.jsx("span", { className: styles$a.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
 }
 
 var styles$9 = {"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"};
@@ -6109,7 +6291,7 @@ function CwBtnCancel({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...res
     return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "cancel", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Cancel" }));
 }
 
-var styles$4 = {"pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module__pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module__pickerPopup__dkxJo"};
+var styles$4 = {"value":"cw-pickers-base-module__value__BR67P","pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module__pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module__pickerPopup__dkxJo"};
 
 /**
  * Renders a picker popup in a portal so it escapes overflow containers.
@@ -6166,6 +6348,9 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const prevValueRef = React.useRef(undefined);
@@ -6346,11 +6531,11 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale$1, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
-                                            today: new Date(),
-                                        }, modifiersClassNames: {
-                                            today: "rdp-day-today",
-                                        } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: styles$4.value, children: [jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, "aria-describedby": describedBy, required: required, size: displayFormat.length }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale$1, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) }));
 }
 
 var rangeStyles = {"rangeWrapper":"cw-range-picker-module__rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module__rangePopup__E5jd1","rangeCalendarRow":"cw-range-picker-module__rangeCalendarRow__VTxi0","presetList":"cw-range-picker-module__presetList__INiLo","rangeError":"cw-range-picker-module__rangeError__qHMdi"};
@@ -6989,14 +7174,14 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, size: displayFormat.length, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, size: displayFormat.length, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
                                             } })] }), jsxRuntime.jsx("div", { role: "alert", "aria-live": "polite", className: rangeStyles.rangeError, children: rangeErrorMessage })] }))] })] }) }));
 }
 
-var timeStyles = {"timePickerPopup":"cw-time-picker-module__timePickerPopup__BN63t","timePickerList":"cw-time-picker-module__timePickerList__E88pr","selected":"cw-time-picker-module__selected__qVnfL","hasIcons":"cw-time-picker-module__hasIcons__ZiGUf","notIcons":"cw-time-picker-module__notIcons__3icu1"};
+var timeStyles = {"timePickerPopup":"cw-time-picker-module__timePickerPopup__BN63t","timePickerList":"cw-time-picker-module__timePickerList__E88pr","selected":"cw-time-picker-module__selected__qVnfL","field":"cw-time-picker-module__field__kPvGN","narrow":"cw-time-picker-module__narrow__Z7lCI"};
 
 const isMobileDevice = () => {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -7158,7 +7343,7 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
         return (jsxRuntime.jsx("div", { className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$4.pickerWrapper, children: jsxRuntime.jsx("input", { type: "time", value: displayValue, onChange: handleNativeChange, min: minTime, max: maxTime, step: interval * 60, disabled: disabled, required: required, placeholder: placeholder, className: "cw-timepicker-native" }) })] }) }));
     }
     // Custom time picker
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 5, className: showClear ? timeStyles.hasIcons : timeStyles.notIcons }), showClear && (jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsxRuntime.jsx(CwIcon, { iconId: "clock" })) })), renderPopup(jsxRuntime.jsx("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, style: popupStyle, children: jsxRuntime.jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: `${styles$4.pickerWrapper} ${timeStyles.field}${showClear ? "" : ` ${timeStyles.narrow}`}`, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 5 }), showClear && (jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsxRuntime.jsx(CwIcon, { iconId: "clock" })) })), renderPopup(jsxRuntime.jsx("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, style: popupStyle, children: jsxRuntime.jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
                                     const isSelected = time === value;
                                     return (jsxRuntime.jsx("button", { ref: isSelected ? selectedItemRef : null, type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
                                 }) }) }))] })] }) }));
@@ -7824,6 +8009,9 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const prevValueRef = React.useRef(undefined);
@@ -7930,11 +8118,11 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
     const defaultMonthJsDate = defaultMonth
         ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
         : selectedJsDate;
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale$1, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
-                                            today: new Date(),
-                                        }, modifiersClassNames: {
-                                            today: "rdp-day-today",
-                                        } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: styles$4.value, children: [jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, "aria-describedby": describedBy, required: required, size: displayFormat.length }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale$1, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) }));
 }
 
 // DateTimePickerState - immutable domain model for the Temporal date-time picker.
@@ -8672,7 +8860,7 @@ function CwDateRangePickerTemporal({ value, onChange, minDate, maxDate, disabled
     const defaultMonthJsDate = defaultMonth
         ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
         : (value?.from ? plainDateToJsDate(value.from) : undefined);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonthJsDate, locale: locale$1, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, size: displayFormat.length, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, size: displayFormat.length, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonthJsDate, locale: locale$1, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
@@ -10238,6 +10426,7 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
 exports.CwAccordionContainer = CwAccordionContainer;
 exports.CwAlign = CwAlign;
 exports.CwAnchoredMenu = CwAnchoredMenu;
+exports.CwBadge = CwBadge;
 exports.CwBtnApprove = CwBtnApprove;
 exports.CwBtnCancel = CwBtnCancel;
 exports.CwBtnDelete = CwBtnDelete;