Adapt documentation new

packages/documentation/docs/controls/_blind_code.md

@@ -6,15 +6,17 @@ import Events from './../auto-generated/ix-blind/events.md';
 
 import Playground from '@site/src/components/PlaygroundV3'
 
-## Examples
+## Development
+
+### Examples
 
 <Playground
 name="blind"
 height="16rem"
 
 > </Playground>
 
-### Header actions
+#### Header actions
 
 <ApiTableSinceTag message="1.5.0" />
 
@@ -24,7 +26,7 @@ height="16rem"
 
 > </Playground>
 
-### Variants
+#### Variants
 
 <ApiTableSinceTag message="2.0.0" />
 
@@ -34,12 +36,12 @@ height="55rem"
 
 > </Playground>
 
-## API
+### API
 
-### Properties
+#### Properties
 
 <Props />
 
-### Events
+#### Events
 
 <Events />

packages/documentation/docs/controls/_blind_styleguide.md

@@ -3,6 +3,8 @@ import Preview from '@site/src/components/Preview';
 import Props from './../auto-generated/ix-blind/props.md';
 import Events from './../auto-generated/ix-blind/events.md';
 
+## Guidelines
+
 Blinds are UI controls that allow the users to hide or reveal content by clicking on a control element. Blinds can display a large amount of content in a compact space or present information in an organized and hierarchical way. Blinds reduce the user's cognitive load by removing clutter and less important information from an interface. We typically don't use blinds if the content is central to the user's task due to its reduced visibility and accessibility.
 
 Blinds consist of a header section on the top and a content section below. The header section contains a chevron on the left followed by the blind's label. Within the content section, content can be placed freely.
@@ -12,13 +14,13 @@ Blinds consist of a header section on the top and a content section below. The h
 1. Header section
 2. Content section
 
-## Types
+### Types
 
 Multiple blinds can be placed below each other to create an accordion. The recommended distance between the blinds is `0.5rem`. Typically, only one blind can be opened within an accordion but users can be allowed to open multiple blinds at a time.
 
 ![Accordion](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-655&mode=design&t=9faEnH99BaAxqCGM-1)
 
-## Variants
+### Variants
 
 Multiple blind variants are available:
 
@@ -29,31 +31,31 @@ Multiple blind variants are available:
 
 ![Blind variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=929-47485&mode=design&t=9faEnH99BaAxqCGM-1)
 
-## Options
+### Options
 
 - **Icon**: Blinds can, but don't have to, include an icon in the header section. The icon is positioned before the blind label.
 - **Sublabel**: A secondary label can be placed within the header section. The sublabel gives additional information about the blind's content.
 - **Header action**: The header section can contain an action area. We typically use the action area to include one or two buttons for actions directly related to the blind, e.g. to delete the blind or to navigate to additional content.
 
-## Behavior in context
+### Behavior in context
 
 The user expands and collapses the blind by pressing anywhere in the header section. When the blind is expanded, content below the blind is moved downwards.
 
-## States
+### States
 
 For all blind variants, a default, hover, active and focused state is available.
 
 ![Blind states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-352&mode=design&t=9faEnH99BaAxqCGM-1)
 
-## Dos and don'ts
+### Dos and Don'ts
 
 - Do stay within the recommended number of blinds - between 3 and 7
 - Don't use multi-line text in the header. The header section has a fixed height for single-line text entries
 - Don't change the position of the chevron icon and the blind's label in the header
 - Don't use a blind if there is only a single category to be displayed
 - Don't use blinds to display hierarchically structured files or objects - rather use a tree for such cases
 
-## Related patterns:
+### Related patterns:
 
 - [Tabs](tabs.md)
 - [Tree](tree.md)

packages/documentation/docs/controls/_breadcrumb_code.md

@@ -6,48 +6,50 @@ import ItemEvents from './../auto-generated/ix-breadcrumb-item/events.md';
 
 import Playground from '@site/src/components/PlaygroundV3'
 
-## Examples
+## Development
+
+### Examples
 
 <Playground
-  name="breadcrumb"
-  height="8rem"
-  >
-</Playground>
+name="breadcrumb"
+height="8rem"
+
+> </Playground>
 
-### Truncate
+#### Truncate
 
 <Playground
