@arbor-education/design-system.components 0.21.1 → 0.23.0

package/src/components/icon/allowedIcons.tsx

@@ -55,6 +55,7 @@ import {
   Link,
   List,
   ListFilterPlus,
+  ListTree,
   LoaderCircle,
   Lock,
   LockOpen,
@@ -90,10 +91,10 @@ import {
   UsersRound, X,
 } from 'lucide-react';
 import { AskArbor } from './customIcons/AskArbor.js';
-import type { CustomIconProps } from './types.js';
 import { CheckSolid } from './customIcons/CheckSolid.js';
 import { Google } from './customIcons/Google.js';
 import { XSolid } from './customIcons/XSolid.js';
+import type { CustomIconProps } from './types.js';
 
 export const allowedIcons = {
   // lucide icons
@@ -156,6 +157,7 @@ export const allowedIcons = {
   'link': Link,
   'list-filter-plus': ListFilterPlus,
   'list': List,
+  'list-tree': ListTree,
   'loader': LoaderCircle,
   'lock-open': LockOpen,
   'lock': Lock,

package/src/components/{icoText/IcoText.stories.tsx → iconText/IconText.stories.tsx}

@@ -1,21 +1,21 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Controls,
   Heading as DocHeading,
-  Markdown,
   Primary as DocPrimary,
+  Markdown,
   Stories,
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { IcoText } from './IcoText.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconText } from './IconText.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content
 // ---------------------------------------------------------------------------
 
 const DESCRIPTION_INTRO = [
-  '`IcoText` is a compound layout component that pairs an icon in a left rail with a heading and/or paragraph.',
+  '`IconText` is a compound layout component that pairs an icon in a left rail with a heading and/or paragraph.',
   'It is the canonical icon-plus-text primitive in this design system — used internally by `ArticleCard`',
   'and available for direct use in any context that needs an icon anchoring labelled content.',
 ].join(' ');
@@ -60,26 +60,26 @@ const USAGE_GUIDANCE = [
   '| Content inside a navigable card | [`ArticleCard`](?path=/docs/components-card-articlecard--docs) |',
   '| Icon with no text | [`Icon`](?path=/docs/components-icon--docs) directly |',
   '| Long-form prose | Semantic HTML `<p>` with a separate heading |',
-  '| Interactive element | Wrap `IcoText` inside a `Card` or `Button` — never add `onClick` to `IcoText` itself |',
+  '| Interactive element | Wrap `IconText` inside a `Card` or `Button` — never add `onClick` to `IconText` itself |',
 ].join('\n');
 
 const DEVELOPER_NOTES = [
   '### Critical usage patterns',
   '',
-  '**`IcoText.Icon` is automatically hoisted to the left rail** regardless of position in JSX.',
-  'The root inspects `children`, pulls out any `IcoText.Icon` elements into a flex-shrink-0 left column,',
+  '**`IconText.Icon` is automatically hoisted to the left rail** regardless of position in JSX.',
+  'The root inspects `children`, pulls out any `IconText.Icon` elements into a flex-shrink-0 left column,',
   'and places all other children (Heading, Paragraph) in the content column.',
   '',
   '```tsx',
-  '<IcoText>',
-  '  <IcoText.Icon name="guardians" />',
-  '  <IcoText.Heading>Year 9 Attendance</IcoText.Heading>',
-  '  <IcoText.Paragraph>28 pupils · 94.2% this term</IcoText.Paragraph>',
-  '</IcoText>',
+  '<IconText>',
+  '  <IconText.Icon name="guardians" />',
+  '  <IconText.Heading>Year 9 Attendance</IconText.Heading>',
+  '  <IconText.Paragraph>28 pupils · 94.2% this term</IconText.Paragraph>',
+  '</IconText>',
   '```',
   '',
-  '**`IcoText.Heading` always renders as `<h4>`.** There is no `level` prop. Verify your document',
-  'heading hierarchy is correct before using `IcoText` as a standalone heading.',
+  '**`IconText.Heading` always renders as `<h4>`.** There is no `level` prop. Verify your document',
+  'heading hierarchy is correct before using `IconText` as a standalone heading.',
   '',
   '**Omit `screenReaderText` for decorative icons.** The icon is rendered with `aria-hidden="true"`',
   'when `screenReaderText` is absent. The heading or surrounding text should carry the accessible meaning.',
@@ -90,16 +90,16 @@ const DEVELOPER_NOTES = [
   '',
   '- Decorative icons (no `screenReaderText`): `aria-hidden="true"` — screen readers skip them',
   '- Meaningful icons: provide `screenReaderText` so the icon has an accessible label',
-  '- `IcoText.Heading` renders `<h4>` — verify your document heading hierarchy',
-  '- `IcoText.Paragraph` renders `<p>` — semantically appropriate for supporting text',
+  '- `IconText.Heading` renders `<h4>` — verify your document heading hierarchy',
+  '- `IconText.Paragraph` renders `<p>` — semantically appropriate for supporting text',
   '',
   '---',
   '',
   '### TypeScript types',
   '',
   '```ts',
-  "import { IcoText } from '@arbor-education/design-system.components';",
-  "import type { IcoTextProps, IcoTextIconProps, IcoTextHeadingProps, IcoTextParagraphProps } from '@arbor-education/design-system.components';",
+  "import { IconText } from '@arbor-education/design-system.components';",
+  "import type { IconTextProps, IconTextIconProps, IconTextHeadingProps, IconTextParagraphProps } from '@arbor-education/design-system.components';",
   '```',
 ].join('\n');
 
@@ -115,7 +115,7 @@ const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tw
 // Custom DocsPage
 // ---------------------------------------------------------------------------
 
-function IcoTextDocsPage() {
+function IconTextDocsPage() {
   return (
     <>
       <Title />
@@ -125,11 +125,11 @@ function IcoTextDocsPage() {
       <Markdown>{PROPS_INTRO}</Markdown>
       <DocPrimary />
       <Controls />
-      <DocHeading>IcoText.Icon props</DocHeading>
+      <DocHeading>IconText.Icon props</DocHeading>
       <Markdown>{ICON_PROPS}</Markdown>
-      <DocHeading>IcoText.Heading props</DocHeading>
+      <DocHeading>IconText.Heading props</DocHeading>
       <Markdown>{HEADING_PROPS}</Markdown>
-      <DocHeading>IcoText.Paragraph props</DocHeading>
+      <DocHeading>IconText.Paragraph props</DocHeading>
       <Markdown>{PARAGRAPH_PROPS}</Markdown>
       <DocHeading>Usage guidance</DocHeading>
       <Markdown>{USAGE_GUIDANCE}</Markdown>
@@ -147,12 +147,12 @@ function IcoTextDocsPage() {
 // ---------------------------------------------------------------------------
 
 const meta = {
-  title: 'Components/IcoText',
-  component: IcoText,
+  title: 'Components/IconText',
+  component: IconText,
   tags: ['autodocs'],
   parameters: {
     layout: 'padded',
-    docs: { page: IcoTextDocsPage },
+    docs: { page: IconTextDocsPage },
   },
   argTypes: {
     className: {
@@ -162,14 +162,14 @@ const meta = {
     },
     children: {
       control: false,
-      description: 'Compose using `IcoText.Icon`, `IcoText.Heading`, and `IcoText.Paragraph` sub-components.',
+      description: 'Compose using `IconText.Icon`, `IconText.Heading`, and `IconText.Paragraph` sub-components.',
       table: { type: { summary: 'ReactNode' } },
     },
   },
-} satisfies Meta<typeof IcoText>;
+} satisfies Meta<typeof IconText>;
 
 export default meta;
-type Story = StoryObj<typeof IcoText>;
+type Story = StoryObj<typeof meta>;
 
 // ---------------------------------------------------------------------------
 // Helper: attach a per-story description to docs
@@ -194,11 +194,11 @@ const IconSizesTemplate = () => (
         <p className="ds-text" style={{ margin: '0 0 var(--spacing-small)', color: 'var(--color-grey-600)' }}>
           {`size={${size}}`}
         </p>
-        <IcoText>
-          <IcoText.Icon name="guardians" size={size} />
-          <IcoText.Heading>Year 9 Attendance</IcoText.Heading>
-          <IcoText.Paragraph>28 pupils · 94.2% average this term</IcoText.Paragraph>
-        </IcoText>
+        <IconText>
+          <IconText.Icon name="guardians" size={size} />
+          <IconText.Heading>Year 9 Attendance</IconText.Heading>
+          <IconText.Paragraph>28 pupils · 94.2% average this term</IconText.Paragraph>
+        </IconText>
       </div>
     ))}
   </div>
@@ -216,23 +216,23 @@ const IconColorsTemplate = () => (
         <p className="ds-text" style={{ margin: '0 0 var(--spacing-small)', color: 'var(--color-grey-600)' }}>
           {label}
         </p>
-        <IcoText>
-          <IcoText.Icon name="triangle-alert" color={color} />
-          <IcoText.Heading>Attendance alert</IcoText.Heading>
-          <IcoText.Paragraph>3 pupils below 90% this half-term</IcoText.Paragraph>
-        </IcoText>
+        <IconText>
+          <IconText.Icon name="triangle-alert" color={color} />
+          <IconText.Heading>Attendance alert</IconText.Heading>
+          <IconText.Paragraph>3 pupils below 90% this half-term</IconText.Paragraph>
+        </IconText>
       </div>
     ))}
   </div>
 );
 
 const MultipleParagraphsTemplate = () => (
-  <IcoText>
-    <IcoText.Icon name="date" />
-    <IcoText.Heading>Parents&apos; evening — Tuesday 14 May</IcoText.Heading>
-    <IcoText.Paragraph>4:00 pm – 7:00 pm · Main Hall</IcoText.Paragraph>
-    <IcoText.Paragraph>Appointments available every 10 minutes. Please arrive 5 minutes early.</IcoText.Paragraph>
-  </IcoText>
+  <IconText>
+    <IconText.Icon name="date" />
+    <IconText.Heading>Parents&apos; evening — Tuesday 14 May</IconText.Heading>
+    <IconText.Paragraph>4:00 pm – 7:00 pm · Main Hall</IconText.Paragraph>
+    <IconText.Paragraph>Appointments available every 10 minutes. Please arrive 5 minutes early.</IconText.Paragraph>
+  </IconText>
 );
 
 // ---------------------------------------------------------------------------
@@ -242,14 +242,14 @@ const MultipleParagraphsTemplate = () => (
 export const Default: Story = withDescription(
   {
     render: () => (
-      <IcoText>
-        <IcoText.Icon name="guardians" />
-        <IcoText.Heading>Year 9 Attendance</IcoText.Heading>
-        <IcoText.Paragraph>28 pupils · 94.2% average this term</IcoText.Paragraph>
-      </IcoText>
+      <IconText>
+        <IconText.Icon name="guardians" />
+        <IconText.Heading>Year 9 Attendance</IconText.Heading>
+        <IconText.Paragraph>28 pupils · 94.2% average this term</IconText.Paragraph>
+      </IconText>
     ),
   },
-  'The full canonical composition — `IcoText.Icon` in the left rail, `IcoText.Heading` and `IcoText.Paragraph` in the content column.',
+  'The full canonical composition — `IconText.Icon` in the left rail, `IconText.Heading` and `IconText.Paragraph` in the content column.',
 );
 
 export const HeadingOnly: Story = withDescription(
@@ -260,14 +260,14 @@ export const HeadingOnly: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { IcoText } from '@arbor-education/design-system.components';
+import { IconText } from '@arbor-education/design-system.components';
 
 function HeadingOnlyExample() {
   return (
-    <IcoText>
-      <IcoText.Icon name="book-open" />
-      <IcoText.Heading>Assessment policy</IcoText.Heading>
-    </IcoText>
+    <IconText>
+      <IconText.Icon name="book-open" />
+      <IconText.Heading>Assessment policy</IconText.Heading>
+    </IconText>
   );
 }
 export default HeadingOnlyExample;
@@ -276,10 +276,10 @@ export default HeadingOnlyExample;
       },
     },
     render: () => (
-      <IcoText>
-        <IcoText.Icon name="book-open" />
-        <IcoText.Heading>Assessment policy</IcoText.Heading>
-      </IcoText>
+      <IconText>
+        <IconText.Icon name="book-open" />
+        <IconText.Heading>Assessment policy</IconText.Heading>
+      </IconText>
     ),
   },
   'Icon + Heading with no Paragraph — the compact pattern for short navigational labels.',
@@ -293,14 +293,14 @@ export const WithoutIcon: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { IcoText } from '@arbor-education/design-system.components';
+import { IconText } from '@arbor-education/design-system.components';
 
 function WithoutIconExample() {
   return (
-    <IcoText>
-      <IcoText.Heading>Behaviour report</IcoText.Heading>
-      <IcoText.Paragraph>No incidents recorded this week. All targets met.</IcoText.Paragraph>
-    </IcoText>
+    <IconText>
+      <IconText.Heading>Behaviour report</IconText.Heading>
+      <IconText.Paragraph>No incidents recorded this week. All targets met.</IconText.Paragraph>
+    </IconText>
   );
 }
 export default WithoutIconExample;
@@ -309,13 +309,13 @@ export default WithoutIconExample;
       },
     },
     render: () => (
-      <IcoText>
-        <IcoText.Heading>Behaviour report</IcoText.Heading>
-        <IcoText.Paragraph>No incidents recorded this week. All targets met.</IcoText.Paragraph>
-      </IcoText>
+      <IconText>
+        <IconText.Heading>Behaviour report</IconText.Heading>
+        <IconText.Paragraph>No incidents recorded this week. All targets met.</IconText.Paragraph>
+      </IconText>
     ),
   },
