@worknice/whiteboard 0.64.0 → 0.66.0

package/dist/presentation/Avatar_module.css

@@ -92,6 +92,51 @@
   transform: scale(.87);
 }
 
+.badgeBlue-nMftx7 {
+  background: var(--color-blue-t09);
+  color: var(--color-blue-s04);
+}
+
+.badgeGreen-IcxnbE {
+  background: var(--color-green-t09);
+  color: var(--color-green-s04);
+}
+
+.badgeGrey-N5rCOW {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-s04);
+}
+
+.badgeMaroon-Jqd9h0 {
+  background: var(--color-maroon-t09);
+  color: var(--color-maroon-s04);
+}
+
+.badgeOrange-hCLkRt {
+  background: var(--color-orange-t09);
+  color: var(--color-orange-s04);
+}
+
+.badgePurple-y1GraZ {
+  background: var(--color-purple-t09);
+  color: var(--color-purple-s04);
+}
+
+.badgeRed-VV8VMx {
+  background: var(--color-red-t09);
+  color: var(--color-red-s04);
+}
+
+.badgeTeal-nMwmCt {
+  background: var(--color-teal-t09);
+  color: var(--color-teal-s04);
+}
+
+.badgeYellow-RNUX_f {
+  background: var(--color-yellow-t09);
+  color: var(--color-yellow-s04);
+}
+
 .hoverIconOverlay-VNqOuN {
   background: color-mix(in oklch, var(--color-grey-s04) 35%, transparent);
   color: var(--color-white);

package/dist/presentation/CardGrid.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    /** Minimum width of each column before the grid drops one. Defaults to 280. */
+    minColumnWidth?: number;
+};
+/**
+ * A responsive grid of cards. Columns reflow automatically by available width
+ * (down to a single column on narrow/mobile viewports) based on `minColumnWidth`.
+ */
+declare const CardGrid: ({ children, minColumnWidth }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CardGrid;

package/dist/presentation/CardGrid.js

@@ -0,0 +1,12 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__ from "../utils/customProperties.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardGrid_module_js_156110b7__ from "./CardGrid.module.js";
+const CardGrid = ({ children, minColumnWidth = 280 })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__CardGrid_module_js_156110b7__["default"].grid,
+        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__["default"])({
+            "--min-column-width": `${minColumnWidth}px`
+        }),
+        children: children
+    });
+const CardGrid_rslib_entry_ = CardGrid;
+export { CardGrid_rslib_entry_ as default };

package/dist/presentation/CardGrid.module.js

@@ -0,0 +1,5 @@
+import "./CardGrid_module.css";
+const CardGrid_module_rslib_entry_ = {
+    grid: "grid-JYlm0X"
+};
+export { CardGrid_module_rslib_entry_ as default };

package/dist/presentation/CardGrid.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import CardGrid from "./CardGrid";
+declare const meta: Meta<typeof CardGrid>;
+export default meta;
+type Story = StoryObj<typeof CardGrid>;
+export declare const Default: Story;

package/dist/presentation/CardGrid.stories.js

@@ -0,0 +1,34 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardGrid_js_b1a4dbda__ from "./CardGrid.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
+const meta = {
+    title: "Presentation/CardGrid",
+    component: __WEBPACK_EXTERNAL_MODULE__CardGrid_js_b1a4dbda__["default"],
+    argTypes: {
+        children: {
+            control: false
+        }
+    }
+};
+const CardGrid_stories_rslib_entry_ = meta;
+const Default = {
+    args: {
+        minColumnWidth: 280
+    },
+    render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardGrid_js_b1a4dbda__["default"], {
+            ...args,
+            children: Array.from({
+                length: 7
+            }).map((_, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                            font: "h5",
+                            children: `Card ${index + 1}`
+                        })
+                    })
+                }, index))
+        })
+};
+export { Default, CardGrid_stories_rslib_entry_ as default };

package/dist/presentation/CardGrid_module.css

@@ -0,0 +1,6 @@
+.grid-JYlm0X {
+  gap: var(--size-p2);
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-width), 100%), 1fr));
+  display: grid;
+}
+

