@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204040305-3639454 → 6.0.0-alpha.3

package/generated/docs/components_patterns-loading-docs.md

@@ -16,8 +16,21 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 [](./iframe.html?id=patterns-loading--wizard)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -263,8 +276,11 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 Update
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
+import { IressButton, IressLoading, IressStack } from '@/main';
+import { useCallback, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 const API \= {
   chart: async () \=>
     new Promise<boolean\>((resolve) \=> {
@@ -426,7 +442,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 This is taking longer than expected...
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading pattern\="default" />
 
@@ -533,7 +549,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
     ...
     
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   messageList\={{
@@ -713,8 +729,21 @@ In the news
 
 Loading...
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressCard,
+  IressCol,
+  IressContainer,
+  IressDivider,
+  IressInline,
+  IressLoading,
+  IressRow,
+  IressSkeleton,
+  IressStack,
+  IressText,
+} from '@/main';
+import { type ReactNode, useEffect, useState } from 'react';
 const API \= {
   criticalContent: async () \=>
     new Promise<ReactNode\>((resolve) \=> {
@@ -900,7 +929,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 [](./iframe.html?id=patterns-loading-patterns-startup--start-up)
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   messageList\={{
@@ -1080,7 +1109,7 @@ This is taking longer than expected...
 
 Cancel
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressInline gap\="sm"\>
   <IressLoading
@@ -1202,8 +1231,21 @@ The wizard example can be translated to use `IressLoadingSuspense` as follows (i
 
 [](./iframe.html?id=patterns-loading-suspense--suspense)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
+import { IressLoadingSuspense } from '../LoadingSuspense';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1377,8 +1419,21 @@ number
 
 [](./iframe.html?id=patterns-loading-suspense--fast-suspense)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
+import { IressLoadingSuspense } from '../LoadingSuspense';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1601,8 +1656,21 @@ Here you can see how a wizard can use the `IressLoading` component at different
 
 [](./iframe.html?id=patterns-loading--wizard)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1754,8 +1822,21 @@ export const LoadingWizard \= () \=> {
 
 [](./iframe.html?id=patterns-loading--fast-wizard)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }

package/generated/docs/components_patterns-shadow-docs.md

@@ -16,7 +16,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 [](./iframe.html?id=patterns-shadow--shadow)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressShadow\>
   <IressPanel\>
@@ -113,7 +113,7 @@ It has similar props to the `IressProvider`, however it will apply the styles to
 
 [](./iframe.html?id=patterns-shadow--shadow)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressShadow\>
   <IressPanel\>

package/generated/docs/components_resources-migration-guides-from-v4-to-v5-docs.md

@@ -10,8 +10,19 @@ Updating your dependencies
 
 Update your dependencies in your `package.json` file to the following:
 
+"dependencies": {
+  "@iress-oss/ids-components": "^5.0.0",
+  "@iress/themes": "^5.0.0"
+}
+
+```
+
 or run:
 
+yarn add @iress-oss/ids-components@^5.0.0 @iress/themes@^5.0.0
+
+```
+
 ### Upgrade React
 
 The minimum required version of React is 17. If you are using an older version of React, you will need to update it.
@@ -33,6 +44,10 @@ You can run both packages together, so you can migrate components one by one.
 
 IDS v5 no longer injects CSS into the DOM. You will need to import the stylesheet directly into your application.
 
+import '@iress-oss/ids-components/dist/style.css';
+
+```
+
 Update Jest configuration
 -------------------------
 
@@ -40,6 +55,12 @@ If you are using Jest, you will need to update your Jest configuration to add th
 
 **Note:** If you are using version 4 and version 5 in parallel, you will need to keep the old IDS packages in your `transformIgnorePatterns` until you have completely migrated over your components.
 
+"transformIgnorePatterns": \[
+  "/node\_modules/(?!@iress-oss/ids-components)"
+\]
+
+```
+
 If you are mocking CSS files for your tests, you'll also need to make sure the new stylesheet is matched by your `moduleNameMapper`:
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  "moduleNameMapper": {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    "^.+\.(scss|less)$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    "ids-web-components.css$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    "global.css$": "&lt;rootDir&gt;/test/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    "global.css$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    "@iress-oss/ids-components/(.*).css": "&lt;rootDir&gt;/test/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  },</pre></td></tr></tbody></table>
@@ -87,16 +108,95 @@ These classes have been removed from version 5. If you are targeting components
 
 This is the recommended approach. You can use design tokens and custom classes to style the components.
 
+.custom-radio {
+  \--iress-text-color: red;
+  align-self: center;
+}
+
+```
+
+<IressRadio className\="custom-radio" />
+
+```
+
 #### Option 2: Target the new classes
 
 This option is **not recommended** and should be used as a last resort, as the class names can change in future, in which case your stylesheet will no longer have any effect. It is recommended to use design tokens or custom classes instead.
 
+@use '@iress-oss/ids-components/dist/constants/index.scss' as \*;
+.ids-radio-#{$ids-version} {
+  align-self: center;
+}
+
+.ids-radio--label-#{$ids-version} {
+  color: red;
+}
+
+```
+
 ### Theme tokens
 
 There are a few token changes that have changed (though this has been relatively minor). The version 5 themes have been updated to use the new design tokens, however if you are using version 4 in parallel with version 5, you may notice that the version 4 styles can no longer find the removed/changed tokens.
 
 To fix this issue, please backfill the tokens in your application until you have finished your migration.
 
+/\* TODO: Will be removed once we have moved to IDS version 5 \*/
+/\* Change to the name(s) of the themes you want to back fill. \*/
+.iress-theme-light {
+  --iress-alert-error-text-color: var(--iress-alert-danger-text-color);
+  --iress-alert-error-background-color: var(
+    --iress-alert-danger-background-color
+  );
+  --iress-alert-error-border-color: var(--iress-alert-danger-border-color);
+  --iress-alert-error-heading-icon-text-color: var(
+    --iress-alert-danger-heading-icon-text-color
+  );
+
+  --iress-button-margin-right: var(--iress-g-spacing-xs);
+
+  --iress-combobox-option-meta-font-weight: var(
+    --iress-a-muted-font-weight,
+    var(--iress-g-font-weight, normal)
+  );
+  --iress-combobox-option-meta-text-color: var(
+    --iress-g-muted-text-color,
+    var(--iress-default-text-color--light)
+  );
+
+  --iress-filter-option-meta-font-weight: var(
+    --iress-a-muted-font-weight,
+    var(--iress-g-font-weight, normal)
+  );
+  --iress-filter-option-meta-text-color: var(
+    --iress-g-muted-text-color,
+    var(--iress-default-text-color--light)
+  );
+
+  --iress-form-field-margin-bottom: var(
+    --iress-a-vertical-spacing-lg,
+    var(--iress-g-spacing-lg)
+  );
+
+  --iress-table-cell-buy-text-color: var(
+    --iress-table-cell-positive-text-color
+  );
+  --iress-table-cell-sell-text-color: var(
+    --iress-table-cell-negative-text-color
+  );
+  --iress-table-cell-selected-buy-text-color: var(
+    --iress-table-cell-selected-positive-text-color
+  );
+  --iress-table-cell-selected-sell-text-color: var(
+    --iress-table-cell-selected-negative-text-color
+  );
+
+  --iress-validation-message-error-text-color: var(
+    --iress-validation-message-danger-text-color
+  );
+}
+
+```
+
 AG grid theme
 -------------
 
@@ -104,6 +204,10 @@ As of version 5, we only support the lite AG grid theme, which is used in conjun
 
 Run the following command to install the AG grid lite theme:
 
+yarn add @iress/ag-grid-theme@^5.0.0
+
+```
+
 Then you can import the AG Grid theme CSS, import the relevant IDS theme, and hook up the styles by setting a class of ag-theme-alpine ag-theme-iress-lite on your grid wrapper.
 
 Diff
@@ -121,6 +225,10 @@ Version 5 and version 4 can be run in parallel, but it is recommended to remove
 
 Run the following to remove version 4 and its related packages:
 
+yarn remove @iress/components @iress/components-react @iress/components-react-custom-elements @iress/ids-react-test-utils
+
+```
+
 ### Remove `global.css`
 
 The `global.css` file has been removed, it is now recommended to include the Roboto font directly using Google Fonts.

package/generated/docs/components_sandbox-docs.md

@@ -0,0 +1,226 @@
+CodeSandbox was updated!
+
+Sandbox
+
+[Drafts](https://codesandbox.io/dashboard/drafts)
+
+/
+
+dank-haze-jls882
+
+A
+
+VS CodeShare
+
+Sign In
+
+index.html - nodebox - CodeSandbox
+
+*   
+    
+*   
+    
+*   1
+    
+*   
+    
+*   
+    
+
+*   
+    
+*   
+    
+
+Explorer
+--------
+
+*   
+    
+
+Drag a view here to display.
+
+### Sandbox Info
+
+### nodebox
+
+*   
+*   
+*   
+*   
+*   
+
+index.html
+
+index.tsx
+
+package.json
+
+### Dependencies
+
+react
+
+latest
+
+[
+
+](https://www.npmjs.com/package/react)
+
+react-dom
+
+latest
+
+[
+
+](https://www.npmjs.com/package/react-dom)
+
+@iress-oss/ids-components
+
+alpha
+
+[
+
+](https://www.npmjs.com/package/@iress-oss/ids-components)
+
+### Outline
+
+*   
+*   
+    
+
+*   
+
+Show All Commands
+
+Ctrl+Shift+P
+
+Go to File
+
+Ctrl+P
+
+Find in Files
+
+Ctrl+Shift+F
+
+Toggle Full Screen
+
+F11
+
+Show Settings
+
+Ctrl+,
+
+index.html
+
+*   
+
+*   
+*   
+*   
+    
+
+index.html
+
+html
+
+1
+
+2
+
+3
+
+4
+
+5
+
+6
+
+7
+
+8
+
+9
+
+<html\>
+
+  <head\>
+
+    <title\>Iress Design System</title\>
+
+  </head\>
+
+  <body\>
+
+    <div id\="root"\></div\>
+
+  </body\>
+
+</html\>
+
+Press desired key combination and then press ENTER.
+
+*   
+*   
+
+Show All Commands
+
+Ctrl+Shift+P
+
+Go to File
+
+Ctrl+P
+
+Find in Files
+
+Ctrl+Shift+F
+
+Toggle Full Screen
+
+F11
+
+Show Settings
+
+Ctrl+,
+
+Preview
+
+*   
+
+*   
+*   
+    
+
+[
+
+](https://jls882.csb.app/)
+
+*   
+*   
+
+Drag a view here to display.
+
+*   
+
+Drag a view here to display.
+
+CodeSandbox - Sandbox (Web)
+
+0 0
+
+1
+
+Prettier
+
+Layout: us
+
+html
+
+LF
+
+UTF-8
+
+Spaces: 2
+
+Ln 1, Col 1
+
+Open preview

package/generated/docs/components_styling-props-colour-docs.md

@@ -16,7 +16,7 @@ Below is an example of a component using `bg` and `color` to create a featured p
 
 This is a featured panel, in case you want to highlight something important or draw attention to a specific piece of content.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   bg\="colour.primary.fill"
@@ -61,7 +61,7 @@ Below is an example of using the `color` prop to highlight text throughout a com
 
 Sometimes actions are **successful**, and sometimes they are **dangerous**.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel\>
   <p\>

package/generated/docs/components_styling-props-elevation-docs.md

@@ -16,7 +16,7 @@ The `layerStyle` prop allows you to draw attention to certain parts of the scree
 
 This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel layerStyle\="elevation.raised"\>
   This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
@@ -46,7 +46,7 @@ It can be set to `true` to enable focus styles when the element is focused using
 
 This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   focusable\="true"

package/generated/docs/components_styling-props-radius-docs.md

@@ -10,11 +10,11 @@ The `borderRadius` prop allows you to change the border radius of any component.
 
 [](./iframe.html?id=styling-props-radius--border-radius)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput
   borderRadius\="radius.system.layout"
-  p\="spacing.400"
+  p\="spacing.4"
   placeholder\="Search everything"
   textStyle\="typography.body.lg"
 />
@@ -40,7 +40,7 @@ In some cases you may need to remove the border-radius to achieve design require
 
 No radius here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   bg\="alt"

package/generated/docs/components_styling-props-reference-docs.md

@@ -42,7 +42,7 @@ Styling props reference
 | [textStyle](/?path=/docs/styling-props-typography--docs#textStyle) | font | [Typography](/?path=/docs/foundations-tokens-typography--docs) | Yes |
 | [width](/?path=/docs/styling-props-sizing--docs#inputwidths) | width | N/A | Yes |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <StylingPropsReferenceTable gap\="md" />
 
@@ -108,7 +108,7 @@ If you have been using the utility classes from previous versions of IDS (eg. `i
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">&lt;IressPanel className="iress-m--sm" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">&lt;IressPanel m="sm" /&gt;</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer oldValue\={\`<IressPanel className="iress-m--sm" />\`} newValue\={\`<IressPanel m="sm" />\`} />
@@ -140,7 +140,7 @@ If you have been using the internal component tokens (eg. `--iress-background-co
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">&lt;IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">&lt;IressPanel bg="colour.system.success.fill" /&gt;</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer oldValue\={\`<IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} />\`} newValue\={\`<IressPanel bg="colour.system.success.fill" />\`} />

package/generated/docs/components_styling-props-screen-readers-docs.md

@@ -12,7 +12,7 @@ The `srOnly` prop allows you to set a component to be only visible on screen rea
 
 Hello screen readers
 
-Show code
+Show codedrawOpen in CodeSandbox
 
 #### Props
 
@@ -33,7 +33,7 @@ The `srOnly` prop is responsive, allowing you to show content on larger screens
 
 This content is visible on large screens and screen readers
 
-Show code
+Show codedrawOpen in CodeSandbox
 
 #### Props