-  'Heading + Paragraph with no icon. The left rail disappears cleanly — `IcoText.Icon` is entirely optional.',
+  'Heading + Paragraph with no icon. The left rail disappears cleanly — `IconText.Icon` is entirely optional.',
 );
 
 export const IconWithScreenReaderText: Story = withDescription(
@@ -326,19 +326,19 @@ export const IconWithScreenReaderText: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { IcoText } from '@arbor-education/design-system.components';
+import { IconText } from '@arbor-education/design-system.components';
 
 function IconWithScreenReaderTextExample() {
   return (
-    <IcoText>
-      <IcoText.Icon
+    <IconText>
+      <IconText.Icon
         name="triangle-alert"
         color="var(--color-semantic-warning-600)"
         screenReaderText="Warning"
       />
-      <IcoText.Heading>Attendance below target</IcoText.Heading>
-      <IcoText.Paragraph>Alice Johnson — 78.4% this term. Intervention recommended.</IcoText.Paragraph>
-    </IcoText>
+      <IconText.Heading>Attendance below target</IconText.Heading>
+      <IconText.Paragraph>Alice Johnson — 78.4% this term. Intervention recommended.</IconText.Paragraph>
+    </IconText>
   );
 }
 export default IconWithScreenReaderTextExample;
@@ -347,11 +347,11 @@ export default IconWithScreenReaderTextExample;
       },
     },
     render: () => (
-      <IcoText>
-        <IcoText.Icon name="triangle-alert" color="var(--color-semantic-warning-600)" screenReaderText="Warning" />
-        <IcoText.Heading>Attendance below target</IcoText.Heading>
-        <IcoText.Paragraph>Alice Johnson — 78.4% this term. Intervention recommended.</IcoText.Paragraph>
-      </IcoText>
+      <IconText>
+        <IconText.Icon name="triangle-alert" color="var(--color-semantic-warning-600)" screenReaderText="Warning" />
+        <IconText.Heading>Attendance below target</IconText.Heading>
+        <IconText.Paragraph>Alice Johnson — 78.4% this term. Intervention recommended.</IconText.Paragraph>
+      </IconText>
     ),
   },
   'When the icon carries meaning not conveyed by the heading text, provide `screenReaderText`. Without it the icon is `aria-hidden="true"`. Here the warning triangle conveys severity — screen readers announce "Warning, Attendance below target".',