package/dist/presentation/HeadlineStatisticCard.d.ts

@@ -5,6 +5,8 @@ type Props = {
     disclaimer?: string;
     subtext?: string;
     trailing?: ReactNode;
+    /** Heading level for the card's heading, so it nests correctly under its section. Defaults to "h2". */
+    headingLevel?: "h2" | "h3" | "h4";
 };
-declare const HeadlineStatisticCard: ({ heading, statistic, disclaimer, subtext, trailing }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HeadlineStatisticCard: ({ heading, statistic, disclaimer, subtext, trailing, headingLevel, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HeadlineStatisticCard;

package/dist/presentation/HeadlineStatisticCard.js

@@ -4,14 +4,14 @@ import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardCon
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
-const HeadlineStatisticCard = ({ heading, statistic, disclaimer, subtext, trailing })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+const HeadlineStatisticCard = ({ heading, statistic, disclaimer, subtext, trailing, headingLevel = "h2" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
                 spacing: "n3",
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
                         font: "small-bold",
-                        tagName: "h2",
+                        tagName: headingLevel,
                         children: heading
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {

package/dist/presentation/IconBadge.d.ts

@@ -3,6 +3,7 @@ type Props = {
     icon: ReactNode;
     id?: string;
     color: "blue" | "green" | "grey" | "maroon" | "orange" | "purple" | "red" | "teal" | "yellow";
+    size?: "default" | "large";
 };
-declare const IconBadge: ({ icon, id, color }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IconBadge: ({ icon, id, color, size }: Props) => import("react/jsx-runtime").JSX.Element;
 export default IconBadge;

package/dist/presentation/IconBadge.js

@@ -1,9 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__ from "./IconBadge.module.js";
-const IconBadge = ({ icon, id, color = "grey" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+const IconBadge = ({ icon, id, color = "grey", size = "default" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
         id: id,
         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].badge, {
+            [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].large]: "large" === size,
             [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].blue]: "blue" === color,
             [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].green]: "green" === color,
             [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].grey]: "grey" === color,

package/dist/presentation/IconBadge.module.js

@@ -1,6 +1,7 @@
 import "./IconBadge_module.css";
 const IconBadge_module_rslib_entry_ = {
     badge: "badge-ZsC2nL",
+    large: "large-mFKhst",
     blue: "blue-gyKK1E",
     green: "green-UlDMsp",
     grey: "grey-BAkizH",

package/dist/presentation/IconBadge.stories.d.ts

@@ -0,0 +1,44 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ icon, id, color, size }: {
+        icon: import("react").ReactNode;
+        id?: string;
+        color: "blue" | "green" | "grey" | "maroon" | "orange" | "purple" | "red" | "teal" | "yellow";
+        size?: "default" | "large";
+    }) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    args: {
+        color: "grey";
+        icon: import("react/jsx-runtime").JSX.Element;
+        id: string;
+        size: "default";
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: ["blue", "green", "grey", "maroon", "orange", "purple", "red", "teal", "yellow"];
+        };
+        icon: {
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: "radio";
+            options: string[];
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/** Matches paperwork list leading icons (`PaperworkAssignmentIcon`). */
+export declare const Large: Story;
+export declare const Colors: Story;
+export declare const PaperworkTypes: Story;

package/dist/presentation/IconBadge.stories.js

@@ -0,0 +1,135 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_fa8a03f5__ from "../icons/components/AssignmentCertificate.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_77dafcc0__ from "../icons/components/AssignmentDocument.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentForm_js_bea25b7b__ from "../icons/components/AssignmentForm.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_c3311bf3__ from "../icons/components/AssignmentQuestionnaire.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Paperwork_js_65e48fee__ from "../icons/components/Paperwork.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__ from "./IconBadge.js";
+import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
+const COLORS = [
+    "blue",
+    "green",
+    "grey",
+    "maroon",
+    "orange",
+    "purple",
+    "red",
+    "teal",
+    "yellow"
+];
+const defaultIcon = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentForm_js_bea25b7b__["default"], {
+    tone: "muted"
+});
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"],
+    title: "Presentation/IconBadge",
+    args: {
+        color: "grey",
+        icon: defaultIcon,
+        id: "icon-badge-story",
+        size: "default"
+    },
+    argTypes: {
+        color: {
+            control: "select",
+            options: COLORS
+        },
+        icon: {
+            control: false,
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        size: {
+            control: "radio",
+            options: [
+                "default",
+                "large"
+            ]
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+const IconBadge_stories_rslib_entry_ = meta;
+const Default = {};
+const Large = {
+    args: {
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentForm_js_bea25b7b__["default"], {
+            size: "large",
+            tone: "muted"
+        }),
+        size: "large"
+    }
+};
+const Colors = {
+    args: {},
+    render: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+            spacing: "n2",
+            children: COLORS.map((color)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"], {
+                    color: color,
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_77dafcc0__["default"], {
+                        tone: "muted"
+                    }),
+                    id: `icon-badge-${color}`
+                }, color))
+        })
+};
+const PaperworkTypes = {
+    args: {},
+    render: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
+            spacing: "n2",
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"], {
+                    color: "grey",
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_fa8a03f5__["default"], {
+                        size: "large",
+                        tone: "muted"
+                    }),
+                    id: "icon-badge-certificate",
+                    size: "large"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"], {
+                    color: "grey",
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_77dafcc0__["default"], {
+                        size: "large",
+                        tone: "muted"
+                    }),
+                    id: "icon-badge-document",
+                    size: "large"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"], {
+                    color: "grey",
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentForm_js_bea25b7b__["default"], {
+                        size: "large",
+                        tone: "muted"
+                    }),
+                    id: "icon-badge-form",
+                    size: "large"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"], {
+                    color: "grey",
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_c3311bf3__["default"], {
+                        size: "large",
+                        tone: "muted"
+                    }),
+                    id: "icon-badge-questionnaire",
+                    size: "large"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__IconBadge_js_a428a515__["default"], {
+                    color: "grey",
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Paperwork_js_65e48fee__["default"], {
+                        size: "large",
+                        tone: "muted"
+                    }),
+                    id: "icon-badge-paperwork",
+                    size: "large"
+                })
+            ]
+        })
+};
+export { Colors, Default, Large, PaperworkTypes, IconBadge_stories_rslib_entry_ as default };

