@cwellt_software/cwellt-reactjs-lib 1.5.0 → 1.5.1

package/dist/index.cjs.js

@@ -181,7 +181,7 @@ function getContrastColor(color) {
     return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
 }
 
-var styles$v = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
+var styles$x = {"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$v["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$x["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$v["cw-tooltip"], children: children }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$x["cw-tooltip"], children: children }));
 };
 
 const SVG_ICONS = {
@@ -1011,6 +1011,95 @@ function CwLoading({ isLoading = false, text = '', size = 'regular', iconPositio
     return (jsxRuntime.jsxs("div", { "aria-busy": isLoading, className: "cw-loading-container", "data-children": !!children, children: [overlay, jsxRuntime.jsx("div", { className: "cw-loading-disabled-content", children: children })] }));
 }
 
+var styles$w = {"skeleton":"cw-skeleton-module__skeleton__Jvx2x","group":"cw-skeleton-module__group__Cm8AU"};
+
+/*
+ * Internal helper for skeleton allocations (CwSkeleton, tables, cards).
+ * Not exported from the library barrel - not a public API.
+ */
+/** Upper bound so a pathological count cannot allocate an unbounded number of nodes. */
+const MAX_SKELETON_COUNT = 100;
+/**
+ * Normalizes a skeleton count to a finite, floored, non-negative integer capped at
+ * MAX_SKELETON_COUNT. Falls back to `fallback` for undefined, NaN, non-finite or
+ * non-positive input, so valid inputs keep the public default behaviour and only
+ * pathological ones are bounded.
+ */
+function normalizeSkeletonCount(value, fallback) {
+    if (value === undefined || !Number.isFinite(value) || value < 1) {
+        return fallback;
+    }
+    return Math.min(Math.floor(value), MAX_SKELETON_COUNT);
+}
+
+/**
+ * CwSkeleton - a shimmering placeholder that reserves the shape of content while it loads.
+ *
+ * Renders inline <span> elements so it can sit inside text-level contexts. Sizing flows
+ * through component-scoped custom properties; only the props the caller provides are set
+ * inline, so the CSS defaults per variant (and the 60% last-line rule) stay in charge.
+ *
+ * @example
+ * <CwSkeleton count={3} />
+ * <CwSkeleton variant="circle" />
+ * <CwSkeleton variant="rect" height="10rem" />
+ */
+function CwSkeleton({ variant = 'text', width, height, count = 1, radius, gap }) {
+    // Only forward the custom properties the caller actually set; CSS declares the defaults.
+    const style = {
+        ...(width !== undefined && { '--skeleton-width': width }),
+        ...(height !== undefined && { '--skeleton-height': height }),
+        ...(radius !== undefined && { '--skeleton-radius': radius })
+    };
+    // The un-hashed cw-skeleton / cw-skeleton-group classes carry no styles in the
+    // library - they are stable public hooks for exceptional external overrides.
+    const skeletonClassName = ['cw-skeleton', styles$w.skeleton].filter(Boolean).join(' ');
+    const groupClassName = ['cw-skeleton-group', styles$w.group].filter(Boolean).join(' ');
+    const lineCount = normalizeSkeletonCount(count, 1);
+    if (lineCount <= 1) {
+        return (jsxRuntime.jsx("span", { className: skeletonClassName, "data-variant": variant, "aria-hidden": "true", style: style }));
+    }
+    const skeletonElements = Array.from({ length: lineCount }, (_, index) => (jsxRuntime.jsx("span", { className: skeletonClassName, "data-variant": variant, style: style }, index)));
+    const groupStyle = {
+        ...(gap !== undefined && { '--skeleton-gap': gap })
+    };
+    return (jsxRuntime.jsx("span", { className: groupClassName, "aria-hidden": "true", style: groupStyle, children: skeletonElements }));
+}
+
+var styles$v = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-progress-module__value__Q-DrH","header":"cw-progress-module__header__mv5ct","label":"cw-progress-module__label__jwOWp","track":"cw-progress-module__track__572-3","fill":"cw-progress-module__fill__fX1UA"};
+
+/**
+ * CwProgress - a determinate or indeterminate progress bar.
+ *
+ * Use it for measurable operations (imports, uploads, batch jobs). For short
+ * unmeasurable waits use CwLoading; for initial layout loads use CwSkeleton.
+ *
+ * @example
+ * <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 }) {
+    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.
+    const clamped = indeterminate
+        ? undefined
+        : Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), 100);
+    const percent = clamped !== undefined ? Math.round(clamped) : undefined;
+    const showValue = rightLabel !== undefined || (!indeterminate && percent !== undefined);
+    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 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 && {
+                    'aria-valuenow': percent,
+                    'aria-valuemin': 0,
+                    'aria-valuemax': 100
+                }), children: jsxRuntime.jsx("div", { className: styles$v.fill, style: !indeterminate && clamped !== undefined ? { width: `${clamped}%` } : undefined }) }), layout === 'row' && valueLabel] }));
+}
+
 var styles$u = {"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"};
 
 // Constants moved outside to prevent recreation
@@ -1749,7 +1838,7 @@ function CwAlign(props) {
         }, children: props.children }));
 }
 
-var styles$r = {"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"};
+var styles$r = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1769,7 +1858,7 @@ var styles$r = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module
 *   <p>This is the main content of the card.</p>
 * </CwCard>
 **/
-const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", layout, }) => {
+const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, skeletonLines = 3, disabled = false, style, chips = [], variant = "border", direction = "column", layout, }) => {
     const resolvedDirection = layout?.direction ?? direction;
     const resolvedAlign = layout?.align ?? (alignment === 'left' ? 'start' : 'center');
     // Construct class names using CSS modules
@@ -1779,7 +1868,6 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
         className,
         clickable ? styles$r.clickable : '',
         disabled ? styles$r.disabled : '',
-        isLoading ? styles$r.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1795,16 +1883,17 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     const hasChips = chips.length > 0;
     // Determine if footer should be rendered
     const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
-    // Actions component to reuse
-    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$r.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
-    return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
+    // Actions component to reuse. While loading, each provided action renders a circular
+    // ghost sized to the CwButton icon footprint (2rem) - no interactive buttons.
+    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsx("div", { className: styles$r.actions, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [extraActions && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onEdit && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onDelete && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) })) : null;
+    return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && !isLoading && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$r.headerContent, "data-align": resolvedAlign, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$r.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$r.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$r.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$r.footerContent, children: footer }))] })), resolvedDirection === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$r.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("div", { className: styles$r.headerContent, "data-align": resolvedAlign, children: jsxRuntime.jsx(CwSkeleton, { width: "8rem", height: "1.5em" }) }), resolvedDirection === "column" && ActionsComponent] })) : (hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$r.headerContent, "data-align": resolvedAlign, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] }))), jsxRuntime.jsx("div", { className: styles$r.content, children: isLoading ? jsxRuntime.jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("div", { className: styles$r.footerTags, children: jsxRuntime.jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$r.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$r.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$r.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
 };
 
-var styles$q = {"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"};
+var styles$q = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","emptyState":"cw-card-list-module__emptyState__RlqiS"};
 
 /**
  * Option to display in the CwSelect
@@ -1862,7 +1951,7 @@ function CwSelect(props) {
                                     : selectProps.onChange, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
-function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, keyExtractor, ...htmlProps }) {
+function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, skeletonCards = 6, emptyState, sortOptions = [], defaultSortKey, keyExtractor, ...htmlProps }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [sortKey, setSortKey] = React.useState(defaultSortKey || sortOptions[0]?.key || '');
     const [sortDirection, setSortDirection] = React.useState('asc');
@@ -1899,7 +1988,7 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
                         icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
                         onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
                         title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
-                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: styles$q.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$q.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$q.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$q.pagination, children: [jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxRuntime.jsxs("span", { className: styles$q.pageInfo, children: [currentPage, " / ", totalPages] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
+                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: `${styles$q.cardContainer}`, "data-layout": layout, style: gridStyle, "aria-busy": true, children: Array.from({ length: normalizeSkeletonCount(skeletonCards, 6) }, (_, index) => (jsxRuntime.jsx(CwCard, { isLoading: true, children: null }, `skeleton_${index}`))) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$q.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$q.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$q.pagination, children: [jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxRuntime.jsxs("span", { className: styles$q.pageInfo, children: [currentPage, " / ", totalPages] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
 }
 
 var styles$p = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
@@ -1922,6 +2011,21 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
     return (jsxRuntime.jsxs("div", { className: styles$p["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$p["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
+/*
+ * Internal helper for table loading ghosts (CwTable, CwSortableTable).
+ * Not exported from the library barrel - not a public API.
+ */
+const SKELETON_CELL_WIDTHS = ['85%', '60%', '95%', '70%', '80%', '65%'];
+/**
+ * Deterministic width for a table ghost cell so skeleton rows look like real,
+ * unevenly sized content. Derived purely from indices - stable across re-renders
+ * (no reshuffling) - and offset by the column count so the pattern does not
+ * repeat identically per row or per column.
+ */
+function getSkeletonCellWidth(rowIndex, columnIndex, columnCount) {
+    return SKELETON_CELL_WIDTHS[(rowIndex * columnCount + columnIndex) % SKELETON_CELL_WIDTHS.length];
+}
+
 /**
  * A reusable and customizable table component.
  *
@@ -1991,7 +2095,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * @returns React component
  */
-function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, pageLabel = "page", rowSelection }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, skeletonRows = 5, scrollHeight, stickyHeader = false, pageLabel = "page", rowSelection }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [expandedRowKey, setExpandedRowKey] = React.useState(null);
     const [sortConfig, setSortConfig] = React.useState({
@@ -2129,7 +2233,9 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
     };
     const renderTableBody = () => {
         if (loading) {
-            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: jsxRuntime.jsx("div", { children: "Loading data..." }) }) }));
+            // Ghost rows: rendered outside the data/selection/expand code paths, so they
+            // cannot trigger row click, selection or expansion.
+            return Array.from({ length: normalizeSkeletonCount(skeletonRows, 5) }, (_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("td", { className: "cw-table-col-action" }), columns.map((col, columnIndex) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: getSkeletonCellWidth(rowIndex, columnIndex, columns.length) }) }, col.key)))] }, `skeleton_${rowIndex}`)));
         }
         if (!paginatedData || paginatedData.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
@@ -2151,7 +2257,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                         : "cwi-chevron-right"}` }) })), columns.map(col => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(col => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
+    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(col => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
                                         ? sortConfig.direction
                                         : ""}`.trim(), style: {
                                         cursor: col.sortable ? "pointer" : "default",
@@ -2177,7 +2283,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                 }, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
-var styles$o = {"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"};
+var styles$o = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
 
 /**
  * Hook that provides state management for CwSortableTable.
@@ -2242,7 +2348,12 @@ function useSortableTable(initialItems) {
 // ─── Drop indicator row ───────────────────────────────────────────────────────
 const DropIndicatorRow = ({ colSpan }) => (jsxRuntime.jsx("tr", { className: styles$o.dropIndicator, "aria-hidden": true, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", {}) }) }));
 // ─── Loading skeleton ─────────────────────────────────────────────────────────
-const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsxRuntime.jsx("tr", { className: styles$o.skeletonRow, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", { className: styles$o.skeleton }) }) }, i))) }));
+// Plain td cells (no local class): the ghost cells get the same global cw-table
+// padding as real body cells, so row heights match the loaded rows exactly.
+// One cell per real column, so column classNames/widths apply to the ghost too.
+function LoadingRows({ columns, showHandle, skeletonRows }) {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: skeletonRows }).map((_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("td", { className: "cw-table-col-action" }), columns.map((col, columnIndex) => (jsxRuntime.jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: getSkeletonCellWidth(rowIndex, columnIndex, columns.length) }) }, col.key)))] }, rowIndex))) }));
+}
 // ─── Component ────────────────────────────────────────────────────────────────
 /**
  * CwSortableTable
@@ -2259,7 +2370,7 @@ const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { chil
  * - Reorder is calculated in onDragEnd using lastValidDropIndex
  * - draggedItem is tracked in state, not via dataTransfer
  */
