@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/guidelines.md

@@ -2,41 +2,39 @@
 
 This document contains all design foundations and guidelines for the design system.
 
-## Introduction
+## React components / Introduction
 
-[](#introduction)Introduction
-=============================
+Introduction
+============
 
 The IDS and product design team use the foundations to create a consistent user experience across all Iress products. This includes design principles and guidelines that ensure a cohesive look and feel.
 
-1.  [Principles](./?path=/docs/foundations-principles--docs)
-2.  [Accessibility](./?path=/docs/foundations-accessibility--docs)
-3.  [Colours](./?path=/docs/foundations-colours--docs)
-4.  [Typography](./?path=/docs/foundations-typography--docs)
-5.  [Visual Design](./?path=/docs/foundations-visual-design--docs)
-6.  [Consistency](./?path=/docs/foundations-consistency--docs)
-7.  [Content](./?path=/docs/foundations-content--docs)
-8.  [User Experience](./?path=/docs/foundations-user-experience--docs)
+1.  [Principles](/docs/foundations-principles--docs)
+2.  [Accessibility](/docs/foundations-accessibility--docs)
+3.  [Colours](/docs/foundations-colours--docs)
+4.  [Typography](/docs/foundations-typography--docs)
+5.  [Visual Design](/docs/foundations-visual-design--docs)
+6.  [Consistency](/docs/foundations-consistency--docs)
+7.  [Content](/docs/foundations-content--docs)
+8.  [User Experience](/docs/foundations-user-experience--docs)
 
 _This document is a living standard. Revisit and revise regularly to reflect evolving needs, technologies, and user expectations._
 
-On this page
-
-## Principles
+## React components / Principles
 
-[](#core-design-principles)Core Design Principles
-=================================================
+Core Design Principles
+======================
 
-[](#consistency)Consistency
----------------------------
+Consistency
+-----------
 
 *   Maintain brand consistency across all applications and experiences
 *   Use standardised component naming conventions (all components start with `Iress` prefix)
 *   Leverage shared design tokens for spacing, colours, typography, and interactive states
 *   Ensure consistent behaviour patterns across similar components
 
-[](#accessibility-first)Accessibility First
--------------------------------------------
+Accessibility First
+-------------------
 
 *   Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
 *   Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
@@ -45,16 +43,16 @@ On this page
 *   Support focus management and skip navigation patterns
 *   Document accessibility considerations and requirements
 
-[](#clarity-and-usability)Clarity and Usability
------------------------------------------------
+Clarity and Usability
+---------------------
 
 *   Prioritise clear visual hierarchy through typography scales and spacing systems
 *   Use progressive disclosure to manage complexity
 *   Provide immediate feedback for user actions (loading states, validation, etc.)
 *   Design for touch-friendly interfaces with adequate target sizes
 
-[](#developer-experience)Developer Experience
----------------------------------------------
+Developer Experience
+--------------------
 
 *   Maintain clean component APIs with predictable prop patterns
 *   Provide comprehensive documentation with usage examples
@@ -63,65 +61,55 @@ On this page
 *   Enable efficient testing strategies with semantic roles and accessible queries
 *   Maintain up-to-date prop documentation and type definitions
 
-[](#quality-assurance)Quality assurance
----------------------------------------
+Quality assurance
+-----------------
 
 *   Test components across supported browsers and devices
 *   Validate accessibility compliance with automated and manual testing
 *   Ensure proper keyboard navigation functionality
 *   Test with assistive technologies (screen readers, voice control)
 
-### [](#code-standards)Code Standards
+### Code Standards
 
 *   Follow consistent naming conventions for CSS classes and component props
 *   Use semantic HTML elements where appropriate
 *   Implement proper TypeScript typing for better developer experience
 *   Maintain clean separation between presentation and logic
 
-### [](#performance-considerations)Performance Considerations
+### Performance Considerations
 
 *   Optimise component rendering and re-rendering
 *   Implement appropriate code splitting strategies
 *   Use efficient animation and transition patterns
 *   Consider bundle size impact of component dependencies
 
-On this page
-
-*   [Consistency](#consistency)
-*   [Accessibility First](#accessibility-first)
-*   [Clarity and Usability](#clarity-and-usability)
-*   [Developer Experience](#developer-experience)
-*   [Quality assurance](#quality-assurance)
-    *   [Code Standards](#code-standards)
-    *   [Performance Considerations](#performance-considerations)
-
-## Accessibility
+## React components / Accessibility
 
-[](#accessibility)Accessibility
-===============================
+Accessibility
+=============
 
 Accessibility is everyone's responsibility. It ensures that all users, regardless of their abilities or disabilities, can access and interact with our components effectively. This document outlines the key practices for building accessible components we follow within IDS.
 
 Please note: The default behaviour of our components is to be accessible, but it is the responsibility of the product to ensure that they are used correctly in accessibile context, or any modifications made to them do not compromise accessibility.
 
-[](#interaction-patterns)Interaction Patterns
----------------------------------------------
+Interaction Patterns
+--------------------
 
-### [](#keyboard-navigation)Keyboard Navigation
+### Keyboard Navigation
 
 *   Support standard keyboard shortcuts (Tab, Arrow keys, Enter, Space, Escape)
 *   Implement proper focus order and visual focus indicators
 *   Provide keyboard alternatives for mouse-only interactions
 *   Follow established ARIA patterns for complex widgets
 
-### [](#touch-interactions)Touch Interactions
+### Touch Interactions
 
 *   Provide adequate touch target sizes (minimum 44px)
 *   Implement touch-friendly spacing between interactive elements
 *   Support gesture-based interactions where appropriate
 *   Ensure consistent behaviour across device types
 
-### [](#loading-and-feedback)Loading and Feedback
+### Loading and Feedback
 
 *   Use appropriate loading patterns based on context:
     *   **Page**: Full page loading states
@@ -133,44 +121,34 @@ Please note: The default behaviour of our components is to be accessible, but it
 
 * * *
 
-[](#responsive-design)Responsive Design
----------------------------------------
+Responsive Design
+-----------------
 
-### [](#breakpoint-strategy)Breakpoint Strategy
+### Breakpoint Strategy
 
 *   Implement mobile-first responsive design
 *   Use consistent breakpoint values across all components
 *   Provide appropriate component variants for different screen sizes
 *   Consider content priority and progressive disclosure on smaller screens
 
-### [](#adaptive-behaviour)Adaptive Behaviour
+### Adaptive Behaviour
 
 *   Reduce option counts on mobile devices where appropriate
 *   Implement responsive navigation patterns
 *   Adjust spacing and sizing for different contexts
 *   Maintain usability across all supported devices
 
-On this page
-
-*   [Interaction Patterns](#interaction-patterns)
-    *   [Keyboard Navigation](#keyboard-navigation)
-    *   [Touch Interactions](#touch-interactions)
-    *   [Loading and Feedback](#loading-and-feedback)
-*   [Responsive Design](#responsive-design)
-    *   [Breakpoint Strategy](#breakpoint-strategy)
-    *   [Adaptive Behaviour](#adaptive-behaviour)
-
-## Colours
+## React components / Colour
 
-[](#colours)Colours
-===================
+Colours
+=======
 
 Colour is an integral aspect of conveying clear concise data. Our colours are optimized across two backgrounds, meeting or exceeding [WCAG 2.1 Level AA Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
 
 The Iress themes are designed to meet WCAG contrast guidelines (2.1 AA). We can't guarantee this when consumer branding is applied, so colour combinations should be checked to ensure conformance.
 
-[](#backgrounds)Backgrounds
----------------------------
+Backgrounds
+-----------
 
 ### Default Background
 
@@ -304,8 +282,8 @@ Used for the hover and active state of elements such as tables, button groups, e
     5.1 AA
     
 
-[](#primary)Primary
--------------------
+Primary
+-------
 
 ### Primary
 
@@ -333,8 +311,8 @@ Used for the hover state of primary buttons.
     15.5 AAA
     
 
-[](#system)System
------------------
+System
+------
 
 ### Info
 
@@ -412,37 +390,30 @@ Used to indicate an element that is above a threshold or limit. Usually used for
 *   \--iress-g-positive-contrast-color
     
     5.5 AA
-    
 
-On this page
+## React components / Typography
 
-*   [Backgrounds](#backgrounds)
-*   [Primary](#primary)
-*   [System](#system)
-
-## Typography
-
-[](#typography)Typography
-=========================
+Typography
+==========
 
 Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class. They implement consistent line heights and font weights.
 
 Typography styles are designed to be encapsulated. If you want text to pick up the Iress styling, you'll need to wrap it in an `IressText` component.
 
-[](#body)Body
--------------
+Body
+----
 
 This is the default text variant, and is designed to be clear and easy to read.
 
+[](./iframe.html?id=foundations-typography--body)
+
 Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
 
 *   Voluptatem assumenda soluta!
 *   Illum et atque alias possimus maiores rem in corrupti consectetur!
 *   Dolorum, repellat expedita!
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressText\>
   <p\>
@@ -457,13 +428,87 @@ Hide code
   </ul\>
 </IressText\>
 
-Copy
+```
 
-[](#headings)Headings
----------------------
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+ | \- | 
+
+Edit JSON
+
+*   children :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 6 keys
+        
+    *   1 :
+        
+        {...} 6 keys
+        
+    
+    \]
+    
+
+ |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+ | \- | Set object |
+
+Headings
+--------
 
 Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
 
+[](./iframe.html?id=foundations-typography--headings)
+
 Hello, we are a company that puts clients first.
 ================================================
 
@@ -479,9 +524,7 @@ Hello, we are a company that puts clients first.
 An H2 styled as an H3.
 ----------------------
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText element\="h1"\>
@@ -501,14 +544,66 @@ Hide code
     An H2 styled as an H3.  </IressText\>
 </IressStack\>
 
-Copy
+```
 
-[](#display)Display
--------------------
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+ | \- | \- |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+ | \- | Set object |
+
+Display
+-------
 
 Display text is used to draw attention to specific pieces of content, like introductory text on a landing page. It has larger font sizes than the heading variants, and a lighter font weight.
 
-Hello, we are a company that puts clients first.
+[](./iframe.html?id=foundations-typography--display)
 
 Hello, we are a company that puts clients first.
 
@@ -516,9 +611,9 @@ Hello, we are a company that puts clients first.
 
 Hello, we are a company that puts clients first.
 
-Hide code
+Hello, we are a company that puts clients first.
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText variant\="display1"\>
@@ -531,18 +626,70 @@ Hide code
     Hello, we are a company that puts clients first.  </IressText\>
 </IressStack\>
 
-Copy
+```
 
-[](#lead)Lead
--------------
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+ | \- | \- |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+ | \- | Set object |
+
+Lead
+----
 
 Lead text is used to introduce users to a new section, and often gives a brief summary of a section. It has a larger font size than body text, but a lighter font weight so that it doesn't clash with headings.
 
-Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
+[](./iframe.html?id=foundations-typography--lead)
 
-Hide code
+Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressText
   element\="p"
@@ -551,27 +698,151 @@ Hide code
   Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
 </IressText\>
 
-Copy
+```
 
-[](#caption)Caption
--------------------
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+ | \- | 
+
+"Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita."
+
+ |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+ | 
+
+'div'
+
+ | 
+
+"p"
+
+ |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+ | \- | 
+
+"lead"
+
+ |
+
+Caption
+-------
 
 The caption variant is used for small text that provides additional information about a table or image. It has a smaller font size than body text, and a lighter font weight.
 
-Example caption
+[](./iframe.html?id=foundations-typography--caption)
 
-Hide code
+Example caption
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressText element\="caption"\>
   Example caption
 </IressText\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+ | \- | 
+
+"Example caption"
+
+ |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+ | 
+
+'div'
+
+ | 
+
+"caption"
+
+ |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
 
-[](#other-variants)Other variants
----------------------------------
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+ | \- | Set object |
+
+Other variants
+--------------
 
 IDS also includes bold, italic and small text variants.
 
@@ -580,6 +851,8 @@ IDS also includes bold, italic and small text variants.
 *   Small text is used for side comments or for text that's secondary to the main content.
 *   Muted text is used to de-emphasise content, such as when displaying informative text that is not critical to the user experience.
 
+[](./iframe.html?id=foundations-typography--other)
+
 Bold text
 
 Italic text
@@ -588,9 +861,7 @@ Small text
 
 Muted text
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText variant\="bold"\>
@@ -603,32 +874,75 @@ Hide code
     Muted text  </IressText\>
 </IressStack\>
 
-Copy
+```
 
-On this page
+#### Props
 
-*   [Body](#body)
-*   [Headings](#headings)
-*   [Display](#display)
-*   [Lead](#lead)
-*   [Caption](#caption)
-*   [Other variants](#other-variants)
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
 
-## Visual Design
+union
 
-[](#visual-design-standards)Visual Design Standards
-===================================================
+ | \- | Set object |
+| children | 
 
-[](#typography)Typography
--------------------------
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+ | \- | \- |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+ | \- | Set object |
+
+## React components / Visual Design
+
+Visual Design Standards
+=======================
+
+Typography
+----------
 
 *   Use systematic font sizing with heading scales (H1-H6)
 *   Implement consistent line heights and font weights
 *   Provide text colour hierarchies (primary, muted, success, warning, danger)
 *   Support responsive typography scaling
 
-[](#colour-system)Colour System
--------------------------------
+Colour System
+-------------
 
 *   Maintain semantic colour meanings:
     *   **Primary**: Main call-to-action colour with high contrast
@@ -640,36 +954,29 @@ On this page
 *   Ensure all colour combinations meet accessibility contrast requirements
 *   Provide consistent hover and active state colours
 
-[](#spacing-and-layout)Spacing and Layout
------------------------------------------
+Spacing and Layout
+------------------
 
 *   Use systematic spacing scale (xs, sm, md, lg, xl)
 *   Apply consistent gutter systems for layout components
 *   Implement responsive breakpoints for adaptive layouts
 *   Maintain proper margin and padding relationships
 
-[](#interactive-states)Interactive States
------------------------------------------
+Interactive States
+------------------
 
 *   Provide clear hover, focus, active, and disabled states
 *   Use consistent transition timing and easing
 *   Implement proper focus indicators for keyboard navigation
 *   Show loading states for asynchronous operations
 
-On this page
+## React components / Consistency
 
-*   [Typography](#typography)
-*   [Colour System](#colour-system)
-*   [Spacing and Layout](#spacing-and-layout)
-*   [Interactive States](#interactive-states)
-
-## Consistency
-
-[](#using-components-consistently)Using components consistently
-===============================================================
+Using components consistently
+=============================
 
-[](#buttons)Buttons
--------------------
+Buttons
+-------
 
 *   **Primary**: Limit to one per view for main call-to-action
 *   **Secondary**: Use for secondary actions
@@ -678,135 +985,112 @@ On this page
 *   **Danger**: Destructive actions requiring extra confirmation
 *   **Positive/Negative**: Financial transactions (buy/sell)
 
-[](#forms)Forms
----------------
+Forms
+-----
 
 *   Always use `IressField` wrapper for proper label, hint, and error placement
 *   Provide clear validation feedback with appropriate error messages
 *   Use consistent input sizing based on expected content length
 *   Implement proper form state management and accessibility
 
-[](#navigation)Navigation
--------------------------
+Navigation
+----------
 
 *   Use semantic HTML5 navigation elements
 *   Provide skip links for keyboard users
 *   Implement proper ARIA labelling for navigation sections
 *   Ensure consistent navigation patterns across applications
 
-[](#data-display)Data Display
------------------------------
+Data Display
+------------
 
 *   Use semantic table structures with proper headers
 *   Provide clear visual hierarchy in data presentations
 *   Implement consistent sorting and filtering patterns
 *   Use appropriate loading states for data-heavy components
 
-[](#modals-and-overlays)Modals and Overlays
--------------------------------------------
+Modals and Overlays
+-------------------
 
 *   Reserve modals for critical tasks requiring full attention
 *   Provide multiple dismissal methods (backdrop, escape key, close button)
 *   Implement proper focus management and restoration
 *   Use slideouts for supplementary tasks where underlying content needs visibility
 
-On this page
-
-*   [Buttons](#buttons)
-*   [Forms](#forms)
-*   [Navigation](#navigation)
-*   [Data Display](#data-display)
-*   [Modals and Overlays](#modals-and-overlays)
+## React components / Content
 
-## Content
+Content
+=======
 
-[](#content)Content
-===================
-
-[](#microcopy-guidelines)Microcopy Guidelines
----------------------------------------------
+Microcopy Guidelines
+--------------------
 
 *   Use clear, concise language that matches user mental models
 *   Provide helpful error messages with actionable guidance
 *   Implement consistent tone of voice across all interface text
 *   Use progressive disclosure for complex information
 
-[](#iconography)Iconography
----------------------------
+Iconography
+-----------
 
 *   Use icons consistently with established meanings
 *   Provide screen reader text for meaningful icons
 *   Avoid using icons as the sole means of communication
 *   Maintain consistent icon sizing and alignment
 
-On this page
-
-*   [Microcopy Guidelines](#microcopy-guidelines)
-*   [Iconography](#iconography)
-
-## User Experience
+## React components / User Experience
 
-[](#user-experience)User experience
-===================================
+User experience
+===============
 
 We use heuristic guidelines to assess the usability and user-centred design quality of all Iress products.
 
-[](#system-feedback)System Feedback
------------------------------------
+System Feedback
+---------------
 
 *   Always show users where they are, what just happened, and what’s possible next.
 *   Provide immediate visual and textual feedback for all actions and states.
 *   Ensure feedback is clear, contextual, and proportionate to the importance of the action.
 
-[](#language-and-mental-models)Language and Mental Models
----------------------------------------------------------
+Language and Mental Models
+--------------------------
 
 *   Use user-centred language and avoid technical jargon.
 *   Follow cultural and industry conventions for colour, iconography, terminology, and layout.
 *   Align interaction patterns with real-world analogues wherever feasible.
 
-[](#control-and-forgiveness)Control and Forgiveness
----------------------------------------------------
+Control and Forgiveness
+-----------------------
 
 *   Make actions reversible and provide undo where errors may occur.
 *   Let users easily backtrack, edit inputs, or abandon flows.
 *   Provide escape hatches from any process without penalty.
 
-[](#standards-and-consistency)Standards and Consistency
--------------------------------------------------------
+Standards and Consistency
+-------------------------
 
 *   Use consistent layout, labelling, iconography, and grammar.
 *   Reinforce expectations by placing similar elements in predictable positions.
 *   Apply colour, spacing, and visual patterns consistently across all screens.
 
-[](#error-prevention-and-recovery)Error Prevention and Recovery
----------------------------------------------------------------
+Error Prevention and Recovery
+-----------------------------
 
 *   Prevent errors by anticipating misuse and validating early.
 *   Phrase error messages with clarity, empathy, and constructive suggestions.
 *   Where errors occur, explain why and how they can be resolved.
 
-[](#recognition-over-recall)Recognition Over Recall
----------------------------------------------------
+Recognition Over Recall
+-----------------------
 
 *   Display necessary information at the point of decision.
 *   Use visual grouping, spacing, and affordance to reveal hierarchy.
 *   Prioritise visual clarity over novelty.
 
-[](#simplicity-and-minimalism)Simplicity and Minimalism
--------------------------------------------------------
+Simplicity and Minimalism
+-------------------------
 
 *   Remove unnecessary detail—every word, element, or feature should earn its place.
 *   Design for clarity of purpose with visually distinct, semantically meaningful UI components.
 *   Use whitespace, clean alignment, and simplified flows to reduce cognitive load.
 
-On this page
-
-*   [System Feedback](#system-feedback)
-*   [Language and Mental Models](#language-and-mental-models)
-*   [Control and Forgiveness](#control-and-forgiveness)
-*   [Standards and Consistency](#standards-and-consistency)
-*   [Error Prevention and Recovery](#error-prevention-and-recovery)
-*   [Recognition Over Recall](#recognition-over-recall)
-*   [Simplicity and Minimalism](#simplicity-and-minimalism)
-