@iress-oss/ids-mcp-server 0.0.1-dev.3 → 0.0.1

package/generated/docs/components-popover-docs.md

@@ -1,464 +0,0 @@
-[](#popover)Popover
-===================
-
-Overview
---------
-
-A popover is panel that is toggled on/off by an activator button or text input. The panel is positioned relative to its activator element.
-
-Toggle popover
-
-A little more information about this area.
-
-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; }
-
-<IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
-  <IressPanel className\="iress-u-text"\>
-    A little more information about this area.  </IressPanel\>
-</IressPopover\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#activator)Activator
-
-For the popover to render, the `activator` property is required. It is the element used to trigger the popover, and works best with an `IressButton`.
-
-Anything added as the children of the `IressPopover` component will be displayed in the popover panel.
-
-Toggle popover
-
-A little more information about this area.
-
-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; }
-
-<IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
-  <IressPanel className\="iress-u-text"\>
-    A little more information about this area.  </IressPanel\>
-</IressPopover\>
-
-Copy
-
-### [](#the-show-property)The `show` property
-
-You can use state to control the popover by setting the `show` property to `true` or `false`. To sync your state with the popover, you can use the `onActivated` and `onDeactivated` prop.
-
-Show popover using state
-
-A little more information about this area.
-
-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; }
-
-import {
-  IressButton,
-  IressPanel,
-  IressPopover,
-  IressPopoverProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const PopoverUsingState \= () \=> {
-  const \[show, setShow\] \= useState(false);
-  return (
-    <IressPopover
-      
-      activator\={
-        <IressButton onClick\={() \=> setShow(!show)}\>
-          Show popover using state        </IressButton\>
-      }
-      show\={show}
-      onActivated\={() \=> setShow(true)}
-      onDeactivated\={() \=> setShow(false)}
-    \>
-      <IressPanel\>A little more information about this area.</IressPanel\>
-    </IressPopover\>
-  );
-};
-
-Copy
-
-[](#behaviour)Behaviour
------------------------
-
-*   The popover is opened when the activator is pressed
-*   Once activated, the popover will set focus to popover content
-*   When the activator is pressed whilst the popover is open, it will close
-*   When the escape key is pressed while it is open, it will close
-*   When the popover panel loses focus, it will close
-
-[](#examples)Examples
----------------------
-
-### [](#align)Align
-
-The popover panel can be aligned in one of 12 positions relative to the activator element. The default value is `auto`.
-
-The popover panel's position will change dynamically based on the amount of space available in it's container window, so that it doesn't overflow.
-
-top-start
-
-Hello!
-
-top
-
-Hello!
-
-top-end
-
-Hello!
-
-left-start
-
-Hello!
-
-left
-
-Hello!
-
-left-end
-
-Hello!
-
-right-start
-
-Hello!
-
-right
-
-Hello!
-
-right-end
-
-Hello!
-
-bottom-start
-
-Hello!
-
-bottom
-
-Hello!
-
-bottom-end
-
-Hello!
-
-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; }
-
-<div
-  style\={{
-    padding: '80px 150px'
-  }}
-\>
-  <IressStack gutter\="md"\>
-    <IressInline
-      gutter\="sm"
-      horizontalAlign\="center"
-    \>
-      <IressPopover
-        activator\={<IressTooltip align\="bottom-start" tooltipText\="Tooltips and popovers can go together if needed!"\><IressButton\>top-start</IressButton\></IressTooltip\>}
-        align\="top-start"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>top</IressButton\>}
-        align\="top"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>top-end</IressButton\>}
-        align\="top-end"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-    </IressInline\>
-    <IressInline horizontalAlign\="between"\>
-      <IressStack gutter\="sm"\>
-        <IressInline horizontalAlign\="left"\>
-          <IressPopover
-            activator\={<IressButton\>left-start</IressButton\>}
-            align\="left-start"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="left"\>
-          <IressPopover
-            activator\={<IressButton\>left</IressButton\>}
-            align\="left"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="left"\>
-          <IressPopover
-            activator\={<IressButton\>left-end</IressButton\>}
-            align\="left-end"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-      </IressStack\>
-      <IressStack gutter\="sm"\>
-        <IressInline horizontalAlign\="right"\>
-          <IressPopover
-            activator\={<IressButton\>right-start</IressButton\>}
-            align\="right-start"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="right"\>
-          <IressPopover
-            activator\={<IressButton\>right</IressButton\>}
-            align\="right"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="right"\>
-          <IressPopover
-            activator\={<IressButton\>right-end</IressButton\>}
-            align\="right-end"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-      </IressStack\>
-    </IressInline\>
-    <IressInline
-      gutter\="sm"
-      horizontalAlign\="center"
-    \>
-      <IressPopover
-        activator\={<IressButton\>bottom-start</IressButton\>}
-        align\="bottom-start"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>bottom</IressButton\>}
-        align\="bottom"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>bottom-end</IressButton\>}
-        align\="bottom-end"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-    </IressInline\>
-  </IressStack\>
-</div\>
-
-Copy
-
-### [](#width)Width
-
-Occasionally, you may have more information to display than the width set by the theme can comfortably show.
-
-This is where the `--iress-width` CSS token come in, it will allow you to set the width for the popover panel. For better results, its recommended to use it with the `--iress-max-width` CSS token, to allow your popovers to be responsive.
-
-**Note:** The `width` prop has been deprecated in favour of the CSS tokens.
-
-Toggle popover
-
-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; }
-
-<IressPopover
-  activator\={<IressButton\>Toggle popover</IressButton\>}
-  container\={document.body}
-  style\={{
-    '--iress-max-width': '30rem',
-    '--iress-width': '100%'
-  }}
-\>
-  <IressPanel\>
-    <IressRow\>
-      <IressCol span\={6}\>
-        <IressText\>
-          Client        </IressText\>
-        <IressText noGutter\>
-          <ul\>
-            <li\>
-              Entity id 582323            </li\>
-            <li\>
-              Fruit Apple            </li\>
-            <li\>
-              Preferred email mamaduke@gmail.com            </li\>
-          </ul\>
-        </IressText\>
-      </IressCol\>
-      <IressCol span\={6}\>
-        <IressText\>
-          Client        </IressText\>
-        <IressText noGutter\>
-          <ul\>
-            <li\>
-              Entity id 8766            </li\>
-            <li\>
-              Fruit Orange            </li\>
-            <li\>
-              Preferred email felicity@yahoo.com            </li\>
-          </ul\>
-        </IressText\>
-      </IressCol\>
-    </IressRow\>
-  </IressPanel\>
-</IressPopover\>
-
-Copy
-
-### [](#overflow)Overflow
-
-Popovers can contain a wide variety of different content, including components that use popovers themselves (like Combobox). This can cause issues with overflowing content, so by default we allow popovers to grow in height based on their content.
-
-If you need to fix the height of a popover, you can set a maximum height using the `--iress-max-height` theme token on your popover. You'll also need to change the overflow behaviour by setting the `--iress-overflow-y` theme token:
-
-Normal popover
-
-Fixed height popover
-
-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; }
-
-<IressInline gutter\="md"\>
-  <IressPopover
-    activator\={<IressButton\>Normal popover</IressButton\>}
-    align\="bottom-start"
-    container\={document.body}
-  \>
-    <IressPanel\>
-      <IressText noGutter\>
-        <p\>
-          His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.        </p\>
-      </IressText\>
-    </IressPanel\>
-  </IressPopover\>
-  <IressPopover
-    activator\={<IressButton\>Fixed height popover</IressButton\>}
-    align\="bottom-start"
-    container\={document.body}
-    style\={{
-      '--iress-max-height': '200px',
-      '--iress-overflow-y': 'auto'
-    }}
-  \>
-    <IressPanel\>
-      <IressText noGutter\>
-        <p\>
-          His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.        </p\>
-      </IressText\>
-    </IressPanel\>
-  </IressPopover\>
-</IressInline\>
-
-Copy
-
-### [](#container)Container
-
-By default, the popover will be rendered where its parent is rendered. If you need to render the popover in a different container, you can use the `container` prop.
-
-**Note:** If the `container` doesn’t exist when the portal is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available.
-
-This will be the case when you are rendering into its parent container, which is not yet rendered when the popover is mounted. The example below shows how to use state instead of a reference to change where the popover is rendered.
-
-Toggle
-
-This content will be rendered in the parent container
-
-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; }
-
-export const PopoverParentContainer \= () \=> {
-  const \[parentContainer, setParentContainer\] \= useState<HTMLDivElement | null\>(
-    null,
-  );
-  return (
-    <div id\="parent" ref\={setParentContainer}\>
-      <IressPopover
-        activator\={<IressButton\>Toggle</IressButton\>}
-        container\={parentContainer}
-      \>
-        <IressPanel\>
-          This content will be rendered in the parent container        </IressPanel\>
-      </IressPopover\>
-    </div\>
-  );
-};
-
-Copy
-
-[](#iressinputpopover)`IressInputPopover`
------------------------------------------
-
-If you need a popover that is triggered by input changes, you can use the `IressInputPopover` component. This component has an additional `minLength` prop that allows you to specify the minimum number of characters required before the popover is shown.
-
-### [](#behaviour-1)Behaviour
-
-Input popovers work slightly different to normal popovers, where the focus inside the popover is **virtual**. This means that the popover content will act as if it is in focus, but the input will still be the actual focus.
-
-*   The popover is opened when the input has content that meets the `minLength` requirement
-*   The popover is closed when the input no longer meets the `minLength` requirement
-*   Once activated, virtual focus will be set to the popover content if it contains a menu (e.g. items will highlight as if in focus, but the user can still type in the input)
-*   When the `minLength` is 0, it will open on focus
-*   When the escape key is pressed while it is open, it will close
-*   When the input loses focus, it will close
-
-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; }
-
-<IressInputPopover
-  activator\={<IressInput />}
-  container\={document.body}
-\>
-  <IressPanel className\="iress-u-text"\>
-    A little more information about this area.  </IressPanel\>
-</IressInputPopover\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Activator](#activator)
-    *   [The show property](#the-show-property)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Align](#align)
-    *   [Width](#width)
-    *   [Overflow](#overflow)
-    *   [Container](#container)
-*   [IressInputPopover](#iressinputpopover)
-    *   [Behaviour](#behaviour-1)

package/generated/docs/foundations-accessibility-docs.md

@@ -1,62 +0,0 @@
-[](#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
----------------------------------------------
-
-### [](#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
-
-*   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
-
-*   Use appropriate loading patterns based on context:
-    *   **Page**: Full page loading states
-    *   **Component**: Local loading within sections
-    *   **Button**: Inline loading for form submissions
-    *   **Validate**: Server-side validation feedback
-*   Provide clear success and error feedback
-*   Use progressive enhancement for better perceived performance
-
-* * *
-
-[](#responsive-design)Responsive Design
----------------------------------------
-
-### [](#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
-
-*   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)

package/generated/docs/foundations-consistency-docs.md

@@ -1,52 +0,0 @@
-[](#using-components-consistently)Using components consistently
-===============================================================
-
-[](#buttons)Buttons
--------------------
-
-*   **Primary**: Limit to one per view for main call-to-action
-*   **Secondary**: Use for secondary actions
-*   **Tertiary**: Extra affordance between secondary actions
-*   **Link**: Button styled as link (avoid with icon-only content)
-*   **Danger**: Destructive actions requiring extra confirmation
-*   **Positive/Negative**: Financial transactions (buy/sell)
-
-[](#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
--------------------------
-
-*   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
------------------------------
-
-*   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
--------------------------------------------
-
-*   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)

package/generated/docs/foundations-content-docs.md

@@ -1,23 +0,0 @@
-[](#content)Content
-===================
-
-[](#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
----------------------------
-
-*   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)

package/generated/docs/foundations-introduction-docs.md

@@ -1,17 +0,0 @@
-[](#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)
-
-_This document is a living standard. Revisit and revise regularly to reflect evolving needs, technologies, and user expectations._
-
-On this page

package/generated/docs/foundations-principles-docs.md

@@ -1,70 +0,0 @@
-[](#core-design-principles)Core Design Principles
-=================================================
-
-[](#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
--------------------------------------------
-
-*   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)
-*   Implement comprehensive keyboard navigation support
-*   Include screen reader compatibility with appropriate ARIA attributes
-*   Support focus management and skip navigation patterns
-*   Document accessibility considerations and requirements
-
-[](#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
----------------------------------------------
-
-*   Maintain clean component APIs with predictable prop patterns
-*   Provide comprehensive documentation with usage examples
-*   Include common patterns and anti-patterns
-*   Support both controlled and uncontrolled component patterns
-*   Enable efficient testing strategies with semantic roles and accessible queries
-*   Maintain up-to-date prop documentation and type definitions
-
-[](#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
-
-*   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
-
-*   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)