-  name="breadcrumb-truncate"
-  height="10rem"
-  hideInitalCodePreview
-  >
-</Playground>
+name="breadcrumb-truncate"
+height="10rem"
+hideInitalCodePreview
+
+> </Playground>
 
-### Lazy loaded next items
+#### Lazy loaded next items
 
 <Playground
-  name="breadcrumb-next-items"
-  height="8rem"
-  hideInitalCodePreview
-  >
-</Playground>
+name="breadcrumb-next-items"
+height="8rem"
+hideInitalCodePreview
 
-## API (ix-breadcrumb)
+> </Playground>
 
-### Properties
+### API (ix-breadcrumb)
+
+#### Properties
 
 <Props />
 
-### Events
+#### Events
 
 <Events />
 
-## API (ix-breadcrumb-item)
+### API (ix-breadcrumb-item)
 
-### Properties
+#### Properties
 
 <ItemProps />
 
-#### Events
+##### Events
 
 <ItemEvents />

packages/documentation/docs/controls/_breadcrumb_styleguide.md

@@ -1,45 +1,49 @@
+## Guidelines
+
 Breadcrumb navigation is a UI control that allows users to track their location within an application and easily navigate to previous or child pages.
 Breadcrumbs make the structure of applications transparent to users. We typically use breadcrumbs in applications that have a deep hierarchy of pages or content. This helps users understand where they are within applications, and makes it easier to navigate to pages further along the navigation tree. As a general rule, we use breadcrumbs for information architecture with more than two levels, but not as a replacement for an application's main navigation. If the information structure is extremely complex, we often consider using a tree instead of a breadcrumb.
 
 Breadcrumb items are interactive. Users navigate to their respective location by pressing the item. Each item contains a breadcrumb label. All items in the breadcrumb path are always followed by a chevron icon except for the last item.
 
 ![Breadcrumb overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20-8463&mode=design&t=JS1Aklcq48swr0Im-1)
+
 1. Breadcrumb item
 2. Separator
 3. Dropdown
 
-## Variants
+### Variants
 
 Breadcrumbs are available as a ghost and solid variant. Both variants differ in font and fill color but interact in the same pattern. We typically use the ghost variant to create a lower visual emphasis for users.
 
 ![Breadcrumb variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20-352&mode=design&t=JS1Aklcq48swr0Im-1)
 
-## Options
+### Options
+
 - **Icon**: Breadcrumb items can, but don't have to, include an icon. The icon is positioned before the breadcrumb label. Icons can be included for each item or only for specific items (e.g. the root item).
-- **Show child items on last item**:  By default, the last item of the breadcrumb doesn't offer any user interaction. An interactive item variant is available which allows the user to browse to child pages of the current page. Pressing the item triggers a dropdown listing all child elements.
+- **Show child items on last item**: By default, the last item of the breadcrumb doesn't offer any user interaction. An interactive item variant is available which allows the user to browse to child pages of the current page. Pressing the item triggers a dropdown listing all child elements.
 - **Visible item count**: By default, breadcrumbs display a limited number of items. This number can be adjusted.
 
-## Behavior in context
+### Behavior in context
 
 - **Population**: As a general rule, we populate breadcrumbs location-based to reflect the hierarchy of the application and the location of the user within it. We always include the current location in the breadcrumb.
 - **Overflow**: If the number of items exceeds the defined limit, items are hidden within a dropdown menu at the beginning of the path. The dropdown menu is triggered by pressing the respective item. The truncation is visualized with an ellipsis. The overflow behavior can also be triggered if the available space does not allow the complete display of the breadcrumb in one line.
 - **Text truncation**: Truncation is applied to individual breadcrumb items if the maximum width of the breadcrumb item is exceeded. The label name is truncated with an ellipsis.
 - **Placement**: We typically place breadcrumbs at the top left side of the page/content area, below the header and above the page title.
 
-## States
+### States
 
 Interactive items can take one of four states: Default, hover, active and focused. Non-interactive items are always in default state.
 
 ![States of breadcrumb items](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=120-7463&mode=design&t=JS1Aklcq48swr0Im-1)
 
-## Dos and don'ts
+### Dos and Don'ts
 