-function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = false, textNoData = "No data available", className, tableClassName, maxHeight, showHandle = true, style, saveLabel = "Save order", discardLabel = "Discard", }) {
+function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = false, skeletonRows = 5, textNoData = "No data available", className, tableClassName, maxHeight, showHandle = true, style, saveLabel = "Save order", discardLabel = "Discard", }) {
     const { items, hasChanges, handleReorder, handleSave, handleDiscard, } = useSortableTable(data);
     // Drag state lives in the component, same as CwSortableList
     const [draggedItem, setDraggedItem] = React.useState(null);
@@ -2278,11 +2389,15 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         setLastValidDropIndex(null);
     };
     const handleDragStart = (e, item) => {
+        if (loading)
+            return;
         setDraggedItem(item);
         setLastValidDropIndex(null);
         e.dataTransfer.effectAllowed = "move";
     };
     const handleDragOver = (e, index) => {
+        if (loading)
+            return;
         e.preventDefault();
         if (!draggedItem)
             return;
@@ -2295,6 +2410,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         }
     };
     const handleDragEnd = () => {
+        // Never persist a reorder computed against stale/ghost data while loading.
+        if (loading) {
+            cleanupDragState();
+            return;
+        }
         if (draggedItem && lastValidDropIndex !== null) {
             const dragIndex = items.findIndex(item => item[rowKey] === draggedItem[rowKey]);
             if (dragIndex !== lastValidDropIndex && dragIndex !== lastValidDropIndex - 1) {
@@ -2321,7 +2441,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
     };
     const renderBody = () => {
         if (loading) {
-            return jsxRuntime.jsx(LoadingRows, { colSpan: totalCols });
+            return jsxRuntime.jsx(LoadingRows, { columns: columns, showHandle: showHandle, skeletonRows: normalizeSkeletonCount(skeletonRows, 5) });
         }
         if (!items || items.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: totalCols, className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
@@ -2333,7 +2453,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         });
     };
     // ── Render ──────────────────────────────────────────────────────────────
-    return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxRuntime.jsxs("footer", { className: styles$o.saveBar, children: [jsxRuntime.jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsxRuntime.jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), !loading && hasChanges && (jsxRuntime.jsxs("footer", { className: styles$o.saveBar, children: [jsxRuntime.jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsxRuntime.jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
 }
 
 /**
@@ -2389,7 +2509,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
  *
  * @returns React component
  */
-function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], pageLabel = "page", expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
+function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], pageLabel = "page", expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, skeletonRows = 5, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
     const [internalState, setInternalState] = React.useState({
         page: 1,
         pageSize: pageSizeOptions[0],
@@ -2490,7 +2610,9 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
     };
     const renderTableBody = () => {
         if (loading) {
-            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: jsxRuntime.jsx("div", { children: "Loading data..." }) }) }));
+            // Ghost rows: rendered outside the data/selection/expand code paths, so they
+            // cannot trigger row click, selection or expansion.
+            return Array.from({ length: normalizeSkeletonCount(skeletonRows, 5) }, (_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("td", { className: "cw-table-col-action" }), columns.map((col, columnIndex) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: getSkeletonCellWidth(rowIndex, columnIndex, columns.length) }) }, col.key)))] }, `skeleton_${rowIndex}`)));
         }
         if (!data || data.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
@@ -2508,7 +2630,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                         }, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${state.sortKey === col.dataIndex ? state.sortDirection : ""}`.trim(), style: {
+    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${state.sortKey === col.dataIndex ? state.sortDirection : ""}`.trim(), style: {
                                         cursor: col.sortable ? "pointer" : "default",
                                         userSelect: "none",
                                         width: columnWidths[col.key] ?? col.width,
@@ -2582,7 +2704,7 @@ 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, 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 => (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 })] }));
 }
 
 /**
@@ -2609,9 +2731,17 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
     return (jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsxRuntime.jsx("summary", { children: briefing }), children && jsxRuntime.jsx("section", { children: children })] }));
 };
 
-var styles$m = {"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"};
+var styles$m = {"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","skeletonRow":"cw-master-detail-module__skeletonRow__6BUgt","detailSkeleton":"cw-master-detail-module__detailSkeleton__GcDS4","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
 
-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, }) => {
+/*
+ * Fixed rem widths for the ghosts: the master rows and detail panel size their
+ * content freely, so a percentage-width skeleton would resolve to 100% of ~0 and
+ * collapse to nothing. Fixed widths render regardless of layout. Cycled so rows do
+ * not all look identical.
+ */
+const MASTER_TITLE_WIDTHS = ['9rem', '11rem', '8rem', '10rem'];
+const MASTER_SUBTITLE_WIDTH = '5rem';
+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, loading = false, skeletonRows = 5, }) => {
     const [masterWidth, setMasterWidth] = React.useState(initialWidth);
     const [isResizing, setIsResizing] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -2646,11 +2776,21 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
         };
     }, [isResizing, minMasterWidth, maxMasterWidth]);
     const rootClassName = [styles$m['cw-master-detail'], className].filter(Boolean).join(' ');