@@ -365,26 +365,26 @@ export const IconSizes: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { IcoText } from '@arbor-education/design-system.components';
+import { IconText } from '@arbor-education/design-system.components';
 
 function IconSizesExample() {
   return (
     <>
-      <IcoText>
-        <IcoText.Icon name="guardians" size={12} />
-        <IcoText.Heading>size 12</IcoText.Heading>
-        <IcoText.Paragraph>Use in very compact contexts</IcoText.Paragraph>
-      </IcoText>
-      <IcoText>
-        <IcoText.Icon name="guardians" size={16} />
-        <IcoText.Heading>size 16</IcoText.Heading>
-        <IcoText.Paragraph>Use in moderately compact contexts</IcoText.Paragraph>
-      </IcoText>
-      <IcoText>
-        <IcoText.Icon name="guardians" size={24} />
-        <IcoText.Heading>size 24 (default)</IcoText.Heading>
-        <IcoText.Paragraph>Standard — aligns best with h4 line-height</IcoText.Paragraph>
-      </IcoText>
+      <IconText>
+        <IconText.Icon name="guardians" size={12} />
+        <IconText.Heading>size 12</IconText.Heading>
+        <IconText.Paragraph>Use in very compact contexts</IconText.Paragraph>
+      </IconText>
+      <IconText>
+        <IconText.Icon name="guardians" size={16} />
+        <IconText.Heading>size 16</IconText.Heading>
+        <IconText.Paragraph>Use in moderately compact contexts</IconText.Paragraph>
+      </IconText>
+      <IconText>
+        <IconText.Icon name="guardians" size={24} />
+        <IconText.Heading>size 24 (default)</IconText.Heading>
+        <IconText.Paragraph>Standard — aligns best with h4 line-height</IconText.Paragraph>
+      </IconText>
     </>
   );
 }
