@arbor-education/design-system.components 4.6.0 → 4.7.0-alpha.0

package/.changeset/twenty-groups-wonder.md

@@ -0,0 +1,5 @@
+---
+"@arbor-education/design-system.components": patch
+---
+
+MIS-75857 Add aria-label to match the text on a pill

package/.changeset/yellow-falcons-search.md

@@ -0,0 +1,5 @@
+---
+"@arbor-education/design-system.components": patch
+---
+
+MIS-70965 ⬆️ update AG-Grid to v35

package/dist/components/button/Button.story.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+  title: string;
+  component: ({ type, size, children, onClick, disabled, className, ...props }: import('./Button.js').ButtonProps) => import('react/jsx-runtime').JSX.Element;
+  parameters: {
+    layout: string;
+  };
+  tags: string[];
+  argTypes: {
+    type: {
+      control: 'select';
+      options: string[];
+      description: string;
+    };
+    size: {
+      control: 'select';
+      options: string[];
+      description: string;
+    };
+    disabled: {
+      control: 'boolean';
+      description: string;
+    };
+    children: {
+      control: 'text';
+      description: string;
+    };
+    onClick: {
+      action: string;
+    };
+  };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const PrimaryDestructive: Story;
+export declare const SecondaryDestructive: Story;
+export declare const TextLink: Story;
+export declare const SmallPrimary: Story;
+export declare const SmallSecondary: Story;
+export declare const HoverState: Story;
+export declare const PressedState: Story;
+export declare const FocussedState: Story;
+export declare const Disabled: Story;
+// # sourceMappingURL=Button.story.d.ts.map

package/dist/components/button/Button.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.story.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAKlC,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/dist/components/button/Button.story.js

@@ -0,0 +1,123 @@
+import { Button } from './Button.js';
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'primary-destructive',
+        'secondary-destructive',
+        'text-link',
+      ],
+      description: 'Button type/variant',
+    },
+    size: {
+      control: 'select',
+      options: ['M', 'S'],
+      description: 'Button size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    children: {
+      control: 'text',
+      description: 'Button text',
+    },
+    onClick: {
+      action: 'clicked',
+    },
+  },
+};
+export default meta;
+// Primary button
+export const Primary = {
+  args: {
+    type: 'primary',
+    children: 'Button Text',
+    size: 'M',
+  },
+};
+// Secondary button
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    type: 'secondary',
+  },
+};
+// Tertiary button
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    type: 'tertiary',
+  },
+};
+// Primary destructive button
+export const PrimaryDestructive = {
+  args: {
+    ...Primary.args,
+    type: 'primary-destructive',
+  },
+};
+// Secondary destructive button
+export const SecondaryDestructive = {
+  args: {
+    ...Primary.args,
+    type: 'secondary-destructive',
+  },
+};
+// Text link button
+export const TextLink = {
+  args: {
+    ...Primary.args,
+    type: 'text-link',
+  },
+};
+// Small buttons
+export const SmallPrimary = {
+  args: {
+    ...Primary.args,
+    size: 'S',
+  },
+};
+export const SmallSecondary = {
+  args: {
+    ...Secondary.args,
+    size: 'S',
+  },
+};
+// States
+export const HoverState = {
+  args: {
+    ...Primary.args,
+    state: 'hover',
+  },
+};
+export const PressedState = {
+  args: {
+    ...Primary.args,
+    state: 'pressed',
+  },
+};
+export const FocussedState = {
+  args: {
+    ...Primary.args,
+    state: 'focussed',
+  },
+};
+// Disabled button
+export const Disabled = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+};
+// # sourceMappingURL=Button.story.js.map

package/dist/components/button/Button.story.js.map

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

package/dist/components/button/ButtonUsageExample.d.ts

@@ -0,0 +1,2 @@
+export declare const ButtonUsageExample: () => import('react/jsx-runtime').JSX.Element;
+// # sourceMappingURL=ButtonUsageExample.d.ts.map

