@arbor-education/design-system.components 0.13.1 → 0.14.0

package/dist/components/kpiCard/KPICard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.js","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAarE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAqB,EAAE;IAChE,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,GAAG,KAAK,EACpB,QAAQ,GAAG,KAAK,GACjB,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,CACd,eAAK,SAAS,EAAC,aAAa,aAC1B,YAAG,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAK,EAC7C,aAAG,SAAS,EAAC,oBAAoB,aAC9B,KAAK,EACL,YAAY,IAAI,eAAM,SAAS,EAAC,qBAAqB,kBAAS,IAC7D,EACH,QAAQ,IACL,CACP,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,OACC,uBAAuB,CAAC,KAAK,CAAC,EAClC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,OAAO,YAEd,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/kpiCard/KPICard.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (props: import("./KPICard").KPICardProps) => React.JSX.Element;
+};
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export default meta;
+//# sourceMappingURL=KPICard.stories.d.ts.map

package/dist/components/kpiCard/KPICard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI;;;CAGsB,CAAC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/kpiCard/KPICard.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KVPList } from '../kvpList/KVPList';
+import { Progress } from '../progress/Progress';
+import { KPICard } from './KPICard';
+const meta = {
+    title: 'Components/Card/KPICard',
+    component: KPICard,
+};
+export const Default = {
+    args: {
+        label: 'KPI label text',
+        value: 'XX.X',
+        isPercentage: true,
+    },
+    render: args => (_jsxs(KPICard, { ...args, children: [_jsx(KVPList, { "aria-label": "Summary values", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "strong", children: "XX.X" })] }) }), _jsxs(KVPList, { "aria-label": "Progress values", children: [_jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "neutral", children: "X" }), _jsx(KVPList.Definition, { "aria-hidden": "true", isRow: true, children: _jsx(Progress, { "aria-label": "Progress bar first", max: 100, value: 95 }) })] }), _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "neutral", children: "X" }), _jsx(KVPList.Definition, { "aria-hidden": "true", isRow: true, children: _jsx(Progress, { "aria-label": "Progress bar second", max: 100, value: 95 }) })] })] })] })),
+};
+export default meta;
+//# sourceMappingURL=KPICard.stories.js.map

package/dist/components/kpiCard/KPICard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.stories.js","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,OAAO;CACY,CAAC;AAIjC,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,gBAAgB;QACvB,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,kBAAY,gBAAgB,YAClC,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,QAAQ,qBAA0B,IACrD,GACN,EACV,MAAC,OAAO,kBAAY,iBAAiB,aACnC,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,SAAS,kBAAuB,EAC/D,KAAC,OAAO,CAAC,UAAU,mBAAa,MAAM,EAAC,KAAK,kBAC1C,KAAC,QAAQ,kBAAY,oBAAoB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAI,GAC9C,IACT,EACd,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,SAAS,kBAAuB,EAC/D,KAAC,OAAO,CAAC,UAAU,mBAAa,MAAM,EAAC,KAAK,kBAC1C,KAAC,QAAQ,kBAAY,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAI,GAC/C,IACT,IACN,IACF,CACX;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/kpiCard/KPICard.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=KPICard.test.d.ts.map

package/dist/components/kpiCard/KPICard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.test.d.ts","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}