-    return (jsxRuntime.jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxRuntime.jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsxRuntime.jsx("search", { children: jsxRuntime.jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsxRuntime.jsx("header", { children: masterHeader })), jsxRuntime.jsx("ul", { children: items.map((item) => (jsxRuntime.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 && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$m.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$m.detail, children: selectedKey && detailContent
+    return (jsxRuntime.jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsxRuntime.jsx("search", { children: jsxRuntime.jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsxRuntime.jsx("header", { children: masterHeader })), jsxRuntime.jsx("ul", { children: loading
+                            ? Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxRuntime.jsxs("li", { "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), jsxRuntime.jsxs("div", { className: styles$m.skeletonRow, children: [jsxRuntime.jsx(CwSkeleton, { variant: "text", width: MASTER_TITLE_WIDTHS[rowIndex % MASTER_TITLE_WIDTHS.length] }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: MASTER_SUBTITLE_WIDTH })] })] }, `skeleton_${rowIndex}`)))
+                            : items.map((item) => (jsxRuntime.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 && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$m.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$m.detail, children: loading ? (jsxRuntime.jsxs("div", { className: styles$m.detailSkeleton, "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "14rem", height: "1.5em" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "22rem" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "18rem" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "20rem" })] })) : selectedKey && detailContent
                     ? detailContent
                     : (jsxRuntime.jsx("div", { className: styles$m['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
 };
 
+/*
+ * Fixed rem widths (not percentages): dt and dd size to their content in the list
+ * item, so a percentage-width skeleton would resolve to 100% of ~0 and collapse to
+ * nothing. Fixed widths are visible in both row (dt beside dd) and column (dt above
+ * dd) item layouts. Cycled by row so keys and values do not all look identical.
+ */
+const SKELETON_KEY_WIDTHS = ["5rem", "6.5rem", "4.5rem", "6rem"];
+const SKELETON_VALUE_WIDTHS = ["8rem", "6rem", "9rem", "7rem"];
 /**
  * A component for displaying key-value pairs in a definition list format
  * Used for read-only display of structured data
@@ -2664,13 +2804,20 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
  *   emptyValue="N/A"
  * />
  */
-const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", groupLayout, itemLayout, ...htmlProps }) => {
+const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", loading = false, skeletonRows = 4, groupLayout, itemLayout, ...htmlProps }) => {
     const itemDirection = itemLayout?.direction ?? direction;
-    return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, ...htmlProps, children: items.map(item => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, children: [jsxRuntime.jsx("dt", { children: item.label }), jsxRuntime.jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
+    const renderItems = () => {
+        if (loading) {
+            // The whole list comes from one data load, so both key and value ghost.
+            return Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, "aria-hidden": "true", children: [jsxRuntime.jsx("dt", { children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: SKELETON_KEY_WIDTHS[rowIndex % SKELETON_KEY_WIDTHS.length] }) }), jsxRuntime.jsx("dd", { children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: SKELETON_VALUE_WIDTHS[rowIndex % SKELETON_VALUE_WIDTHS.length] }) })] }, `skeleton_${rowIndex}`)));
+        }
+        return items.map(item => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, children: [jsxRuntime.jsx("dt", { children: item.label }), jsxRuntime.jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
                         ? (React.isValidElement(item.value)
                             ? item.value
                             : `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`)
-                        : emptyValue })] }, item.key))) }));
+                        : emptyValue })] }, item.key)));
+    };
+    return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, "aria-busy": loading || undefined, ...htmlProps, children: renderItems() }));
 };
 
 var styles$l = {"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"};