package/dist/components/button/ButtonUsageExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonUsageExample.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonUsageExample.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,+CAgF9B,CAAC"}

package/dist/components/button/ButtonUsageExample.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { Button } from './Button.js';
+// Example of using the Button component with SVG icons
+export const ButtonUsageExample = () => {
+  // You can create icon components to use with buttons
+  const InfoIcon = () => (_jsxs('svg', { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx('path', { d: 'M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx('path', { d: 'M8 10.6667V8', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx('path', { d: 'M8 5.33334H8.00667', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
+  const ChevronIcon = () => (_jsx('svg', { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx('path', { d: 'M6 12L10 8L6 4', stroke: 'currentColor', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+  return (_jsxs('div', { style: { display: 'flex', gap: '16px', flexDirection: 'column' }, children: [_jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary', children: 'Primary Button' }), _jsx(Button, { type: 'primary', iconLeft: _jsx(InfoIcon, {}), children: 'With Left Icon' }), _jsx(Button, { type: 'primary', iconRight: _jsx(ChevronIcon, {}), children: 'With Right Icon' }), _jsx(Button, { type: 'primary', iconLeft: _jsx(InfoIcon, {}), iconRight: _jsx(ChevronIcon, {}), children: 'With Both Icons' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'secondary', children: 'Secondary Button' }), _jsx(Button, { type: 'secondary', iconLeft: _jsx(InfoIcon, {}), children: 'With Left Icon' }), _jsx(Button, { type: 'secondary', iconRight: _jsx(ChevronIcon, {}), children: 'With Right Icon' }), _jsx(Button, { type: 'secondary', iconLeft: _jsx(InfoIcon, {}), iconRight: _jsx(ChevronIcon, {}), children: 'With Both Icons' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'tertiary', children: 'Tertiary Button' }), _jsx(Button, { type: 'tertiary', iconLeft: _jsx(InfoIcon, {}), children: 'With Left Icon' }), _jsx(Button, { type: 'tertiary', iconRight: _jsx(ChevronIcon, {}), children: 'With Right Icon' }), _jsx(Button, { type: 'tertiary', iconLeft: _jsx(InfoIcon, {}), iconRight: _jsx(ChevronIcon, {}), children: 'With Both Icons' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary-icon', iconLeft: _jsx(InfoIcon, {}) }), _jsx(Button, { type: 'secondary-icon', iconLeft: _jsx(InfoIcon, {}) }), _jsx(Button, { type: 'tertiary-icon', iconLeft: _jsx(InfoIcon, {}) })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary', size: 'S', children: 'Small Primary' }), _jsx(Button, { type: 'secondary', size: 'S', children: 'Small Secondary' }), _jsx(Button, { type: 'tertiary', size: 'S', children: 'Small Tertiary' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary-destructive', children: 'Destructive Primary' }), _jsx(Button, { type: 'secondary-destructive', children: 'Destructive Secondary' }), _jsx(Button, { type: 'secondary-destructive-icon', iconLeft: _jsx(InfoIcon, {}) })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'text-link', children: 'Text Link' }), _jsx(Button, { type: 'text-link-padding', children: 'Text Link with Padding' })] }), _jsxs('div', { style: { display: 'flex', gap: '16px' }, children: [_jsx(Button, { type: 'primary', state: 'default', children: 'Default State' }), _jsx(Button, { type: 'primary', state: 'hover', children: 'Hover State' }), _jsx(Button, { type: 'primary', state: 'pressed', children: 'Pressed State' }), _jsx(Button, { type: 'primary', state: 'focussed', children: 'Focused State' }), _jsx(Button, { type: 'primary', disabled: true, children: 'Disabled Button' })] })] }));
+};
+// # sourceMappingURL=ButtonUsageExample.js.map

package/dist/components/button/ButtonUsageExample.js.map

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

package/dist/components/combobox/useElementWidth.d.ts

@@ -0,0 +1,2 @@
+export declare const useElementWidth: (ref: React.RefObject<HTMLElement | null>, watchKey: string) => number;
+//# sourceMappingURL=useElementWidth.d.ts.map

package/dist/components/combobox/useElementWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementWidth.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,UAAU,MAAM,KACf,MAkCF,CAAC"}

package/dist/components/combobox/useElementWidth.js

@@ -0,0 +1,31 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+export const useElementWidth = (ref, watchKey) => {
+    const [measurement, setMeasurement] = useState({ width: 0, hasMeasured: false });
+    const element = ref.current;
+    const update = useCallback(() => {
+        const currentElement = ref.current;
+        if (!currentElement) {
+            setMeasurement({ width: 0, hasMeasured: true });
+            return;
+        }
+        setMeasurement({
+            width: currentElement.getBoundingClientRect().width,
+            hasMeasured: true,
+        });
+    }, [ref]);
+    useLayoutEffect(() => {
+        // Re-run measurement when callers know the element's contents/layout inputs changed.
+        update();
+    }, [update, watchKey]);
+    useLayoutEffect(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [element, update]);
+    return measurement.width;
+};
+//# sourceMappingURL=useElementWidth.js.map

package/dist/components/combobox/useElementWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementWidth.js","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAwC,EACxC,QAAgB,EACR,EAAE;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;IACjF,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;IAE5B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,cAAc,CAAC;YACb,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACnD,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,eAAe,CAAC,GAAG,EAAE;QACnB,qFAAqF;QACrF,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE1B,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,WAAW,CAAC,KAAK,CAAC;AAC3B,CAAC,CAAC"}

package/dist/components/combobox/useVisibleChips.d.ts

@@ -0,0 +1,21 @@
+type ComputeTriggerLayoutModelParams = {
+    containerWidth: number;
+    chipWidths: number[];
+    chipGap: number;
+    badgeWidth: number;
+    ellipsisWidth: number;
+    showBadge: boolean;
+    safetyBuffer?: number;
+};
+export type TriggerLayoutModel = {
+    visibleChipIndices: number[];
+    hiddenChipCount: number;
+    showBadge: boolean;
+    showEllipsis: boolean;
+    hasOverflow: boolean;
+};
+export declare const computeTriggerLayoutModel: ({ containerWidth, chipWidths, chipGap, badgeWidth, ellipsisWidth, showBadge, safetyBuffer, }: ComputeTriggerLayoutModelParams) => TriggerLayoutModel;
+type UseVisibleChipsParams = ComputeTriggerLayoutModelParams;
+export declare const useVisibleChips: (params: UseVisibleChipsParams) => TriggerLayoutModel;
+export {};
+//# sourceMappingURL=useVisibleChips.d.ts.map

package/dist/components/combobox/useVisibleChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleChips.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.ts"],"names":[],"mappings":"AAEA,KAAK,+BAA+B,GAAG;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAoBF,eAAO,MAAM,yBAAyB,GAAI,8FAQvC,+BAA+B,KAAG,kBAmCpC,CAAC;AAEF,KAAK,qBAAqB,GAAG,+BAA+B,CAAC;AAE7D,eAAO,MAAM,eAAe,GAAI,QAAQ,qBAAqB,KAAG,kBAc7D,CAAC"}

package/dist/components/combobox/useVisibleChips.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+const fitCount = (availableWidth, chipWidths, chipGap) => {
+    if (availableWidth <= 0 || chipWidths.length === 0)
+        return 0;
+    let used = 0;
+    let count = 0;
+    for (let i = 0; i < chipWidths.length; i += 1) {
+        const required = chipWidths[i] + (i > 0 ? chipGap : 0);
+        if (used + required > availableWidth)
+            break;
+        used += required;
+        count += 1;
+    }
+    return count;
+};
+export const computeTriggerLayoutModel = ({ containerWidth, chipWidths, chipGap, badgeWidth, ellipsisWidth, showBadge, safetyBuffer = 1, }) => {
+    const selectedCount = chipWidths.length;
+    const shouldShowBadge = showBadge && selectedCount > 0;
+    if (selectedCount === 0 || containerWidth <= 0) {
+        return {
+            visibleChipIndices: [],
+            hiddenChipCount: 0,
+            showBadge: shouldShowBadge,
+            showEllipsis: false,
+            hasOverflow: false,
+        };
+    }
+    const badgeReserve = shouldShowBadge
+        ? badgeWidth + chipGap
+        : 0;
+    const availableWithoutEllipsis = Math.max(0, containerWidth - badgeReserve - safetyBuffer);
+    const countWithoutEllipsis = fitCount(availableWithoutEllipsis, chipWidths, chipGap);
+    const hasOverflow = countWithoutEllipsis < selectedCount;
+    const ellipsisReserve = hasOverflow
+        ? ellipsisWidth + chipGap
+        : 0;
+    const availableForChips = Math.max(0, containerWidth - badgeReserve - ellipsisReserve - safetyBuffer);
+    const visibleCount = fitCount(availableForChips, chipWidths, chipGap);
+    return {
+        visibleChipIndices: Array.from({ length: visibleCount }, (_, index) => index),
+        hiddenChipCount: Math.max(0, selectedCount - visibleCount),
+        showBadge: shouldShowBadge,
+        showEllipsis: visibleCount < selectedCount,
+        hasOverflow: visibleCount < selectedCount,
+    };
+};
+export const useVisibleChips = (params) => 
+// Deps list each field instead of `[params]`: callers often pass a new `params` object every
+// render; depending on object identity would rerun the layout every time even when values are unchanged.
+useMemo(() => computeTriggerLayoutModel(params), [
+    params.badgeWidth,
+    params.chipGap,
+    params.chipWidths,
+    params.containerWidth,
+    params.ellipsisWidth,
+    params.safetyBuffer,
+    params.showBadge,
+]);
+//# sourceMappingURL=useVisibleChips.js.map

package/dist/components/combobox/useVisibleChips.js.map

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

package/dist/components/combobox/useVisibleChips.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useVisibleChips.test.d.ts.map

package/dist/components/combobox/useVisibleChips.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleChips.test.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.test.tsx"],"names":[],"mappings":""}

package/dist/components/combobox/useVisibleChips.test.js

@@ -0,0 +1,81 @@
+import { describe, expect, test } from 'vitest';
+import { computeTriggerLayoutModel } from './useVisibleChips.js';
+describe('computeTriggerLayoutModel', () => {
+    test('shows all chips and no ellipsis when there is no overflow', () => {
+        const result = computeTriggerLayoutModel({
+            containerWidth: 300,
+            chipWidths: [70, 80, 60],
+            chipGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        expect(result).toEqual({
+            visibleChipIndices: [0, 1, 2],
+            hiddenChipCount: 0,
+            showBadge: true,
+            showEllipsis: false,
+            hasOverflow: false,
+        });
+    });
+    test('reserves badge and ellipsis before fitting chips when overflow exists', () => {
+        const result = computeTriggerLayoutModel({
+            containerWidth: 160,
+            chipWidths: [60, 60, 60],
+            chipGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        expect(result.visibleChipIndices).toEqual([0]);
+        expect(result.hiddenChipCount).toBe(2);
+        expect(result.showEllipsis).toBe(true);
+        expect(result.hasOverflow).toBe(true);
+    });
+    test('allows zero chips when badge and ellipsis take priority in tiny space', () => {
+        const result = computeTriggerLayoutModel({
+            containerWidth: 36,
+            chipWidths: [80, 80],
+            chipGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        expect(result.visibleChipIndices).toEqual([]);
+        expect(result.hiddenChipCount).toBe(2);
+        expect(result.showEllipsis).toBe(true);
+    });
+    test('reserving badge space reduces visible count', () => {
+        const withBadge = computeTriggerLayoutModel({
+            containerWidth: 180,
+            chipWidths: [60, 60, 60],
+            chipGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: true,
+        });
+        const withoutBadge = computeTriggerLayoutModel({
+            containerWidth: 180,
+            chipWidths: [60, 60, 60],
+            chipGap: 4,
+            badgeWidth: 24,
+            ellipsisWidth: 12,
+            showBadge: false,
+        });
+        expect(withoutBadge.visibleChipIndices.length).toBeGreaterThanOrEqual(withBadge.visibleChipIndices.length);
+    });
+    test('uses safety buffer to avoid a clipped final chip on boundary widths', () => {
+        const result = computeTriggerLayoutModel({
+            containerWidth: 195.5,
+            chipWidths: [73.4, 73.4, 20],
+            chipGap: 4,
+            badgeWidth: 24.2,
+            ellipsisWidth: 11.6,
+            showBadge: true,
+            safetyBuffer: 1,
+        });
+        expect(result.visibleChipIndices).toEqual([0]);
+        expect(result.showEllipsis).toBe(true);
+    });
+});
+//# sourceMappingURL=useVisibleChips.test.js.map

package/dist/components/combobox/useVisibleChips.test.js.map

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

package/dist/components/heading/HeadingInnerContainer.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+type HeadingSubContainerProps = HTMLAttributes<HTMLSpanElement>;
+export declare const HeadingInnerContainer: (props: HeadingSubContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HeadingInnerContainer.d.ts.map

package/dist/components/heading/HeadingInnerContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingInnerContainer.d.ts","sourceRoot":"","sources":["../../../src/components/heading/HeadingInnerContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,wBAAwB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEhE,eAAO,MAAM,qBAAqB,GAAI,OAAO,wBAAwB,4CAYpE,CAAC"}

package/dist/components/heading/HeadingInnerContainer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export const HeadingInnerContainer = (props) => {
+    const { className, ...rest } = props;
+    return (_jsx("span", { className: classNames(className, 'ds-heading__inner-container'), ...rest }));
+};
+//# sourceMappingURL=HeadingInnerContainer.js.map

package/dist/components/heading/HeadingInnerContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingInnerContainer.js","sourceRoot":"","sources":["../../../src/components/heading/HeadingInnerContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAKpC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACvE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAErC,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,6BAA6B,CAC9B,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/icoText/IcoText.d.ts

@@ -0,0 +1,37 @@
+import type { IconName } from '../icon/allowedIcons.js';
+import { Icon } from '../icon/Icon.js';
+export type IcoTextProps = {
+    children?: React.ReactNode;
+    className?: string;
+};
+export type IcoTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    children: React.ReactNode;
+};
+export type IcoTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    children: React.ReactNode;
+};
+export type IcoTextIconProps = {
+    className?: string;
+    color?: Icon.Props['color'];
+    name: IconName;
+    screenReaderText?: string;
+    size?: 12 | 16 | 24;
+};
+export declare const IcoText: {
+    ({ children, className }: IcoTextProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Heading: {
+        ({ children, className, ...rest }: IcoTextHeadingProps): React.JSX.Element;
+        displayName: string;
+    };
+    Paragraph: {
+        ({ children, className, ...rest }: IcoTextParagraphProps): React.JSX.Element;
+        displayName: string;
+    };
+    Icon: {
+        ({ className, color, name, screenReaderText, size, }: IcoTextIconProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=IcoText.d.ts.map

package/dist/components/icoText/IcoText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACrB,CAAC;AAgEF,eAAO,MAAM,OAAO;8BA1B0B,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAhC3E,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAUvC,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;8DAYzC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;CAwCrC,CAAC"}

package/dist/components/icoText/IcoText.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Icon } from '../icon/Icon.js';
+import { Children, isValidElement } from 'react';
+const IcoTextHeading = ({ children, className, ...rest }) => (_jsx("h4", { className: classNames('ds-ico-text__heading', className), ...rest, children: children }));
+const IcoTextParagraph = ({ children, className, ...rest }) => (_jsx("p", { className: classNames('ds-ico-text__paragraph', className), ...rest, children: children }));
+const IcoTextIcon = ({ className, color, name, screenReaderText, size = 24, }) => (_jsx(Icon, { name: name, className: classNames('ds-ico-text__icon', className), color: color, screenReaderText: screenReaderText, size: size }));
+const IcoTextRoot = ({ children, className }) => {
+    const iconChildren = [];
+    const contentChildren = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === IcoTextIcon) {
+            iconChildren.push(child);
+            return;
+        }
+        contentChildren.push(child);
+    });
+    return (_jsxs("div", { className: classNames('ds-ico-text', className), children: [iconChildren, _jsx("div", { className: "ds-ico-text__content", children: contentChildren })] }));
+};
+IcoTextHeading.displayName = 'IcoText.Heading';
+IcoTextParagraph.displayName = 'IcoText.Paragraph';
+IcoTextIcon.displayName = 'IcoText.Icon';
+IcoTextRoot.displayName = 'IcoText';
+export const IcoText = Object.assign(IcoTextRoot, {
+    Heading: IcoTextHeading,
+    Paragraph: IcoTextParagraph,
+    Icon: IcoTextIcon,
+});
+//# sourceMappingURL=IcoText.js.map

package/dist/components/icoText/IcoText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAuBjD,MAAM,cAAc,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACa,EAAqB,EAAE,CAAC,CAC5C,aAAI,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,KAAM,IAAI,YACnE,QAAQ,GACN,CACN,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACe,EAAqB,EAAE,CAAC,CAC9C,YAAG,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAAM,IAAI,YACpE,QAAQ,GACP,CACL,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,gBAAgB,EAChB,IAAI,GAAG,EAAE,GACQ,EAAqB,EAAE,CAAC,CACzC,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,EACrD,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAgB,EAAqB,EAAE;IAC/E,MAAM,YAAY,GAAsB,EAAE,CAAC;IAC3C,MAAM,eAAe,GAAsB,EAAE,CAAC;IAE9C,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACxD,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,aACjD,YAAY,EACb,cAAK,SAAS,EAAC,sBAAsB,YAAE,eAAe,GAAO,IACzD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAC/C,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AACnD,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IAChD,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC"}

package/dist/components/icoText/IcoText.stories.d.ts

@@ -0,0 +1,60 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IcoText } from './IcoText.js';
+declare function IcoTextDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, className }: import("./IcoText.js").IcoTextProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        Heading: {
+            ({ children, className, ...rest }: import("./IcoText.js").IcoTextHeadingProps): React.JSX.Element;
+            displayName: string;
+        };
+        Paragraph: {
+            ({ children, className, ...rest }: import("./IcoText.js").IcoTextParagraphProps): React.JSX.Element;
+            displayName: string;
+        };
+        Icon: {
+            ({ className, color, name, screenReaderText, size, }: import("./IcoText.js").IcoTextIconProps): React.JSX.Element;
+            displayName: string;
+        };
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof IcoTextDocsPage;
+        };
+    };
+    argTypes: {
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof IcoText>;
+export declare const Default: Story;
+export declare const HeadingOnly: Story;
+export declare const WithoutIcon: Story;
+export declare const IconWithScreenReaderText: Story;
+export declare const IconSizes: Story;
+export declare const IconColors: Story;
+export declare const MultipleParagraphs: Story;
+//# sourceMappingURL=IcoText.stories.d.ts.map

package/dist/components/icoText/IcoText.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA2GpC,iBAAS,eAAe,4CAyBvB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAsEtC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAqCtC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuCvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAC"}