@@ -395,7 +395,7 @@ export default IconSizesExample;
     },
     render: IconSizesTemplate,
   },
-  'All three supported icon sizes — 12, 16, and 24 (default). Use smaller sizes only in compact contexts such as table cells or dense lists. The `24` default aligns best with `IcoText.Heading`\'s h4 line-height.',
+  'All three supported icon sizes — 12, 16, and 24 (default). Use smaller sizes only in compact contexts such as table cells or dense lists. The `24` default aligns best with `IconText.Heading`\'s h4 line-height.',
 );
 
 export const IconColors: Story = withDescription(
@@ -406,15 +406,15 @@ export const IconColors: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { IcoText } from '@arbor-education/design-system.components';
+import { IconText } from '@arbor-education/design-system.components';
 
 function IconColorsExample() {
   return (
-    <IcoText>
-      <IcoText.Icon name="triangle-alert" color="var(--color-semantic-warning-600)" />
-      <IcoText.Heading>Attendance alert</IcoText.Heading>
-      <IcoText.Paragraph>3 pupils below 90% this half-term</IcoText.Paragraph>
-    </IcoText>
+    <IconText>
+      <IconText.Icon name="triangle-alert" color="var(--color-semantic-warning-600)" />
+      <IconText.Heading>Attendance alert</IconText.Heading>
+      <IconText.Paragraph>3 pupils below 90% this half-term</IconText.Paragraph>
+    </IconText>
   );
 }
 export default IconColorsExample;
@@ -424,7 +424,7 @@ export default IconColorsExample;
     },
     render: IconColorsTemplate,
   },
