Merge remote-tracking branch 'origin/main' into release-3.0.0

.github/workflows/pr.yml

@@ -48,6 +48,7 @@ jobs:
               - packages/react/**
               - packages/angular-test-app/**
               - packages/react-test-app/**
+              - packages/figma-plugin/**
 
   build:
     needs: changes

packages/documentation/docs/controls/_avatar_styleguide.md

@@ -3,7 +3,7 @@ Avatars are visual or textual representations of individual identities and they
 
 ## Options
 
-![Avatar overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=963-565&mode=design&t=M9CowfOcGyqnSycV-4)
+![Avatar overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=963-565&mode=design&t=M9CowfOcGyqnSycV-4)
 
 | Option                    | Description and usage                                                                                        |
 | -------------------------- | ------------------------------------------------------------------------------------------------------------ |
@@ -16,6 +16,6 @@ The avatar is a display-only component with no further interactions. Images prov
 
 ## Dos and Don’ts
 
-![Avatar dos and Don‘ts](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=975-13&mode=design&t=SxUA6AcHswBAiIzi-4)
+![Avatar dos and Don‘ts](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=975-13&mode=design&t=SxUA6AcHswBAiIzi-4)
 
 - Don't use more than 2 characters when using the "Initials" option

packages/documentation/docs/controls/_blind_styleguide.md

@@ -7,7 +7,7 @@ Blinds are UI controls that allow the users to hide or reveal content by clickin
 
 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.
 
-![Blind overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2%3A2&mode=design&t=9faEnH99BaAxqCGM-1)
+![Blind overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-2&mode=design&t=9faEnH99BaAxqCGM-1)
 
 1. Header section
 2. Content section
@@ -16,7 +16,7 @@ Blinds consist of a header section on the top and a content section below. The h
 
 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/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2%3A655&mode=design&t=9faEnH99BaAxqCGM-1)
+![Accordion](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-655&mode=design&t=9faEnH99BaAxqCGM-1)
 
 ## Variants
 
@@ -27,7 +27,7 @@ Multiple blind variants are available:
 - **Primary**: Variant for high visual emphasis
 - **State-related variants**: Alarm, critical, warning, success, info, neutral
 
-![Blind variants](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=929%3A47485&mode=design&t=9faEnH99BaAxqCGM-1)
+![Blind variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=929-47485&mode=design&t=9faEnH99BaAxqCGM-1)
 
 ## Options
 
@@ -43,7 +43,7 @@ The user expands and collapses the blind by pressing anywhere in the header sect
 
 For all blind variants, a default, hover, active and focused state is available.
 
-![Blind states](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2%3A352&mode=design&t=9faEnH99BaAxqCGM-1)
+![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
 

packages/documentation/docs/controls/_breadcrumb_styleguide.md

@@ -3,7 +3,7 @@ Breadcrumbs make the structure of applications transparent to users. We typicall
 
 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/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20%3A8463&mode=design&t=JS1Aklcq48swr0Im-1)
+![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
@@ -12,7 +12,7 @@ Breadcrumb items are interactive. Users navigate to their respective location by
 
 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/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20%3A352&mode=design&t=JS1Aklcq48swr0Im-1)
+![Breadcrumb variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20-352&mode=design&t=JS1Aklcq48swr0Im-1)
 
 ## 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).
@@ -30,7 +30,7 @@ Breadcrumbs are available as a ghost and solid variant. Both variants differ in
 
 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/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=120%3A7463&mode=design&t=JS1Aklcq48swr0Im-1)
+![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
 

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

@@ -2,7 +2,7 @@ Card lists are UI controls that display a large number of cards or items of the
 
 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.
 
-![Card list overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=897%3A31906&mode=design&t=2pf1CqY5ifYKN3F2-1)
+![Card list overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=897-31906&mode=design&t=2pf1CqY5ifYKN3F2-1)
 
 1. Header section
 2. Content section
@@ -11,11 +11,11 @@ Card lists consist of a header section at the top and a content section below. T
 ## 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/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=910%3A8581&mode=design&t=2pf1CqY5ifYKN3F2-1)
+![Card list - stack style](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=910-8581&mode=design&t=2pf1CqY5ifYKN3F2-1)
 
 The scroll card list style displays the content items from left to right next to each other in a single row. When the space runs out, horizontal scrolling is enabled, indicated by a semi-transparent area on the left or right end of the content section.
 
-![Card list - scroll style](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=915%3A8647&mode=design&t=2pf1CqY5ifYKN3F2-1)
+![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
 - **Label**: Card lists can include a label in the header section. The label is positioned right next to the chevron.

packages/documentation/docs/controls/_card_styleguide.md

@@ -2,7 +2,7 @@ Cards are UI controls used to neatly organize and group related information abou
 
 Cards are interactive elements. The entire container is clickable and triggers a single action.
 
-![Card overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858%3A4956&mode=design&t=RDimbEsIHFIXIByo-1)
+![Card overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4956&mode=design&t=RDimbEsIHFIXIByo-1)
 1. Icon
 2. Notification
 3. Heading
@@ -19,17 +19,17 @@ Action cards have an icon, a heading and a subheading. We use them to trigger ke
 
 Push cards contain a notification value in addition to the icon, heading, and subheading. These cards have an expandable section placed at the bottom of the container. When clicked, the expandable section displays additional content. The notification value is logically related to the items shown in the expandable area. Push cards have a fixed content height of 11rem that cannot be changed.
 
-![Card types](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858%3A4953&mode=design&t=RDimbEsIHFIXIByo-1)
+![Card types](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4953&mode=design&t=RDimbEsIHFIXIByo-1)
 
 ## Customization
 We also offer a card container component that enables designers to display various types of content, such as images, charts or key data. Some small rules apply: Background images can stretch over the complete size of the container, whereas the card content must maintain a default padding of at least `1rem`.
 
-![Card examples](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1329%3A26613&mode=design&t=sOZRNgWt7R52iLSF-1)
+![Card examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1329-26613&mode=design&t=sOZRNgWt7R52iLSF-1)
 
 ## Variants
 Cards are available in nine variants: Insight (outline style), notification (filled style), alarm, critical, warning, success, info, neutral and primary. Each variant emphasizes different aspects to guide the user's attention. These variants differ visually through the presence of an outline and a distinct container fill color, but they all follow the same interaction pattern. We typically use the insight variant as the default choice as we find this creates a more balanced and subtle appearance for users.
 
-![Card variants](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858%3A4969&mode=design&t=RDimbEsIHFIXIByo-1)
+![Card variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4969&mode=design&t=RDimbEsIHFIXIByo-1)
 
 ## Options
 
@@ -47,7 +47,7 @@ Cards are available in nine variants: Insight (outline style), notification (fil
 ## States 
 Cards can take one of three states: Default, hover and active. Action cards also offer a selected state.
 
-![Card states](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858%3A4979&mode=design&t=RDimbEsIHFIXIByo-1)
+![Card states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4979&mode=design&t=RDimbEsIHFIXIByo-1)
 
 ## Dos and don'ts
 - Do group cards in lists or grids (use the [card list](card-list.md) control)

packages/documentation/docs/controls/_category-filter_styleguide.md

@@ -1,6 +1,6 @@
 The category filter component enhances data navigation and user experience. We typically use a category filter to efficiently navigate large data sets, allowing users to quickly narrow their search by selecting predefined categories. It’s particularly useful in scenarios with complex data. The filter also enhances user experience by providing autocomplete suggestions and customizable filter conditions.
 
-![Category filter overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1799%3A38402&mode=design&t=hgAA8GogE70JbHHy-1)
+![Category filter overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1799-38402&mode=design&t=hgAA8GogE70JbHHy-1)
 1. Container 
 2. Search icon 
 3. Input chip 
@@ -31,7 +31,7 @@ The category filter component enhances data navigation and user experience. We t
 
 Category filter has six states: Default, hover, active, disabled, read-only and focused.
 
-![Category filter states](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1799-38415&mode=design&t=1vxCdaFjmBNHp8Sk-4)
+![Category filter states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1799-38415&mode=design&t=1vxCdaFjmBNHp8Sk-4)
 
 - **Read-only**: By setting the category filter to read-only, accidental data modifications or deletions can be prevented. This can be particularly useful when dealing with critical or sensitive information that should not be altered without proper authorization. 
 - **Disabled**: This state is typically applied when the element is not applicable to the current context or when certain conditions must be met before the category filter can be enabled.  

packages/documentation/docs/controls/_chip_styleguide.md

@@ -1,6 +1,6 @@
 Chips are components used to display small pieces of information in a compact and visually appealing way. Typically chips contain a concise label and sometimes an icon, and they are clickable and closable.
 
-![Chip overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1149%3A41643&mode=design&t=ruQOzpPQJMKwnk8f-1)
+![Chip overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1149-41643&mode=design&t=ruQOzpPQJMKwnk8f-1)
 
 1. Container 
 2. Label text 
@@ -17,7 +17,7 @@ Chip variants:
 - **State-related variants**: Alarm, critical, warning, success, info and neutral
 - **Custom**: For a customized background and label color 
 
-![Chip variants](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1201%3A9512&mode=design&t=ruQOzpPQJMKwnk8f-1)
+![Chip variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1201-9512&mode=design&t=ruQOzpPQJMKwnk8f-1)
 
 
 ## Options
@@ -42,7 +42,7 @@ Chip variants:
 
 Chips take a default, hover, focused or active state with a varying background color. For the custom chip variant, the specified colors for font and background are applied to all states.
 
-![Chip states](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1246%3A6190&mode=design&t=GHOok90R6TcaUrYi-1)
+![Chip states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1246-6190&mode=design&t=GHOok90R6TcaUrYi-1)
 
 ## Dos and Don'ts
 

packages/documentation/docs/controls/_content-header_styleguide.md

@@ -1,7 +1,7 @@
 The content header provides a brief overview of the content on a page. It helps our users understand what the page is about.
 We typically use it at the very top of the page to show a clear hierarchy of the page.
 
-![Content header overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-4784&mode=design&t=XmCepM9jPR9PImPw-4)
+![Content header overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-4784&mode=design&t=XmCepM9jPR9PImPw-4)
 
 1. Back button 
 2. Content title
@@ -14,7 +14,7 @@ Our content header variants makes it easier to achieve a well-balanced visual hi
 * Primary: In our applications, we most often use the primary variant for main pages or primary sections.
 * Secondary: We typically use this variant when we want to provide context or actions for a specific section of a page, such as when displaying detailed information related to a selected item from a list.
 
-![Content header variants](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-9102&mode=design&t=XmCepM9jPR9PImPw-4)
+![Content header variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-9102&mode=design&t=XmCepM9jPR9PImPw-4)
 
 ## Options
 - **Back button**: Enable if you want to provide a way for the user to navigate back.

packages/documentation/docs/controls/_dropdown_styleguide.md

@@ -1,7 +1,7 @@
 Dropdown containers display a menu with additional items when users click on the trigger element, e.g. a dropdown button. Clicking on one of the items in the dropdown performs the action. We typically use dropdowns to allow users to select one option from a list.
 
 
-![Overview](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2353-2278&mode=design&t=OVHeXvLZYLkP2CzN-4)
+![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2353-2278&mode=design&t=OVHeXvLZYLkP2CzN-4)
 
 1. Dropdown container
 2. Item
@@ -32,7 +32,7 @@ Dropdown containers display a menu with additional items when users click on the
 - **Placement:** Place a dropdown at the top, bottom, left or right edge as well as at the beginning or end of the trigger/anchor element. The placement may be automatically adjusted in case it cannot be displayed correctly (detailed behavior described in the context section below). We typically use the default (bottom right) placement option to ensure consistency.
 - **Date Selection:** Use the component [date dropdown](date-dropdown.md) to get a date selection in the dropdown.
 
-![Dropdown Examples](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2372-2696&mode=design&t=OVHeXvLZYLkP2CzN-4)
+![Dropdown Examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2372-2696&mode=design&t=OVHeXvLZYLkP2CzN-4)
 
 ## Behavior in context
 - **Text truncation:** The labels of the items and the header only consist of one line. A truncation only occurs if there is not enough space on the screen.
@@ -45,7 +45,7 @@ Dropdown containers display a menu with additional items when users click on the
 ## States
 Dropdown items have five states: Default, hover, active, disabled and focused. When a submenu is in an active state, the submenu displays an additional dropdown with selectable options.
 
-![Item States](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2343-42235&mode=design&t=OVHeXvLZYLkP2CzN-4)
+![Item States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2343-42235&mode=design&t=OVHeXvLZYLkP2CzN-4)
 
 ## Dos and Don’ts
 - Do structure dropdown items coherently with submenus, quick actions and separators
@@ -59,4 +59,4 @@ Dropdown items have five states: Default, hover, active, disabled and focused. W
 - [Dropdown button](buttons/dropdown-button.md)
 - [Split button](buttons/split-button.md) 
 - [Date dropdown](date-dropdown.md) 
-- [Select](select.md)
+- [Select](select.md)