-- Do label each item, i.e. use more than icons 
+- Do label each item, i.e. use more than icons
 - Do use single-line text entries as breadcrumb items have a fixed height
 - Don't use breadcrumbs to display a multistep process (use the [workflow](workflow.md) control instead)
 - Don't show multiple breadcrumbs on one screen, e.g. in a content area and in a drawer
 
-## Related patterns:
+### Related patterns:
 
 - [Dropdown](dropdown.md)
 - [Basic navigation](application-frame/basic-navigation.md)

packages/documentation/docs/controls/_card-list_code.md

@@ -4,20 +4,22 @@ import Events from './../auto-generated/ix-card-list/events.md';
 
 import Playground from '@site/src/components/PlaygroundV3';
 
-## Examples
+## Development
+
+### Examples
 
 <Playground
-  height="55rem"
-  name="card-list"
-  >
-</Playground>
+height="55rem"
+name="card-list"
+
+> </Playground>
 
-## API
+### API
 
-### Properties
+#### Properties
 
 <Props />
 
-### Events
+#### Events
 
 <Events />

packages/documentation/docs/controls/_card-list_styleguide.md

@@ -1,3 +1,5 @@
+## Guidelines
+
 Card lists are UI controls that display a large number of cards or items of the same type in a lightweight, grouped manner. Users can hide and reveal the card list content by clicking on a control element. We typically use card lists on dashboards to show a huge amount of information in an organized and hierarchical way.
 
 Card lists consist of a header section at the top and a content section below. The header section includes an icon button with a chevron on the left, followed by the card list's label. In the content section, items of the same type can be arranged in two different layout styles: stack and scroll.
@@ -7,8 +9,10 @@ Card lists consist of a header section at the top and a content section below. T
 1. Header section
 2. Content section
 3. "Show all" button
-3. "Show more" card
+4. "Show more" card
+
 ## Types
+
 The stack card list style displays content items from left to right next to each other and wraps them into a new line when space runs out. This means the height of the section can dynamically change.
 
 ![Card list - stack style](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=910-8581&mode=design&t=2pf1CqY5ifYKN3F2-1)
@@ -17,7 +21,8 @@ The scroll card list style displays the content items from left to right next to
 
 ![Card list - scroll style](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=915-8647&mode=design&t=2pf1CqY5ifYKN3F2-1)
 
-## Options
+### Options
+
 - **Label**: Card lists can include a label in the header section. The label is positioned right next to the chevron.
 - **Collapse**: By default, the card list is expanded, but this can be customized to suit your specific needs.
 - **Max visible cards**: By default, the card list displays a maximum of 12 items. If more items are available, a "Show more" card is displayed.
@@ -26,16 +31,19 @@ The scroll card list style displays the content items from left to right next to
 - **Show all count**: This represents the total number of card list items. This value is displayed on the "Show all" button.
 - **String - More cards**: By default, the card used to indicate when there are more items available is labeled "There are more cards available".
 
-## Behavior in context
+### Behavior in context
+
 - **Interaction**: Users expand and collapse card list content by clicking on the icon button with the chevron in the header section. When the card list is expanded, content below the card list is pushed downwards.
-- **"Show all" button**:  Sometimes card lists only need to show the most important or most recent items. Clicking on the "Show all" button in the header section shows all items. Typically, these items are displayed on a new page.
-- **"Show more" card**: The number of visible items inside a list can be limited to reduce the user's cognitive load. The "Show more" card indicates  that more information is available. Selecting the card either displays the next chunk of items or shows all items on a new page, similar to the "Show all" button pattern.
+- **"Show all" button**: Sometimes card lists only need to show the most important or most recent items. Clicking on the "Show all" button in the header section shows all items. Typically, these items are displayed on a new page.
+- **"Show more" card**: The number of visible items inside a list can be limited to reduce the user's cognitive load. The "Show more" card indicates that more information is available. Selecting the card either displays the next chunk of items or shows all items on a new page, similar to the "Show all" button pattern.
+
+### Dos and Don'ts
 
-## Dos and don'ts
 - Do keep cards and items within card lists the same size
 - Don't place different types of components within card lists
 - Don't nest card lists within each other
 
-## Related patterns:
+### Related patterns:
+
 - [Blind](blind.md)
 - [Card](card.md)