@@ -5135,8 +5282,8 @@ function CwNavMenu({ items, loading = false, isActive, renderLink = defaultRende
         }
         return (jsxRuntime.jsx("li", { "data-active": isActive?.(item) ? "true" : undefined, children: renderLink(item, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx(CwIcon, { iconId: item.icon, size: "medium" }), item.label, isFavorite?.(item) && jsxRuntime.jsx(CwIcon, { iconId: "star", size: "small", className: styles$8.favoriteStar })] })) }, item.id));
     };
-    return (jsxRuntime.jsxs("nav", { ...navProps, className: [styles$8.menu, className].filter(Boolean).join(" "), children: [favoritesSlot && (jsxRuntime.jsxs("details", { open: true, ...favoritesProps, className: [styles$8.favorites, favoritesProps?.className].filter(Boolean).join(" "), children: [jsxRuntime.jsxs("summary", { children: [jsxRuntime.jsx(CwIcon, { iconId: "star", size: "medium" }), favoritesLabel] }), jsxRuntime.jsx("div", { className: styles$8.favoritesContent, children: favoritesSlot })] })), beforeTreeSlot, jsxRuntime.jsx("ul", { children: loading
-                    ? Array.from({ length: SKELETON_ROW_COUNT }, (_unused, index) => (jsxRuntime.jsx("li", { className: styles$8.skeleton }, index)))
+    return (jsxRuntime.jsxs("nav", { ...navProps, className: [styles$8.menu, className].filter(Boolean).join(" "), "aria-busy": loading || undefined, children: [favoritesSlot && (jsxRuntime.jsxs("details", { open: true, ...favoritesProps, className: [styles$8.favorites, favoritesProps?.className].filter(Boolean).join(" "), children: [jsxRuntime.jsxs("summary", { children: [jsxRuntime.jsx(CwIcon, { iconId: "star", size: "medium" }), favoritesLabel] }), jsxRuntime.jsx("div", { className: styles$8.favoritesContent, children: favoritesSlot })] })), beforeTreeSlot, jsxRuntime.jsx("ul", { children: loading
+                    ? Array.from({ length: SKELETON_ROW_COUNT }, (_unused, index) => (jsxRuntime.jsx("li", { className: styles$8.skeleton, children: jsxRuntime.jsx(CwSkeleton, { height: "var(--cw-size-small)", radius: "var(--cw-border-radius-small)" }) }, index)))
                     : visibleItems.map(item => renderItem(item, 1)) }), showEmptyMessage && jsxRuntime.jsx("p", { className: styles$8.emptyMessage, children: emptyMessage })] }));
 }
 
@@ -11528,6 +11675,7 @@ exports.CwNavMenu = CwNavMenu;
 exports.CwNote = CwNote;
 exports.CwOption = CwOption;
 exports.CwPopoverButton = CwPopoverButton;
+exports.CwProgress = CwProgress;
 exports.CwRadioGroup = CwRadioGroup;
 exports.CwReportModal = CwReportModal;
 exports.CwScheduler = CwScheduler;
@@ -11536,6 +11684,7 @@ exports.CwSearchInput = CwSearchInput;
 exports.CwSelect = CwSelect;
 exports.CwSelectList = CwSelectList;
 exports.CwSelectListItems = CwSelectListItems;
+exports.CwSkeleton = CwSkeleton;
 exports.CwSortableList = CwSortableList;
 exports.CwSortableTable = CwSortableTable;
 exports.CwSuperScheduler = CwSuperScheduler;