package/dist/components/kpiCard/KPICard.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test, vi } from 'vitest';
+import { KPICard } from './KPICard';
+import { KVPList } from '../kvpList/KVPList';
+describe('KPICard', () => {
+    test('renders header content and kvp rows', () => {
+        render(_jsx(KPICard, { isPercentage: true, label: "Attendance", value: "95.4", children: _jsx(KVPList, { "aria-label": "Breakdown", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Summary" }), _jsx(KVPList.Definition, { prominence: "strong", children: "95.4" })] }) }) }));
+        expect(screen.getByText('Attendance')).toBeInTheDocument();
+        expect(screen.getAllByText('95.4')).toHaveLength(2);
+        expect(screen.getByText('%')).toBeInTheDocument();
+    });
+    test('does not render a percentage suffix when isPercentage is false', () => {
+        render(_jsx(KPICard, { label: "Attendance", value: "95.4" }));
+        expect(screen.queryByText('%')).not.toBeInTheDocument();
+    });
+    test('uses the shared card shell for click interaction', () => {
+        const handleClick = vi.fn();
+        render(_jsx(KPICard, { "aria-label": "Attendance KPI card", label: "Attendance", onClick: handleClick, value: "95.4" }));
+        fireEvent.click(screen.getByRole('button', { name: 'Attendance KPI card' }));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test('supports keyboard activation through the shared card shell', () => {
+        const handleClick = vi.fn();
+        render(_jsx(KPICard, { "aria-label": "Attendance KPI card", label: "Attendance", onClick: handleClick, value: "95.4" }));
+        fireEvent.keyDown(screen.getByRole('button', { name: 'Attendance KPI card' }), { key: 'Enter' });
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test('does not invoke click handlers when disabled', () => {
+        const handleClick = vi.fn();
+        render(_jsx(KPICard, { "aria-label": "Attendance KPI card", disabled: true, label: "Attendance", onClick: handleClick, value: "95.4" }));
+        fireEvent.click(screen.getByRole('button', { name: 'Attendance KPI card' }));
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=KPICard.test.js.map

package/dist/components/kpiCard/KPICard.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.test.js","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/kvpList/KVPList.d.ts

@@ -0,0 +1,34 @@
+export type KVPListProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+};
+export type KVPListRowProps = React.HTMLAttributes<HTMLDListElement> & {
+    children?: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+};
+export type KVPListTermProps = React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+};
+export type KVPListDefinitionProps = React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+    isRow?: boolean;
+    isPercentage?: boolean;
+    prominence?: 'neutral' | 'strong';
+};
+export declare const KVPList: {
+    ({ children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: KVPListProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Row: {
+        ({ children, className, orientation, ...rest }: KVPListRowProps): React.JSX.Element;
+        displayName: string;
+    };
+    Term: {
+        ({ children, className, ...rest }: KVPListTermProps): React.JSX.Element;
+        displayName: string;
+    };
+    Definition: {
+        ({ children, className, isRow, isPercentage, prominence, ...rest }: KVPListDefinitionProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=KVPList.d.ts.map

package/dist/components/kvpList/KVPList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVPList.d.ts","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CACnC,CAAC;AAoFF,eAAO,MAAM,OAAO;yGA3EjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;wDAiBhC,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAiBnC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;4EAapC,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;CAgC3C,CAAC"}

package/dist/components/kvpList/KVPList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const KVPListRoot = ({ children, className, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest }) => (_jsx("div", { className: classNames('ds-kvp-list', className), role: role ?? (ariaLabel || ariaLabelledBy ? 'group' : undefined), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest, children: children }));
+const KVPListRow = ({ children, className, orientation = 'vertical', ...rest }) => (_jsx("dl", { className: classNames('ds-kvp-list__row', `ds-kvp-list__row--${orientation}`, className), ...rest, children: children }));
+const KVPListTerm = ({ children, className, ...rest }) => (_jsx("dt", { className: classNames('ds-kvp-list__term', className), ...rest, children: children }));
+const KVPListDefinition = ({ children, className, isRow = false, isPercentage = false, prominence = 'neutral', ...rest }) => (_jsxs("dd", { className: classNames('ds-kvp-list__description', `ds-kvp-list__description--${prominence}`, {
+        'ds-kvp-list__description--row': isRow,
+    }, className), ...rest, children: [children, isPercentage
+            ? (_jsx("span", { className: "ds-kvp-list__suffix", children: "%" }))
+            : null] }));
+KVPListRoot.displayName = 'KVPList';
+KVPListRow.displayName = 'KVPList.Row';
+KVPListTerm.displayName = 'KVPList.Term';
+KVPListDefinition.displayName = 'KVPList.Definition';
+export const KVPList = Object.assign(KVPListRoot, {
+    Row: KVPListRow,
+    Term: KVPListTerm,
+    Definition: KVPListDefinition,
+});
+//# sourceMappingURL=KVPList.js.map

package/dist/components/kvpList/KVPList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVPList.js","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAsBpC,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,IAAI,EACM,EAAqB,EAAE,CAAC,CACrC,cACE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,gBACrD,SAAS,qBACJ,cAAc,KAC3B,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,UAAU,EACxB,GAAG,IAAI,EACS,EAAqB,EAAE,CAAC,CACxC,aACE,SAAS,EAAE,UAAU,CACnB,kBAAkB,EAClB,qBAAqB,WAAW,EAAE,EAClC,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACN,CACN,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACU,EAAqB,EAAE,CAAC,CACzC,aAAI,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,KAAM,IAAI,YAChE,QAAQ,GACN,CACN,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,KAAK,EACb,YAAY,GAAG,KAAK,EACpB,UAAU,GAAG,SAAS,EACtB,GAAG,IAAI,EACgB,EAAqB,EAAE,CAAC,CAC/C,cACE,SAAS,EAAE,UAAU,CACnB,0BAA0B,EAC1B,6BAA6B,UAAU,EAAE,EACzC;QACE,+BAA+B,EAAE,KAAK;KACvC,EACD,SAAS,CACV,KACG,IAAI,aAEP,QAAQ,EACR,YAAY;YACX,CAAC,CAAC,CACE,eAAM,SAAS,EAAC,qBAAqB,kBAE9B,CACR;YACH,CAAC,CAAC,IAAI,IACL,CACN,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC;AACpC,UAAU,CAAC,WAAW,GAAG,aAAa,CAAC;AACvC,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,iBAAiB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAErD,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IAChD,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,iBAAiB;CAC9B,CAAC,CAAC"}

package/dist/components/kvpList/KVPList.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: import("./KVPList").KVPListProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        Row: {
+            ({ children, className, orientation, ...rest }: import("./KVPList").KVPListRowProps): React.JSX.Element;
+            displayName: string;
+        };
+        Term: {
+            ({ children, className, ...rest }: import("./KVPList").KVPListTermProps): React.JSX.Element;
+            displayName: string;
+        };
+        Definition: {
+            ({ children, className, isRow, isPercentage, prominence, ...rest }: import("./KVPList").KVPListDefinitionProps): React.JSX.Element;
+            displayName: string;
+        };
+    };
+};
+type Story = StoryObj<typeof meta>;
+export declare const Summary: Story;
+export declare const WithProgressAndPercentage: Story;
+export declare const WithProgressNoPercentage: Story;
+export default meta;
+//# sourceMappingURL=KVPList.stories.d.ts.map

package/dist/components/kvpList/KVPList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVPList.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;CAGsB,CAAC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAYvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAYtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/kvpList/KVPList.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '../progress/Progress';
+import { KVPList } from './KVPList';
+const meta = {
+    title: 'Components/KVPList',
+    component: KVPList,
+};
+export const Summary = {
+    render: args => (_jsx(KVPList, { ...args, "aria-label": "Attendance metrics", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Attendance" }), _jsx(KVPList.Definition, { isPercentage: true, prominence: "strong", children: "95" })] }) })),
+};
+export const WithProgressAndPercentage = {
+    render: args => (_jsx(KVPList, { ...args, "aria-label": "Attendance breakdown", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { isPercentage: true, prominence: "neutral", children: "95" }), _jsx(KVPList.Definition, { "aria-hidden": "true", isRow: true, children: _jsx(Progress, { "aria-label": "Attendance progress", max: 100, value: 95 }) })] }) })),
+};
+export const WithProgressNoPercentage = {
+    render: args => (_jsx(KVPList, { ...args, "aria-label": "Attendance breakdown without percentage", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Bar label text" }), _jsx(KVPList.Definition, { prominence: "neutral", children: "X" }), _jsx(KVPList.Definition, { "aria-hidden": "true", isRow: true, children: _jsx(Progress, { "aria-label": "Attendance progress second", max: 100, value: 95 }) })] }) })),
+};
+export default meta;
+//# sourceMappingURL=KVPList.stories.js.map

package/dist/components/kvpList/KVPList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVPList.stories.js","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;CACY,CAAC;AAIjC,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,KAAC,OAAO,OAAK,IAAI,gBAAa,oBAAoB,YAChD,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,6BAA0B,EACvC,KAAC,OAAO,CAAC,UAAU,IAAC,YAAY,QAAC,UAAU,EAAC,QAAQ,mBAAwB,IAChE,GACN,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAU;IAC9C,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,KAAC,OAAO,OAAK,IAAI,gBAAa,sBAAsB,YAClD,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,YAAY,QAAC,UAAU,EAAC,SAAS,mBAAwB,EAC7E,KAAC,OAAO,CAAC,UAAU,mBAAa,MAAM,EAAC,KAAK,kBAC1C,KAAC,QAAQ,kBAAY,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAI,GAC/C,IACT,GACN,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAU;IAC7C,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,KAAC,OAAO,OAAK,IAAI,gBAAa,yCAAyC,YACrE,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,iCAA8B,EAC3C,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,SAAS,kBAAuB,EAC/D,KAAC,OAAO,CAAC,UAAU,mBAAa,MAAM,EAAC,KAAK,kBAC1C,KAAC,QAAQ,kBAAY,4BAA4B,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAI,GACtD,IACT,GACN,CACX;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/kvpList/KVPList.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=KVPList.test.d.ts.map

package/dist/components/kvpList/KVPList.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVPList.test.d.ts","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/dist/components/kvpList/KVPList.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { KVPList } from './KVPList';
+describe('KVPList', () => {
+    test('renders term and definition semantics', () => {
+        render(_jsx(KVPList, { "aria-label": "Attendance metrics", children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Attendance" }), _jsx(KVPList.Definition, { prominence: "strong", children: "95" })] }) }));
+        expect(screen.getByText('Attendance').tagName).toBe('DT');
+        expect(screen.getByText('95').tagName).toBe('DD');
+        expect(screen.getByRole('group', { name: 'Attendance metrics' })).toBeInTheDocument();
+    });
+    test('renders a typed percentage suffix', () => {
+        render(_jsx(KVPList, { children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Attendance" }), _jsx(KVPList.Definition, { isPercentage: true, prominence: "neutral", children: "95" })] }) }));
+        const percentageDefinition = screen.getByText('95').closest('dd');
+        expect(screen.getByText('%')).toBeInTheDocument();
+        expect(percentageDefinition).toHaveTextContent('95%');
+    });
+    test('supports horizontal rows and row-spanning definitions', () => {
+        const { container } = render(_jsx(KVPList, { children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Progress" }), _jsx(KVPList.Definition, { isRow: true, children: "Full width content" })] }) }));
+        expect(container.querySelector('.ds-kvp-list__row--horizontal')).toBeInTheDocument();
+        expect(container.querySelector('.ds-kvp-list__description--row')).toBeInTheDocument();
+    });
+    test('does not add group semantics when no accessible label is provided', () => {
+        render(_jsx(KVPList, { children: _jsxs(KVPList.Row, { orientation: "horizontal", children: [_jsx(KVPList.Term, { children: "Attendance" }), _jsx(KVPList.Definition, { prominence: "strong", children: "95" })] }) }));
+        expect(screen.queryByRole('group')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=KVPList.test.js.map

package/dist/components/kvpList/KVPList.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVPList.test.js","sourceRoot":"","sources":["../../../src/components/kvpList/KVPList.test.tsx"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,uCAAuC,EAAE,GAAG,EAAE;QACjD,MAAM,CACJ,KAAC,OAAO,kBAAY,oBAAoB,YACtC,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,6BAA0B,EACvC,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,QAAQ,mBAAwB,IACnD,GACN,CACX,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC7C,MAAM,CACJ,KAAC,OAAO,cACN,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,6BAA0B,EACvC,KAAC,OAAO,CAAC,UAAU,IAAC,YAAY,QAAC,UAAU,EAAC,SAAS,mBAEhC,IACT,GACN,CACX,CAAC;QAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAElE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAClD,MAAM,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,GAAG,EAAE;QACjE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,OAAO,cACN,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,2BAAwB,EACrC,KAAC,OAAO,CAAC,UAAU,IAAC,KAAK,yCAAwC,IACrD,GACN,CACX,CAAC;QAEF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACrF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mEAAmE,EAAE,GAAG,EAAE;QAC7E,MAAM,CACJ,KAAC,OAAO,cACN,MAAC,OAAO,CAAC,GAAG,IAAC,WAAW,EAAC,YAAY,aACnC,KAAC,OAAO,CAAC,IAAI,6BAA0B,EACvC,KAAC,OAAO,CAAC,UAAU,IAAC,UAAU,EAAC,QAAQ,mBAAwB,IACnD,GACN,CACX,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/singleUser/SingleUser.d.ts

@@ -11,7 +11,7 @@ export declare const SingleUser: React.ForwardRefExoticComponent<{
     className?: string;
     avatarClassName?: string;
     size?: AvatarSize;
-} & Omit<AvatarProps, "size" | "alt" | "className"> & React.RefAttributes<HTMLSpanElement>>;
+} & Omit<AvatarProps, "size" | "className" | "alt"> & React.RefAttributes<HTMLSpanElement>>;
 export declare namespace SingleUser {
     type Props = SingleUserProps;
 }

package/dist/components/tabs/TabsItem.stories.d.ts

@@ -25,7 +25,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -310,7 +310,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

package/dist/index.css

@@ -630,6 +630,12 @@
   --kpi-spacing-vertical: var(--spacing-large);
   --kpi-color-benchmark-text: var(--color-grey-500);
   --kpi-color-benchmark-text-bg: var(--color-grey-100);
+  --kvp-list-color-text-subtle: var(--color-grey-800);
+  --kvp-list-color-text-strong: var(--color-mono-black);
+  --ico-text-spacing-gap-horizontal: var(--spacing-large);
+  --ico-text-spacing-gap-vertical: var(--spacing-medium);
+  --kpi-card-color-text-label: var(--color-grey-800);
+  --kpi-card-color-text-value: var(--color-mono-black);
   --tag-radius: var(--border-radius-round);
   --tag-neutral-color-text: var(--color-grey-900);
   --tag-neutral-color-background: var(--color-grey-050);
@@ -2039,6 +2045,41 @@
   vertical-align: middle;
 }
 
+.ds-ico-text {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ico-text-spacing-gap-horizontal);
+  width: 100%;
+}
+
+.ds-ico-text__icon {
+  flex-shrink: 0;
+}
+
+.ds-ico-text__content {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--ico-text-spacing-gap-vertical);
+}
+
+.ds-ico-text__heading {
+  margin: 0;
+  font-family: var(--type-headings-h4-family);
+  font-size: var(--type-headings-h4-size);
+  font-weight: var(--type-headings-h4-weight);
+  line-height: var(--type-headings-h4-line-height);
+}
+
+.ds-ico-text__paragraph {
+  margin: 0;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+}
+
 .ds-heading {
   padding: var(--page-heading-spacing-gap);
   color: var(--page-heading-color-text);
@@ -2084,9 +2125,17 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   line-height: var(--type-headings-h4-line-height);
 }
 
+.ds-card__icon-click {
+  flex-shrink: 0;
+}
+.ds-card__icon-click.ds-icon-arrow-right {
+  display: none;
+}
+
 .ds-card__container {
   display: flex;
   width: 100%;
+  margin: 0;
   padding: var(--card-spacing-vertical) var(--card-spacing-horizontal);
   flex-direction: column;
   align-items: flex-start;
@@ -2098,16 +2147,10 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   line-height: var(--line-height-default);
   box-sizing: border-box;
 }
-.ds-card__container .ds-card__icon-click {
-  flex-shrink: 0;
-}
-.ds-card__container .ds-card__icon-click.ds-icon-arrow-right {
-  display: none;
-}
 .ds-card__container:hover:not(.ds-card__container--disabled) {
   border: var(--border-weight) solid var(--card-hover-color-border);
   background: var(--card-hover-color-background);
-  box-shadow: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
+  box-shadow: var(--shadow-small);
 }
 .ds-card__container:hover:not(.ds-card__container--disabled) .ds-card__icon-click.ds-icon-chevron-right {
   display: none;
@@ -2123,6 +2166,9 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 .ds-card__container--clickable {
   cursor: pointer;
 }
+.ds-card__container--dense {
+  padding: var(--spacing-small);
+}
 
 .ds-card__content {
   display: flex;
@@ -2131,24 +2177,45 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   gap: var(--card-spacing-gap-horizontal);
   width: 100%;
 }
-.ds-card__content .ds-card__icon-left {
-  flex-shrink: 0;
+
+.ds-card__body {
+  flex: 1 1 auto;
+  min-width: 0;
 }
-.ds-card__content .ds-card__text {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: var(--card-spacing-gap-vertical);
-  flex-grow: 1;
+
+.ds-card__container--article-link {
+  position: relative;
 }
-.ds-card__content .ds-card__text .ds-card__title {
-  margin: 0;
-  font-family: var(--type-headings-h4-family);
-  font-size: var(--type-headings-h4-size);
-  font-weight: var(--type-headings-h4-weight);
+.ds-card__container--article-link:not(.ds-card__container--disabled) {
+  cursor: pointer;
 }
-.ds-card__content .ds-card__text .ds-card__paragraph {
-  margin: 0;
+.ds-card__container--article-link:focus-within:not(.ds-card__container--disabled) {
+  border: var(--border-weight) solid var(--card-focus-color-border);
+  background: var(--card-focus-color-background);
+  outline: var(--focus-border) solid var(--card-focus-focus);
+}
+
+.ds-article-card {
+  width: 100%;
+}
+
+.ds-article-card__primary-link {
+  color: inherit;
+  text-decoration: none;
+}
+.ds-article-card__primary-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+.ds-article-card__primary-link:hover, .ds-article-card__primary-link:focus-visible {
+  text-decoration: underline;
+}
+
+.ds-article-card a:not(.ds-article-card__primary-link) {
+  position: relative;
+  z-index: 2;
 }
 
 .ds-dropdown__content {
@@ -3462,6 +3529,103 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   border-radius: var(--border-radius-large);
 }
 
+.ds-kpi-card {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--spacing-medium) var(--spacing-small);
+}
+.ds-kpi-card > :not(.ds-kpi-card__label, .ds-kpi-card__value) {
+  grid-column: 1/-1;
+}
+
+.ds-kpi-card__label {
+  align-self: end;
+  margin: 0;
+  color: var(--kpi-card-color-text-label);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+}
+
+.ds-kpi-card__value {
+  justify-self: end;
+  margin: 0;
+  color: var(--kpi-card-color-text-value);
+  font-family: var(--type-headings-h2-family);
+  font-size: var(--type-headings-h2-size);
+  font-weight: var(--type-headings-h2-weight);
+  line-height: var(--type-headings-h2-line-height);
+}
+
+.ds-kpi-card__suffix {
+  margin-left: var(--spacing-xsmall);
+  font: inherit;
+}
+
+.ds-kvp-list {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+  box-sizing: border-box;
+}
+
+.ds-kvp-list__term,
+.ds-kvp-list__description {
+  margin: 0;
+  flex: 1;
+}
+
+.ds-kvp-list__term,
+.ds-kvp-list__description--neutral {
+  color: var(--kvp-list-color-text-subtle);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+}
+
+.ds-kvp-list__description--strong {
+  color: var(--kvp-list-color-text-strong);
+  font-family: var(--type-headings-h2-family);
+  font-size: var(--type-headings-h2-size);
+  font-weight: var(--type-headings-h2-weight);
+  line-height: var(--type-headings-h2-line-height);
+}
+
+.ds-kvp-list__description--row {
+  flex-basis: 100%;
+  width: 100%;
+}
+
+.ds-kvp-list__suffix {
+  margin-left: var(--spacing-xsmall);
+  font: inherit;
+}
+
+.ds-kvp-list__description {
+  text-align: right;
+}
+
+.ds-kvp-list__row {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  gap: var(--spacing-small);
+}
+.ds-kvp-list__row--vertical {
+  flex-direction: column;
+}
+.ds-kvp-list__row--horizontal {
+  flex-wrap: wrap;
+  align-items: center;
+}
+.ds-kvp-list__row--horizontal .ds-kvp-list__description:not(.ds-kvp-list__description--row) {
+  flex: 0 0 auto;
+}
+
 .ds-toast__viewport {
   margin: 0;
   padding: 0;