package/dist/presentation/IconBadge_module.css

@@ -9,6 +9,11 @@
   display: flex;
 }
 
+.large-mFKhst {
+  width: 24px;
+  height: 24px;
+}
+
 .blue-gyKK1E {
   background: var(--color-blue-t09);
   color: var(--color-blue-s04);

package/dist/presentation/PersonCover.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
         imageUrl?: string | null;
         hue?: string;
         badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        badgeIconTone?: import("./Avatar").BadgeIconTone;
         hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
@@ -19,6 +20,7 @@ declare const meta: {
         imageUrl?: string | null;
         hue?: string;
         badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        badgeIconTone?: import("./Avatar").BadgeIconTone;
         hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
@@ -31,6 +33,7 @@ declare const meta: {
         imageUrl?: string | null;
         hue?: string;
         badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        badgeIconTone?: import("./Avatar").BadgeIconTone;
         hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
@@ -53,6 +56,7 @@ declare const meta: {
         href?: string | undefined;
         imageUrl?: string | null | undefined;
         badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps> | undefined;
+        badgeIconTone?: import("./Avatar").BadgeIconTone | undefined;
         hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     parameters: {

package/dist/presentation/ProgressBar.d.ts

@@ -1,9 +1,13 @@
 type Props = {
     /** Progress from 0 to 1 (e.g. 0.4 for 40%) */
     percentage: number;
+    /** Optional human-readable description of progress for assistive tech (e.g. "3/5 steps complete"). */
+    ariaValueText?: string;
+    /** Fill colour of the bar. @default "green" */
+    color?: "green" | "purple";
 };
 /**
- * Renders a horizontal progress bar with light green fill and rounded sides.
+ * Renders a horizontal progress bar with rounded sides and a configurable fill colour.
  */
-declare const ProgressBar: ({ percentage }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ProgressBar: ({ percentage, ariaValueText, color }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ProgressBar;

package/dist/presentation/ProgressBar.js

@@ -1,16 +1,21 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__ from "./ProgressBar.module.js";
-const ProgressBar = ({ percentage })=>{
+const FILL_CLASS = {
+    green: __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__["default"].fill,
+    purple: __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__["default"].fillPurple
+};
+const ProgressBar = ({ percentage, ariaValueText, color = "green" })=>{
     const clamped = Math.max(0, Math.min(1, percentage)) || 0;
     const percent = 100 * clamped;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__["default"].track,
         role: "progressbar",
-        "aria-valuenow": percent,
+        "aria-valuenow": Math.round(percent),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
+        "aria-valuetext": ariaValueText,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-            className: __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__["default"].fill,
+            className: FILL_CLASS[color],
             style: {
                 width: `${percent}%`
             }

package/dist/presentation/ProgressBar.module.js

@@ -1,6 +1,7 @@
 import "./ProgressBar_module.css";
 const ProgressBar_module_rslib_entry_ = {
     track: "track-q0A2R3",
-    fill: "fill-ureadD"
+    fill: "fill-ureadD",
+    fillPurple: "fillPurple-fmJtA1 fill-ureadD"
 };
 export { ProgressBar_module_rslib_entry_ as default };

package/dist/presentation/ProgressBar.stories.d.ts

@@ -1,7 +1,9 @@
 import type { StoryObj } from "@storybook/nextjs-vite";
 declare const meta: {
-    component: ({ percentage }: {
+    component: ({ percentage, ariaValueText, color }: {
         percentage: number;
+        ariaValueText?: string;
+        color?: "green" | "purple";
     }) => import("react/jsx-runtime").JSX.Element;
     args: {
         percentage: number;
@@ -19,6 +21,8 @@ declare const meta: {
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/nextjs-vite").ReactRenderer, {
         percentage: number;
+        ariaValueText?: string | undefined;
+        color?: "green" | "purple" | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/presentation/ProgressBar_module.css

@@ -7,9 +7,13 @@
 }
 
 .fill-ureadD {
-  background-color: var(--color-green-t07);
+  background-color: var(--color-green-t05);
   border-radius: var(--size-n2);
   height: 100%;
   transition: width .2s;
 }
 
+.fillPurple-fmJtA1 {
+  background-color: var(--color-purple-000);
+}
+

package/dist/presentation/RichList/RichList.js

@@ -587,6 +587,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                                     normalizedPrimary: normalizedPrimary,
                                     normalizedSecondary: normalizedSecondary,
                                     mainSlotMaxWidthPx: mainSlot.size,
+                                    shouldFillMainSlot: mainSlot.fill ?? false,
                                     normalizedContentSlots: normalizedContentSlots,
                                     normalizedTrailingSlots: normalizedTrailingSlots,
                                     isCompactContentSlots: isCompactContentSlots,

package/dist/presentation/RichList/RichListRow.d.ts

@@ -21,6 +21,12 @@ type Props<Type> = {
      * From `mainSlot.size`: max width (px) of the main-slot grid column (`--richlist-primary-track`).
      */
     mainSlotMaxWidthPx: number | undefined;
+    /**
+     * From `mainSlot.fill`: when `true` (and no `mainSlotMaxWidthPx`), the main slot column
+     * grows to absorb the row's leftover width instead of being capped. See
+     * `RichListMainSlot.fill` in types.ts for the usage contract.
+     */
+    shouldFillMainSlot: boolean;
     normalizedContentSlots: Array<NormalizedSlot<Type>>;
     normalizedTrailingSlots: Array<NormalizedSlot<Type>>;
     /**
@@ -39,5 +45,5 @@ type Props<Type> = {
     actionsForRow: Array<RichListRowAction<Type>>;
     lastSelectedRowRef: MutableRefObject<Row<Type> | undefined>;
 };
-declare const RichListRow: <Type>({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
+declare const RichListRow: <Type>({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, shouldFillMainSlot, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
 export default RichListRow;

package/dist/presentation/RichList/RichListRow.js

@@ -20,7 +20,7 @@ function contentSlotAlignClass(align) {
             return __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].contentSlotStart;
     }
 }
-const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef })=>{
+const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, shouldFillMainSlot, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_c6ca8eb1__["default"])();
     const rowOriginal = row.original;
     const hrefValue = href ? href(rowOriginal) : void 0;
@@ -113,6 +113,7 @@ const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick
     const rowMainStyle = void 0 !== mainSlotMaxWidthPx ? {
         ["--richlist-primary-track"]: `${mainSlotMaxWidthPx}px`
     } : void 0;
+    const shouldFillMainSlotColumn = shouldFillMainSlot && void 0 === mainSlotMaxWidthPx && !rowMainHidesContentSlotColumns;
     const rowOverlay = hrefValue ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
         className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowLink,
         href: hrefValue,
@@ -177,7 +178,7 @@ const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick
                                 children: slot.render(rowOriginal)
                             }, slot.id)),
                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowMain, rowMainHidesContentSlotColumns && __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowMainCompact),
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowMain, rowMainHidesContentSlotColumns && __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowMainCompact, shouldFillMainSlotColumn && __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowMainFill),
                             style: rowMainStyle,
                             children: [
                                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {

package/dist/presentation/RichList/RichListRow.module.js

@@ -18,6 +18,7 @@ const RichListRow_module_rslib_entry_ = {
     checkboxLaneActive: "checkboxLaneActive-SAAKUd",
     slotCell: "slotCell-nFtJJc",
     rowMainCompact: "rowMainCompact-FP1jUy",
+    rowMainFill: "rowMainFill-qeFQ1h",
     mainSlot: "mainSlot-G9ZgMV",
     contentSlots: "contentSlots-_4Kf6I",
     contentSlotFixed: "contentSlotFixed-Saogio",

package/dist/presentation/RichList/RichListRow_module.css

@@ -204,6 +204,10 @@
   grid-template-columns: minmax(0, 1fr);
 }
 
+.rowMainFill-qeFQ1h {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
 .mainSlot-G9ZgMV {
   box-sizing: border-box;
   gap: var(--size-n4);

package/dist/presentation/RichList/RichList_module.css

@@ -38,12 +38,14 @@
 }
 
 .listHeader-LmUwi0 {
-  border-bottom: solid var(--size-n5) var(--color-grey-t09);
+  border-bottom: solid var(--size-n5) var(--color-grey-t08);
   box-sizing: border-box;
-  padding-block: var(--size-n2);
-  padding-inline: var(--richlist-padding-inline, var(--size-n1));
+  min-height: var(--row-height);
+  padding: var(--size-00);
   flex-shrink: 0;
+  align-items: center;
   width: 100%;
+  display: grid;
 }
 
 .toolbarStatus-OBimHB {

package/dist/presentation/RichList/types.d.ts

@@ -127,6 +127,23 @@ export type RichListMainSlot<Type> = {
      * Omit to let the layout choose a width (see `RichListRow` / grid track fallback).
      */
     size?: number;
+    /**
+     * When `true`, the main slot column **grows to absorb the row's leftover width** instead
+     * of being capped — the main slot takes `1fr` while the content track sizes to its content,
+     * so the main slot only truncates when it runs out of room.
+     *
+     * To keep the columns aligned across rows, pair this with:
+     * - **fixed-size content slots**, so the `auto` content track (which lives inside the main
+     *   grid) stays a constant width; and
+     * - **fixed-size trailing slots**, so the row's leftover width — the `1fr` the main slot
+     *   absorbs — is constant. (Trailing slots sit outside the main grid in the outer row flex,
+     *   so they affect the leftover width rather than the content track.)
+     *
+     * Ignored when `size` is set (an explicit cap takes precedence), and in the compact
+     * (single-track) layout.
+     * @default `false`
+     */
+    fill?: boolean;
 };
 /**
  * Common fields shared by leading, content (`contentSlots`), and trailing slots in