-  'The `color` prop on `IcoText.Icon` accepts any CSS value — always use design token variables, never hardcoded hex. Semantic tokens (`--color-semantic-*`) are most appropriate for status-indicating icons.',
+  'The `color` prop on `IconText.Icon` accepts any CSS value — always use design token variables, never hardcoded hex. Semantic tokens (`--color-semantic-*`) are most appropriate for status-indicating icons.',
 );
 
 export const MultipleParagraphs: Story = withDescription(
@@ -435,16 +435,16 @@ export const MultipleParagraphs: Story = withDescription(
         source: {
           language: 'tsx',
           code: `
-import { IcoText } from '@arbor-education/design-system.components';
+import { IconText } from '@arbor-education/design-system.components';
 
 function MultipleParagraphsExample() {
   return (
-    <IcoText>
-      <IcoText.Icon name="calendar" />
-      <IcoText.Heading>Parents' evening — Tuesday 14 May</IcoText.Heading>
-      <IcoText.Paragraph>4:00 pm – 7:00 pm · Main Hall</IcoText.Paragraph>
-      <IcoText.Paragraph>Appointments every 10 minutes. Please arrive 5 minutes early.</IcoText.Paragraph>
-    </IcoText>
+    <IconText>
+      <IconText.Icon name="date" />
+      <IconText.Heading>Parents' evening — Tuesday 14 May</IconText.Heading>
+      <IconText.Paragraph>4:00 pm – 7:00 pm · Main Hall</IconText.Paragraph>
+      <IconText.Paragraph>Appointments every 10 minutes. Please arrive 5 minutes early.</IconText.Paragraph>
+    </IconText>
   );
 }
 export default MultipleParagraphsExample;
@@ -454,5 +454,5 @@ export default MultipleParagraphsExample;
     },
     render: MultipleParagraphsTemplate,
   },
-  'Multiple `IcoText.Paragraph` sub-components stack vertically in the content column. Use for supplementary detail lines below the primary heading.',
+  'Multiple `IconText.Paragraph` sub-components stack vertically in the content column. Use for supplementary detail lines below the primary heading.',
 );

package/src/components/{icoText/IcoText.test.tsx → iconText/IconText.test.tsx}

@@ -1,25 +1,25 @@
-import { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
+import { render, screen, within } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
-import { IcoText } from './IcoText.js';
+import { IconText } from './IconText.js';
 
-describe('IcoText', () => {
+describe('IconText', () => {
   test('renders icon children before content children and keeps content in the content wrapper', () => {
     const { container } = render(
-      <IcoText>
-        <IcoText.Heading>Article title</IcoText.Heading>
-        <IcoText.Icon name="eye" screenReaderText="Views" />
-        <IcoText.Paragraph>Helpful supporting copy</IcoText.Paragraph>
+      <IconText>
+        <IconText.Heading>Article title</IconText.Heading>
+        <IconText.Icon name="eye" screenReaderText="Views" />
+        <IconText.Paragraph>Helpful supporting copy</IconText.Paragraph>
         <span>Metadata</span>
-        <IcoText.Icon name="eye" screenReaderText="More views" />
-      </IcoText>,
+        <IconText.Icon name="eye" screenReaderText="More views" />
+      </IconText>,
     );
 
     const root = container.querySelector<HTMLDivElement>('.ds-ico-text');
     const content = container.querySelector<HTMLDivElement>('.ds-ico-text__content');
 
     if (!content) {
-      throw new Error('Expected IcoText content wrapper to exist');
+      throw new Error('Expected IconText content wrapper to exist');
     }
 
     const iconElements = Array.from(root?.querySelectorAll(':scope > .ds-ico-text__icon') ?? []);

package/src/components/{icoText/IcoText.tsx → iconText/IconText.tsx}

@@ -3,20 +3,20 @@ import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
 import { Children, isValidElement } from 'react';
 
-export type IcoTextProps = {
+export type IconTextProps = {
   children?: React.ReactNode;
   className?: string;
 };
 
-export type IcoTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
+export type IconTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
   children: React.ReactNode;
 };
 
-export type IcoTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
+export type IconTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
   children: React.ReactNode;
 };
 
-export type IcoTextIconProps = {
+export type IconTextIconProps = {
   className?: string;
   color?: Icon.Props['color'];
   name: IconName;
@@ -24,33 +24,33 @@ export type IcoTextIconProps = {
   size?: 12 | 16 | 24;
 };
 
-const IcoTextHeading = ({
+const IconTextHeading = ({
   children,
   className,
   ...rest
-}: IcoTextHeadingProps): React.JSX.Element => (
+}: IconTextHeadingProps): React.JSX.Element => (
   <h4 className={classNames('ds-ico-text__heading', className)} {...rest}>
     {children}
   </h4>
 );
 
-const IcoTextParagraph = ({
+const IconTextParagraph = ({
   children,
   className,
   ...rest
-}: IcoTextParagraphProps): React.JSX.Element => (
+}: IconTextParagraphProps): React.JSX.Element => (
   <p className={classNames('ds-ico-text__paragraph', className)} {...rest}>
     {children}
   </p>
 );
 
-const IcoTextIcon = ({
+const IconTextIcon = ({
   className,
   color,
   name,
   screenReaderText,
   size = 24,
-}: IcoTextIconProps): React.JSX.Element => (
+}: IconTextIconProps): React.JSX.Element => (
   <Icon
     name={name}
     className={classNames('ds-ico-text__icon', className)}
@@ -60,12 +60,12 @@ const IcoTextIcon = ({
   />
 );
 
-const IcoTextRoot = ({ children, className }: IcoTextProps): React.JSX.Element => {
+const IconTextRoot = ({ children, className }: IconTextProps): React.JSX.Element => {
   const iconChildren: React.ReactNode[] = [];
   const contentChildren: React.ReactNode[] = [];
 
   Children.forEach(children, (child) => {
-    if (isValidElement(child) && child.type === IcoTextIcon) {
+    if (isValidElement(child) && child.type === IconTextIcon) {
       iconChildren.push(child);
       return;
     }
@@ -81,13 +81,20 @@ const IcoTextRoot = ({ children, className }: IcoTextProps): React.JSX.Element =
   );
 };
 
-IcoTextHeading.displayName = 'IcoText.Heading';
-IcoTextParagraph.displayName = 'IcoText.Paragraph';
-IcoTextIcon.displayName = 'IcoText.Icon';
-IcoTextRoot.displayName = 'IcoText';
+IconTextHeading.displayName = 'IconText.Heading';
+IconTextParagraph.displayName = 'IconText.Paragraph';
+IconTextIcon.displayName = 'IconText.Icon';
+IconTextRoot.displayName = 'IconText';
 
-export const IcoText = Object.assign(IcoTextRoot, {
-  Heading: IcoTextHeading,
-  Paragraph: IcoTextParagraph,
-  Icon: IcoTextIcon,
+export const IconText = Object.assign(IconTextRoot, {
+  Heading: IconTextHeading,
+  Paragraph: IconTextParagraph,
+  Icon: IconTextIcon,
 });
+
+export namespace IconText {
+  export type Props = IconTextProps;
+  export type HeadingProps = IconTextHeadingProps;
+  export type ParagraphProps = IconTextParagraphProps;
+  export type IconProps = IconTextIconProps;
+}

package/src/components/modal/Modal.tsx

@@ -20,6 +20,8 @@ export type ModalProps = {
   overlayClassName?: string;
   open?: boolean;
   portalTarget?: HTMLElement | null;
+  // Optional id for the dialog content so external triggers can point aria-controls at it.
+  contentId?: string;
   children?: React.ReactNode;
   hideCloseButton?: boolean;
   closeHandler?: ModalContextValue['closeHandler'];
@@ -32,6 +34,7 @@ export const Modal = (props: ModalProps) => {
     overlayClassName,
     open,
     portalTarget,
+    contentId,
     children,
     closeHandler,
     hideCloseButton = false,
@@ -46,7 +49,8 @@ export const Modal = (props: ModalProps) => {
         <Dialog.Root open={open}>
           <Dialog.Portal container={portalTarget}>
             <Dialog.Overlay ref={overlayRef} className={classNames('ds-modal__overlay', overlayClassName)}>
-              <Dialog.Content className={classNames('ds-modal__container', className)}>
+              {/* Preserve an optional target for trigger/content relationships such as FilterBar button-to-dialog wiring. */}
+              <Dialog.Content id={contentId} className={classNames('ds-modal__container', className)}>
                 {title && <ModalHeader><ModalTitle>{title}</ModalTitle></ModalHeader>}
                 {children}
                 {!hideCloseButton && <ModalCloseButon className="ds-modal__close-button--top-right" />}