@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

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

@@ -1,1146 +0,0 @@
-[](#menu)Menu
-=============
-
-Overview
---------
-
-A menu can display grouped action buttons, navigation items or headings.
-
-* * *
-
-Updated
-
-**Recently updated**
-
-This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-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; }
-
-<IressMenu defaultSelected\="5"\>
-  <IressMenuHeading\>
-    Menu heading  </IressMenuHeading\>
-  <IressMenuItem value\="2"\>
-    Menu item (button)  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem href\="https://iress.com"\>
-    Menu item (link)  </IressMenuItem\>
-  <IressMenuItem
-    selected
-    value\={5}
-  \>
-    Menu item (selected)  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-[](#props)Props
----------------
-
-Below are the custom props you can access when using `IressMenu`. In addition to these, you have access to the original props of the underlying [`div` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div).
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| bg | 
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| changeOnBlur | 
-
-If set to true, change event will be fired with the correctly selected value.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| children | 
-
-Content of the menu, usually multiple `IressMenuItem`, `IressMenuHeading`, `IressMenuText` or `IressMenuDivider`.
-
-ReactNode
-
-
-
- | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| defaultSelected | 
-
-Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
-
-ControlledValue<T, TMultiple> | undefined
-
- | \- | 
-
-"5"
-
- |
-| fluid | 
-
-If set to true, menu will fill the width of its container.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| id | 
-
-Unique ID of the menu. If not provided, will be automatically generated. Used to add aria attributes for accessibility.
-
-stringundefined
-
-
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| layout | 
-
-Sets whether the layout is vertical (stack) or horizontal (inline/inline-equal-width).
-
-"inline""stack""inline-equal-width"undefined
-
-
-
- | 
-
-stack
-
- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| multiSelect | 
-
-If set to true, menu items will contain checkboxes.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| noWrap | 
-
-If set to true, menu items will not wrap onto a separate line when space is exceeded.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| onChange | 
-
-Emitted when the menu value changes
-
-((value?: ControlledValue<T, TMultiple> | null | undefined) => void) | undefined
-
- | \- | \- |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| role | 
-
-Type of menu, corresponding to [aria-roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Will be set automatically when used inside popover or when the `multiSelect` prop is set to true.
-
-"list""menu""listbox"undefined
-
-
-
- | 
-
-list
-
- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| selected | 
-
-Selected values of menu when `role` is listbox. Used for controlled menus.
-
-ControlledValue<T, TMultiple> | undefined
-
- | \- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| width | 
-
-The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
-
-This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **4** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-
-[](#usage)Usage
----------------
-
-### [](#basic)Basic
-
-`IressMenuDivider`, `IressMenuHeading`, `IressMenuItem` and `IressMenuText` should be supplied as `children` of the menu.
-
-*   `IressMenuDivider` can be used to display a divider, it supports all of the props of `hr`. It will adjust according to the menu's role and layout.
-*   `IressMenuHeading` is used to display headings. It supports all of the props of `IressText` and will adjust according to the menu's role and layout.
-*   `IressMenuItem` is used to display an interactive item. If provided a `href` prop will render the item as a link, otherwise it will render as a button.
-*   `IressMenuText` can be used to display other non-interactive text. It supports all of the props of `IressText`.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-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; }
-
-<IressMenu defaultSelected\="5"\>
-  <IressMenuHeading\>
-    Menu heading  </IressMenuHeading\>
-  <IressMenuItem value\="2"\>
-    Menu item (button)  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem href\="https://iress.com"\>
-    Menu item (link)  </IressMenuItem\>
-  <IressMenuItem
-    selected
-    value\={5}
-  \>
-    Menu item (selected)  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#complex)Complex
-
-`IressMenuItem`, `IressMenuHeading` and `IressMenuText` support `prepend`, `divider` and `append` slots, to allow you to create complex menu items.
-
-Note: Instead of using the `divider` prop on `IressMenuItem`, you can use `IressMenuDivider` to separate items. This gives you more control over where the divider sits.
-
-Heading with prepend
---------------------
-
-Button with append and prepend
-
-* * *
-
-### Heading with append and prepend
-
-[Link with append](https://iress.com)
-
-* * *
-
-Button with append[A link with a very long name that wraps based on the menu's `noWrap` prop](https://iress.com)
-
-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; }
-
-<IressMenu maxWidth\="input.25perc"\>
-  <IressMenuHeading prepend\={<IressIcon fixedWidth name\="smile"/>}\>
-    Heading with prepend  </IressMenuHeading\>
-  <IressMenuItem
-    append\={<IressIcon name\="chevron-right" />}
-    divider
-    prepend\={<IressIcon fixedWidth name\="flag"/>}
-    selected
-    value\="3"
-  \>
-    Button with append and prepend  </IressMenuItem\>
-  <IressMenuHeading
-    append\={<IressIcon fixedWidth name\="smile"/>}
-    element\="h3"
-    prepend\={<IressIcon fixedWidth name\="smile"/>}
-  \>
-    Heading with append and prepend  </IressMenuHeading\>
-  <IressMenuItem
-    append\={<IressIcon name\="chevron-right" />}
-    href\="https://iress.com"
-    value\="4"
-  \>
-    Link with append  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem
-    append\={<IressIcon name\="chevron-right" />}
-    value\="6"
-  \>
-    Button with append  </IressMenuItem\>
-  <IressMenuItem
-    append\={<IressIcon name\="chevron-right" />}
-    href\="https://iress.com"
-    value\="7"
-  \>
-    A link with a very long name that wraps based on the menu's{' '}    <code\>
-      noWrap    </code\>
-    {' '}prop
-  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#secondary-navigation)Secondary navigation
-
-When the `href` prop is set on `IressMenuItem`, it will render as a link.
-
-When rendering a set of links for navigation purposes (as a secondary nav in this example) make sure you wrap the `IressMenu` in a nav element and set the menu's `role` prop to list.
-
-[Financial advice](https://www.iress.com/software/financial-advice/)[Trading and market data](https://www.iress.com/software/trading-and-market-data/)[Investment management](https://www.iress.com/software/investment-management/)[Mortgages](https://www.iress.com/software/mortgages/)[Life and pensions](https://www.iress.com/software/life-and-pensions/)
-
-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; }
-
-<nav aria-label\="Secondary"\>
-  <IressMenu\>
-    <IressMenuItem href\="https://www.iress.com/software/financial-advice/"\>
-      Financial advice    </IressMenuItem\>
-    <IressMenuItem
-      href\="https://www.iress.com/software/trading-and-market-data/"
-      selected
-    \>
-      Trading and market data    </IressMenuItem\>
-    <IressMenuItem href\="https://www.iress.com/software/investment-management/"\>
-      Investment management    </IressMenuItem\>
-    <IressMenuItem href\="https://www.iress.com/software/mortgages/"\>
-      Mortgages    </IressMenuItem\>
-    <IressMenuItem href\="https://www.iress.com/software/life-and-pensions/"\>
-      Life and pensions    </IressMenuItem\>
-  </IressMenu\>
-</nav\>
-
-Copy
-
-### [](#headings)Headings
-
-Using the `IressMenuHeading` component, you can create headings within the menu. Simply set the `element` or `textStyle` prop to your desired heading level.
-
-#### Menu heading (h4)
-
-Menu item 1
-
-##### Menu heading (h5)
-
-Menu item 2
-
-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; }
-
-<IressMenu\>
-  <IressMenuHeading element\="h4"\>
-    Menu heading (h4)  </IressMenuHeading\>
-  <IressMenuItem\>
-    Menu item 1  </IressMenuItem\>
-  <IressMenuHeading element\="h5"\>
-    Menu heading (h5)  </IressMenuHeading\>
-  <IressMenuItem\>
-    Menu item 2  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#dividers)Dividers
-
-When the `divider` prop is set, the `IressMenuItem`, `IressMenuHeading` and `IressMenuText` will render a bottom border.
-
-In situations where a bottom border will not work, you can also use `IressMenuDivider` inside the menu to separate items.
-
-#### Menu heading (h4)
-
-* * *
-
-Menu item 1Menu item 2
-
-* * *
-
-##### Menu heading (h5)
-
-Menu item 3Menu item 4
-
-* * *
-
-Menu item 5
-
-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; }
-
-<IressMenu\>
-  <IressMenuHeading
-    divider
-    element\="h4"
-  \>
-    Menu heading (h4)  </IressMenuHeading\>
-  <IressMenuItem\>
-    Menu item 1  </IressMenuItem\>
-  <IressMenuItem divider\>
-    Menu item 2  </IressMenuItem\>
-  <IressMenuHeading element\="h5"\>
-    Menu heading (h5)  </IressMenuHeading\>
-  <IressMenuItem selected\>
-    Menu item 3  </IressMenuItem\>
-  <IressMenuItem\>
-    Menu item 4  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem\>
-    Menu item 5  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#fluid-menus)Fluid menus
-
-By setting the `fluid` prop on the menu component, the menu will stretch to the width of its containing element.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-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; }
-
-<IressMenu
-  defaultSelected\="5"
-  fluid
-\>
-  <IressMenuHeading\>
-    Menu heading  </IressMenuHeading\>
-  <IressMenuItem value\="2"\>
-    Menu item (button)  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem href\="https://iress.com"\>
-    Menu item (link)  </IressMenuItem\>
-  <IressMenuItem
-    selected
-    value\={5}
-  \>
-    Menu item (selected)  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#layout)Layout
-
-The `layout` prop comes with three options:
-
-*   `stack` (default) - menu items will stack on top of each other
-*   `inline` - menu items will be inline
-*   `inline-equal-width` - menu items will be inline and have equal width
-
-### Stack (default)
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-### Inline
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-### Inline Equal Width
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-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; }
-
-<IressStack gap\="lg"\>
-  <IressText\>
-    <h3\>
-      Stack (default)    </h3\>
-    <IressMenu
-      defaultSelected\="5"
-      layout\="stack"
-    \>
-      <IressMenuHeading\>
-        Menu heading      </IressMenuHeading\>
-      <IressMenuItem value\="2"\>
-        Menu item (button)      </IressMenuItem\>
-      <IressMenuDivider />
-      <IressMenuItem href\="https://iress.com"\>
-        Menu item (link)      </IressMenuItem\>
-      <IressMenuItem
-        selected
-        value\={5}
-      \>
-        Menu item (selected)      </IressMenuItem\>
-    </IressMenu\>
-  </IressText\>
-  <IressText\>
-    <h3\>
-      Inline    </h3\>
-    <IressMenu
-      defaultSelected\="5"
-      layout\="inline"
-    \>
-      <IressMenuHeading\>
-        Menu heading      </IressMenuHeading\>
-      <IressMenuItem value\="2"\>
-        Menu item (button)      </IressMenuItem\>
-      <IressMenuDivider />
-      <IressMenuItem href\="https://iress.com"\>
-        Menu item (link)      </IressMenuItem\>
-      <IressMenuItem
-        selected
-        value\={5}
-      \>
-        Menu item (selected)      </IressMenuItem\>
-    </IressMenu\>
-  </IressText\>
-  <IressText\>
-    <h3\>
-      Inline Equal Width    </h3\>
-    <IressMenu
-      defaultSelected\="5"
-      layout\="inline-equal-width"
-    \>
-      <IressMenuHeading\>
-        Menu heading      </IressMenuHeading\>
-      <IressMenuItem value\="2"\>
-        Menu item (button)      </IressMenuItem\>
-      <IressMenuDivider />
-      <IressMenuItem href\="https://iress.com"\>
-        Menu item (link)      </IressMenuItem\>
-      <IressMenuItem
-        selected
-        value\={5}
-      \>
-        Menu item (selected)      </IressMenuItem\>
-    </IressMenu\>
-  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#text-wrapping)Text wrapping
-
-By default, menu item text will wrap on to the next line when it exceeds the menu width. Using the `noWrap` prop, you set the menu item text to not wrap.
-
-Menu item with some text that wraps
-
-Non wrapping menu item with some 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; }
-
-<IressInline\>
-  <IressMenu
-    defaultSelected\="5"
-    maxWidth\="input.12"
-  \>
-    <IressMenuItem\>
-      Menu item with some text that wraps    </IressMenuItem\>
-  </IressMenu\>
-  <IressMenu
-    defaultSelected\="5"
-    maxWidth\="input.12"
-    noWrap
-  \>
-    <IressMenuItem\>
-      Non wrapping menu item with some text    </IressMenuItem\>
-  </IressMenu\>
-</IressInline\>
-
-Copy
-
-### [](#slot-props)Slot props
-
-`IressMenuItem`, `IressMenuHeading` and `IressMenuText` provide `prepend` and `append` props to position content either before or after its content.
-
-#### Prepend slot
-
-New fileSave file as
-
-* * *
-
-### Append slot
-
-[Visit the Iress website](https://www.iress.com)[Visit Google8+](https://google.com)
-
-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; }
-
-<IressMenu role\="menu"\>
-  <IressMenuHeading
-    element\="h4"
-    prepend\={<IressIcon name\="cog" />}
-  \>
-    Prepend slot  </IressMenuHeading\>
-  <IressMenuItem
-    onClick\={() \=> {}}
-    prepend\={<IressIcon name\="file-alt" />}
-  \>
-    New file  </IressMenuItem\>
-  <IressMenuItem
-    divider
-    onClick\={() \=> {}}
-    prepend\={<IressIcon name\="save" />}
-  \>
-    Save file as  </IressMenuItem\>
-  <IressMenuHeading
-    append\={<IressIcon name\="link" />}
-    element\="h3"
-  \>
-    Append slot  </IressMenuHeading\>
-  <IressMenuItem
-    append\={<IressIcon name\="chevron-right" />}
-    href\="https://www.iress.com"
-  \>
-    Visit the Iress website  </IressMenuItem\>
-  <IressMenuItem
-    append\={<IressBadge mode\="warning"\>8+</IressBadge\>}
-    href\="https://google.com"
-  \>
-    Visit Google  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-### [](#roles)Roles
-
-The `role` prop that comes with the menu component not only changes the aria-role of the menu to allow it to be easily recognised in screen readers, but also changes how the menu is interacted with.
-
-There are four roles supported:
-
-*   `list` (default): The menu is treated as a list of items. Child menu subcomponents render with the `listitem` role where appropriate. The user navigates using the `tab` key.
-*   `menu`: The menu is treated as a menu of items. Child menu subcomponents render with the `menuitem` role where appropriate. The user navigates using `arrow` keys.
-*   `listbox`: The menu is treated as a list of selectable items, similar to a `<select />`. Child menu subcomponents render with the `option` role where appropriate. The user navigates using `arrow` keys.
-
-**Note:** When menu is used as a child of popover, the `type` that is set on popover will be applied to menu (so you don't need to set it twice).
-
-#### [](#list)List
-
-The default role for the menu component is `list`. It is most often used for navigation and its items can be navigated (using the keyboard) with the `tab` key.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-The list menu is used to describe that the items are related to the same context, similar to using `ul` or `ol` lists. It is activated by setting the `role` prop to `list`.
-
-Keyboard interaction
-
-*   Menu items cannot be navigated using the arrow keys
-*   Menu items are navigated using the `tab` key
-
-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; }
-
-<IressMenu defaultSelected\={5}\>
-  <IressMenuHeading\>
-    Menu heading  </IressMenuHeading\>
-  <IressMenuItem value\="2"\>
-    Menu item (button)  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem href\="https://iress.com"\>
-    Menu item (link)  </IressMenuItem\>
-  <IressMenuItem
-    selected
-    value\={5}
-  \>
-    Menu item (selected)  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-#### [](#menu-1)Menu
-
-The `menu` role is used when the items in the menu has an action that performs a task in the application. The items can be navigated (using the keyboard) with the `arrow` keys, depending on the layout.
-
-Menu heading
-------------
-
-Menu item (button)
-
-* * *
-
-[Menu item (link)](https://iress.com)Menu item (selected)
-
-The application menu is used when the items in the menu has an action that performs a task in the application. It is activated by setting the `role` prop to `menu`.
-
-Keyboard interaction
-
-*   In stack layout, pressing the `up` arrow key on the first item will focus the last item
-*   In stack layout, pressing the `down` arrow key on the last item will focus the first item
-*   In inline layouts, pressing the `left` arrow key on the first item will focus the last item
-*   In inline layouts, pressing the `right` arrow key on the last item will focus the first item
-*   Pressing the `tab` key when focused on any item in the menu will focus to next focusable item outside of the menu
-
-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; }
-
-<IressMenu
-  defaultSelected\={5}
-  role\="menu"
-\>
-  <IressMenuHeading\>
-    Menu heading  </IressMenuHeading\>
-  <IressMenuItem value\="2"\>
-    Menu item (button)  </IressMenuItem\>
-  <IressMenuDivider />
-  <IressMenuItem href\="https://iress.com"\>
-    Menu item (link)  </IressMenuItem\>
-  <IressMenuItem
-    selected
-    value\={5}
-  \>
-    Menu item (selected)  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-#### [](#listbox)Listbox
-
-The `listbox` role is used for lists from which a user may select one or more items.
-
-A value is supplied to `IressMenuButton` (like you would with an option element inside a select) and a `onChange` event is emitted with the selected value(s) whenever the selection is changed by the user.
-
-Set the `multiSelect` prop to true for a multi-selectable listbox.
-
-New taskSend prospect welcome packBook in Discovery meetingProspect proceeding
-
-Multi-select
-
-The `listbox` menu is used for lists from which a user may select one or more items.
-
-A value is supplied to MenuItem (like you would with an `option` element inside a `select`) and a `onChange` event is emitted with the selected value(s) whenever the selection is changed by the user.
-
-If you need to set the selected state of an item programmatically, you can use the `selected` prop. This is set as string on Menu (or an array of strings for multi-selectable Menus), which then sets the selected state the child MenuItems. You can also set the `selected` prop on individual MenuItems, although we recommend that you use Menu's `selected` prop instead.
-
-**Note:** This is the menu type used to power Filter components.
-
-Keyboard interaction
-
-*   Menu items can be navigated using the arrow keys, depending on the orientation of the menu.
-*   In stack layouts, pressing the `up` arrow key on the first item will **not** focus the last item
-*   In stack layouts, pressing the `down` arrow key on the last item will **not** focus the first item
-*   In inline layouts, pressing the `right` arrow key on the last item will **not** focus the first item
-*   In inline layouts, pressing the `left` arrow key on the first item will **not** focus the last item
-*   Pressing the `tab` key when focused on any item in the menu will focus to next focusable item outside of the menu
-
-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; }
-
-<IressMenu
-  aria-label\="Selectable listbox"
-  defaultSelected\={5}
-  role\="listbox"
-\>
-  <IressMenuItem value\={0}\>
-    New task  </IressMenuItem\>
-  <IressMenuItem value\={1}\>
-    Send prospect welcome pack  </IressMenuItem\>
-  <IressMenuItem value\={2}\>
-    Book in Discovery meeting  </IressMenuItem\>
-  <IressMenuItem value\={3}\>
-    Prospect proceeding  </IressMenuItem\>
-</IressMenu\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Basic](#basic)
-    *   [Complex](#complex)
-*   [Examples](#examples)
-    *   [Secondary navigation](#secondary-navigation)
-    *   [Headings](#headings)
-    *   [Dividers](#dividers)
-    *   [Fluid menus](#fluid-menus)
-    *   [Layout](#layout)
-    *   [Text wrapping](#text-wrapping)
-    *   [Slot props](#slot-props)
-    *   [Roles](#roles)